JSFiddle - React, Tailwind, and code Playground

by TheBuzzer

HTML

<form id="Test1">
    <input type="button" id="Save" value="Save" />
</form>

<div id="lightbox"></div><div id="login_outer_container"><div id="login_form"><fieldset><legend>Enter Verification Code</legend><p><label for="captchacode2">Captcha Code:</label><input name="captchacode2" id="captchacode2" type="text" size="10" /><br /><input type="button" id="SendCaptcha" tabindex="39" value="Send Information"  />&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" id="CancelSend" value="Cancel" /></p></fieldset></div></div>

CSS

#lightbox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: black;
    filter: alpha(opacity=60);
    opacity: 0.6;
    display: none;
    font-family:Trebuchet MS;
    font-size:11px;
}

#login_outer_container {
    position: absolute;
    top: 50%;
    left: 50%;
}

/* Ajouter les coins ronds */
#login_form {
    position: relative;
    top: -200px;
    left: -150px;
    width: 300px;
    height: auto; /* 245px; */
    display: none;
    background: white;
    font-family:Trebuchet MS;
    font-size:12px;
    padding: 12px 15px 15px 15px;
    border: 1px solid #424242;
    color:#7685A4;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

#login_form label.error {
    color:red;
}


#login_form p {
    clear:both;
}

#login_form a {
    color:#7685A4;
    font-size:9px;
}

#login_form a:link {
    color:#7685A4;
}

#login_form a:visited {
    color:#7685A4;
}

JavaScript

$("#Test1").click(function (){
        $('#lightbox')
            .css({
                'height': $(document).height(),
                //reset opacity because IE loses it on open
                'filter': 'alpha(opacity=60)'
            })
            .fadeIn('slow');
        $('#login_form')
            .css({
                 'top': '100px'
            })
            .fadeIn('slow', function() { $("#captchacode2").focus(); });
});