JSFiddle - React, Tailwind, and code Playground

by mich

HTML

<form action="/user/signup" method="post">
    <fieldset>
        <div>
            <label for="form_username">Username</label>
            <input type="text" id="username" name="username">
            <div class="info">A valid username consists of letters (a-z) and/or numbers (0-9).</div>
        </div>
        <div>
            <label for="form_email">Email</label>
            <input type="text" id ="form_email" name="email">            
            <div class="info">We will send you an email to validate your account.</div>
        </div>
        <div>
            <label for="form_password">Password</label>
            <input type="password" id ="form_password" name="password">            
            <div class="info">Your password should be at least 6 characters long.</div>
        </div>
        <div>
            <label for="form_passwordretype">Repeat Password</label>
            <input type="password" id ="form_passwordretype" name="passwordretype">            
            <div class="info">Please repeat your password to ensure you haven't made any mistakes.</div>
        </div>
    </fieldset>    
</form>

CSS

body { padding: 10px; }
fieldset div { margin-bottom: 10px; }
label, input { display: block; }
label { font-weight: bold; }
input { border: solid 2px #999;  padding: 3px; }
input:focus { border-color: #000;}


div.info { 
    display:none;
    color: #777;
    font-size: 12px;
    margin: 2px 0; 
    text-indent: 1em;
}
input:focus + div.info { display:block }