JSFiddle - React, Tailwind, and code Playground

HTML

<div>
        <header>
            <h1>הרשמה</h1>
        </header>
        <section id="formMe">
            <h2>הרשמה</h2>
            <form action="register.phtml" method="post">
                <p><label for="uN">שם משתמש : <input type="text" name="uN" id="uN" maxlength="16"></label></p>
                <p><label for="uNi"> כינוי : <input type="text" name="uNi" id="uNi" maxlength="8"></label></p>
                <p><label for="uP">סיסמה : <input type="text" name="uP" id="uP" maxlength="16"></label></p>
                <p><label for="uPr">סיסמה שנית : <input type="text" name="uPr" id="uPr" maxlength="16"></label></p>
                <p><label for="uQ">שאלת אבטחה  : <input type="text" name="uQ" id="uQ" maxlength="16"></label></p>
                <p><label for="uA">תשובת אבטחה  : <input type="text" name="uA" id="uA" maxlength="16"></label></p>
                <p><label for="uE"> חשבון אימייל : <input type="text" name="uE" id="uE" maxlength="16"></label></p>
                <p><label for="uEr">חשבון אימייל שנית : <input type="text" name="uEr" id="uEr" maxlength="16"></label></p>
                <p>
                    <label><input type="radio" name="uG" id="uGm" value="male"> זכר</label>
                    <label><input type="radio" name="uG" id="uGf" value="female"> נקבה</label>
                </p>
                <input type="submit" name="submit" value="שלח"><input type="reset" name="reset" value="אפס">
            </form>
        </section>
        <footer>
            <h2>Contact and legal information</h2>
            <p><small>PhpLiteral.zapto.org &copy; 2012 - 2013</small></p>
        </footer>
    </div>

CSS

@charset "UTF-8";

html /* Global Styles */
{
    font: bold 100% Narkisim, Arial;
    direction: rtl;
}


body
{
    margin: 0;
    padding: 0;
}


h2,h3,h4,h5,h6 /* Headers use only for outline */
{
    margin: 0;
    display: none;
}

header  /* Main Header */
{
    border-bottom: 3px solid rgba(255, 117, 44, 0.7);
}

header h1  /* Main Header H1 */
{
    direction: rtl;
    margin: 0; padding: 0;
    text-shadow: 0 2px 3px #555; /* The small vertical space is becouse of the blur(3px) */
    font: 3.1em Georgia, "Times New Roman", Times, serif;
    letter-spacing: -5px;
    color: #222;
}

div /* Main container */
{
    width: 320px;
    margin: 0 auto;
}

#formMe form
{
    position: relative;
}

#formMe p
{
    height: 24px;
    margin: 0; padding-top: 20px;
    border-bottom: 3px solid #7A7275;
    overflow: hidden;
}

#formMe p label input
{
    font: bold 0.8em Arial;
}

#formMe p label input[type="text"]
{
    height: 19px;
    padding: 2px;
    float: left;
}

#formMe p label input[type="radio"]
{
    margin-right: 70px;
}

#formMe input[type="submit"], #formMe input[type="reset"]
{
    margin: 20px 0;
    font: bold 0.9em Arial;
}

#formMe input[type="reset"]
{
    margin-right: 200px;
}

#formMe input[type="submit"], #formMe input[type="reset"]
{
    box-shadow:inset 0 1px 0 0 #fff;
    background: #ededed;
    border-radius:6px;
    border:1px solid #dcdcdc;
    color:#777;
    font-size: 0.9em;
    font-weight: bold;
    height: 30px; width: 60px;
    text-shadow:1px 1px 0 #fff;
}

#formMe input[type="submit"]:hover, #formMe input[type="reset"]:hover {
    background: #dfdfdf;
}

#formMe strong
{
    font-size: 1em;
    height: 20px;
    top: 0;
    position: absolute;
    color: #777;
    background-color: rgba(255, 117, 44, 0.4);
    border-bottom: 3px solid rgba(255, 117, 44, 0.7);
}

footer /* Main footer */
{
    text-align: center;
    font-size: 1.3em;
    border-top: 3px solid rgba(255, 117, 44, 0.7);
}

JavaScript

$(function(){
    var oTextTypeInp = $(":text");
    var arMess = {
        uN : "sdasdas",
        uNi : "asdasfasf",
        uP : "asfasaasgasg",
        uPr : "asgadsd",
        uQ : "asgagwqaerwq",
        uA : "asdasfasf",
        uE : "gdsdasfasfasf",
        uEr : "asfasgawea"
    };

    var arFocus = {};



    oTextTypeInp.focus(function(){
        var iCurIndex = $(this).prop("id");
        if(arFocus[iCurIndex] != true){
        arFocus[iCurIndex] = true;
        var $strongElement = $(this).closest("p").after('<strong>' + arMess[iCurIndex] + '</strong>').next();
            
        $strongElement.animate({
            top: $(this).offset().top - 57,
            left: -$strongElement.width() 
        }, 300, function(){
            alert(-$(this).width()); 
        });
        }
    });

    oTextTypeInp.on("keydown keyup", function(){

    });
});