Tailwind CSS

Hey, @Mishywayu

Congrats on completing the challenge.

I've got a few points to mention -

• While working with the Forms we should use <label> element for input labels. For example you can use <label > tag instead of <h2> tag like this -

<label for="email-input" class="font-bold">Email address</label >
<p class="hidden text-red-500 text-sm text-right font-semibold" id="invalid-msg">Valid email required</p>
 <input type="email" name="" placeholder="[email protected]" class="mt-2 p-3 w-full border border-slate-500 rounded-lg cursor-pointer" id="email-input"/>

So, we can focus the input automatically by clicking on the label. If there isn't any use case to define a label like this just the input field with a placeholder, in that case too we should define the label using the aria-label attribute.

• You can start using HTML5 Semantic elements

• There are some responsiveness glitches for tablet screens which makes the design bit unresponsive. What you can do is make the main container width: 100%` and some padding around the body.

I hope these points will help you. Nice solution.

Happy Coding