Skip to content
Submitted 6 months ago

Form using Tailwind

Brian Hammer•180
@BrianHammer
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Contact form
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

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

I am most proud of the radio cards, and how I was able to make the styling work with only tailwind. Next time I would use a framework like React so I do not need to copy and paste the files over and over again. I excluded the JavaScript validation because my focus is on tailwind styling for now.

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

One main challenge was getting the radio cards to work. I solved this by wrapping the whole thing in an HTML element, and adding padding.

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

Any feedback is appreciated.

Community feedback

  • Joshua Olanrewaju Ikulayo•220
    @SaviourjrPosted 6 months ago

    Hi 👋 Brian .. Nice job bro 👍 it looks perfect! You can try use padding top to align it at the center or your min -height set to 100vh. And again the attribute class you can delete it if you don’t want to position at the footer

    I hope this helps bro..Happy coding Man!

    Marked as helpful
    1
    Brian Hammer•180
    @BrianHammerPosted 6 months ago

    @Saviourjr Thanks man. I forgot to remove the attribution style in the HTML. Min height to 100vh would put the form in mobile in the center, but then I would have to adjust the forms to make them smaller. By putting it in the center, I meant the padding on the bottom when you scroll all the way down in mobile view.

    1

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