JSFiddle - React, Tailwind, and code Playground

by kyllle

HTML

<div class="asterisk form_text_input has-error form-input">
              <label for="social_security_input">Social Security Number Social Security Number Social Security Number Social Security Number</label>
              <div class="form-input-layout" style="
  display: flex;
  justify-content: center;
  align-items: center;
">
<div class="form-input-container">
                <input type="text" name="social_security_input" id="social_security_input" placeholder="000 00 0000" size="9" maxlength="9" class="owner-info-modal-form__field is-required">
                <img class="lock-icon" src="/assets/lock-e9db3e6f0f3c15de398de142ba0ddd29d55566379381005445e826ced4be7e91.png">
              </div>
<div class="popover__container">
                  <span class="popover__label">Why do we ask?</span>
                  <div class="popover__content">
                    <p>
                      Like banks and other financial institutions, 
                      we need a <b>Social Security Number</b> to verify your identity 
                      and make sure you meet our signup requirements. 
                      Your information will not be shared and the submission form is completely secure.
                    </p>
                  </div>
                </div></div>
            <p class="validation-error">Please enter your SSN number.</p></div>