Submitted 4 months ago

Form using Tailwind

Brian Hammer• 180

@BrianHammer

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Contact form

HTML
CSS
JS

2junior

View challenge

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

@Saviourjr

Posted 4 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

Brian Hammer• 180

@BrianHammer

Posted 4 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.

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