Skip to content
Submitted about 1 year ago

React + Tailwind CSS with responsive design and Clipboard API

Arturo Simon•1,785
@artimys
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...URL shortening API landing page
  • HTML
  • CSS
  • JS
  • API
3intermediate

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
    @adhaybePosted about 1 year 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
    0
    Arturo Simon•1,785
    @artimysPosted about 1 year 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!!

    0

Please log in to post a comment

Log in with GitHub

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