JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#login" id="loginlink">Вход</a>
            <div id="loginbox" tabindex="0">
                <div id="triangle-border"></div>
                <div id="triangle"></div>
                <table>
                    <tr><td colspan="2" id="logincell">
                        <input type="text" value="Логин" name="username">
                    </td></tr>
                    <tr><td colspan="2" id="passcell">
                        <input type="text" value="Пароль" name="pass">
                    </td></tr>
                    <tr><td id="klp">
                        <input type="checkbox" id="rem" name="rem" checked="checked">
                        <label for="rem">Запомнить?</label>
                    </td>
                    <td style="width:45px;">
                        <input type="button" id="loginbttn" value="OK">
                    </td></tr>
                </table>
            </div>

CSS

* {
    outline: 0;
}

input[type="text"] {
    font-size: 12px;
    color: #d6d6d6;
    font: 'Helvetica Neue', 'Helvetica', Tahoma, sans-serif;
    border: 1px solid #cbcbcb;
    text-align: left;
    padding: 6px 4px;
    margin: 5px;
}

input[type="text"]:focus {
    color: #9e9e9e;
    border: 1px solid #a9b2c0;
}

input[type="button"] {
    font-size: 12px;
    color: #838383;
    text-shadow: 0 1px rgba(255,255,255,0.6);
    font-family: Arial, Tahoma, sans-serif;
    border: 1px solid #bebebe;
    text-align: left;
    padding: 6px 13px;
    cursor: pointer;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(179,179,179,0.4);
    -webkit-box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(179,179,179,0.4);
    -moz-box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(179,179,179,0.4);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    background-image: linear-gradient(bottom, rgb(227,227,227) 47%, rgb(235,235,235) 87%);
    background-image: -o-linear-gradient(bottom, rgb(227,227,227) 47%, rgb(235,235,235) 87%);
    background-image: -moz-linear-gradient(bottom, rgb(227,227,227) 47%, rgb(235,235,235) 87%);
    background-image: -webkit-linear-gradient(bottom, rgb(227,227,227) 47%, rgb(235,235,235) 87%);
    background-image: -ms-linear-gradient(bottom, rgb(227,227,227) 47%, rgb(235,235,235) 87%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.47, rgb(227,227,227)),color-stop(0.87, rgb(235,235,235)));
}

input[type="button"]:hover {
    border: 1px solid #b3b3b3;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(179,179,179,0.5);
    -webkit-box-shadow: inset 0 2px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(179,179,179,0.5);
    -moz-box-shadow: inset 0 2px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(179,179,179,0.5);
    background-image: linear-gradient(bottom, rgb(233,233,233) 47%, rgb(244,244,244) 87%);
    background-image:...

JavaScript

$(document).ready(function(){
    $('#loginlink').click(function(){
        if($('#loginbox').css('display') == 'none') {
            $('#loginbox').stop().fadeIn('fast',function(){
                $('#loginlink').prop('href','#');
                $('#loginbox').focus();
            });
            $('#loginlink').addClass('selected');
        } else {
            $('#loginbox').blur().stop().fadeOut('fast',function(){
                $('#loginlink').prop('href','#login');
            });
            $('#loginlink').removeClass('selected');
            $('.tooltip').hide();
        }
    });

    if(window.location.hash == '#login') {
        $('#loginbox').css('display','block').focus();
        $('#loginlink').prop('href','#').addClass('selected');
        Cufon.refresh();
    }

    $('#loginbox').blur(function(){
        var art = false;
        $(this).focusin(function(){
            art = true;
        });
        if(!art) {
            $('#loginbox').stop().fadeOut('fast',function(){
                $('#loginlink').prop('href','#login');
                window.location.hash = '#';
            });
            $('#loginlink').removeClass('selected');
            $('.tooltip').hide();
        }
    });
});