Skip to content
Submitted almost 5 years ago

Intro component with sign-up form with TailwindCSS and Vanilla CSS

Sagar Kaurav•460
@sagarkaurav
A solution to the Intro component with sign-up form challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Feedback appreciated

Code

Please log in to post a comment

Log in

Community feedback

  • Mark Mitchell•1,820
    @markup-mitchell

    I'm happy to see other tailwind users on here! It looks really close to the design.

    Just a couple of things I noticed:

    object-fill is not doing anything on your <body> element; it won't act on a div's background-image, only a replaced element like a <img>.

    I'm not sure the validaton on the inputs is working as intended - I struggled to get the errors to show!

  • Abdulla Bashiroglu•520
    @bashiroglu

    @sagarkaurav, It looks good, two things I noticed, probably "try it free" is not a button just div or p. And it needs more space for form in a horizontal direction. Good luck.

  • Grace•32,130
    @grace-snow

    Really nice solution, this one! I like it a lot.

    A few small learning points from your html:

    • Only minor, but with aria labels, write them as you would any label. So instead of aria-label="First Name input" just put first name in there. It is announced as an input already, so screenreaders would hear input, text, first name input with how you have it at the moment.
    • make sure any text you have on the page is always in a meaningful element. Just a span or div is not enough. This one is a bit more important as paragraphs, lists, and other text elements are all used to make up the document outline for search engines and assistive tech. They don't know what to do with text in a span/div alone.

    I hope these tips are helpful. You've been doing great work

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