React App styled with Tailwind and sign up form built using Formik

Community feedback

• 

  Boyan Liu•465

  @BoyanLiuuPosted almost 4 years ago

  I can suggest one

  It is use position absolute for the icon you can have a div include both input and error icon div for the error icon div, you can set background image for the error icon. Then you use position absolute for the icon dive and position relative for the outter div that wrapper both input and error icon div. Then you use top bottom to put the error icon div in the proper position.

                          <div class="input-container">
                              <input
                                  aria-label="first name"
                                  type="text"
                                  name="first-name"
                                  id="first-name"
                                  placeholder="First Name"
                              />
                              <div class="error-icon first-icon"></div>
                              <div class="error-message">
                                  First Name cannot be empty
                              </div>
                          </div>
  

  1

  ---

  

  Kristian Dunne•305

  @KristianDunnePosted almost 4 years ago

  @BoyanLiuu Thanks so much for taking the time to suggest this! I am going to give this a try :)

  0

  

  Kristian Dunne•305

  @KristianDunnePosted almost 4 years ago

  @BoyanLiuu I have just used your suggestion and it worked great. Thank you very much 👍

  0

  

  Boyan Liu•465

  @BoyanLiuuPosted almost 4 years ago

  @KristianDunne glad to help :)

  0