Submitted 8 months ago

React + Tailwind CSS with responsive design and Clipboard API

#react#tailwind-css#vite

Arturo Simon• 1,785

@artimys

Preview site View code

This is a solution for...

URL shortening API landing page

HTML
CSS
JS
API

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello Everyone,

Completed challenge using React and first time using Tailwind CSS.

Difficulties:

Replicating Hero section with the illustration SVG slightly cut off when aligned to the right of the viewport. My attempts would result in a horizontal scrollbar.

Any feedback/ideas to achieve this is appreciated.

Happy Coding!!

Tools used:

Formik - form management
Yup - schema validation used with Formik - validate link field
Clipboard API - to copy link
React
Tailwind CSS

Community feedback

Adnan• 50

@adhaybe

Posted 8 months ago

Overall, this is quite impressive. It's clear you've put a lot of effort into it.

Have you thought about leveraging Tailwind's animation features? They could add an extra layer of polish.

Marked as helpful

Arturo Simon• 1,785

@artimys

Posted 8 months ago

Thanks @adhaybe. Yes, it has crossed my mind to animate, specifically the mobile menu and new form entries to start but TailwindCSS learning curve drained me lol.

I totally agree though and will most likely add it.

Thanks for the feedback!!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord