Skip to content
Submitted 19 days ago

React and tailwind for Quiz app

#react#vite#tailwind-css
P
Suraj Khatri•380
@SurajCasey
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Frontend Quiz app
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I finally completed this app taking long time.

What challenges did you encounter, and how did you overcome them?

there are lots of challenges, first was to use react for first time.

What specific areas of your project would you like help with?

making it more responsive and get idea on how to make more components to make it more reliable.

Community feedback

  • P
    Stevan-Dev•660
    @Stv-devlPosted 19 days ago

    Hi, good work,

    To help you make your design responsive with Tailwind CSS, you can use breakpoints like "sm" (for mobile) in your SelectionElement component.

    You can also use "sm" to change your title font-size.

    Tailwind CSS is a mobile-first solution, so you can write w-[90%] for the mobile view and sm:w-[546px] so that everything above the breakpoint will be 546px:

    <div className="sm:w-[564px] w-[90%] flex-shrink flex flex-col gap-6">

    I advise you to look into the "tailwind-merge" and "clsx" libraries; they will help you clean up your JSX.

    I also advise you to check "eslint-plugin-tailwindcss." It's a game-changer because it automatically organizes your Tailwind classes when you save your file. (but it's not yet working for Tailwind CSS 4.)

    Good learning!

    Marked as helpful
    0
    P
    Suraj Khatri•380
    @SurajCaseyPosted 17 days ago

    @Stv-devl Thanks brother, I will work on that.

    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