Tailwind CSS

Community feedback

• 

  P

  Krishna Vishwakarma•1,390

  @KrishnaVishwakarma1595

  Posted over 1 year ago

  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@company.com" 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

  01

  Marked as helpful