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

$(function(){
    var $loginlink = $('#loginlink'),
        $loginbox = $('#loginbox'),
        $window = $(window);
    
    if (window.location.hash === '#login') {
        $loginbox.show();
        $loginlink.prop('href', '#').addClass('selected');
        Cufon.refresh();
    }
    
    $loginlink.on('click', function() {
        var isHidden = $loginbox.is(':hidden');
        $loginbox.stop()[isHidden ? 'fadeIn' : 'fadeOut']('fast', function() {
            $loginlink.prop('href', isHidden ? '#' : '#login');
        });
        $loginlink.toggleClass('selected', isHidden);
        $('.tooltip').toggle(!isHidden);
        if (isHidden) setTimeout(initClose);
    });

    function initClose() {
        $window.on('click', closeBox);
        $loginbox.on('click', stopPropagation);
    };
    
    function stopPropagation(e) {
        e.stopPropagation();
    };
        
    function closeBox() {
        $window.off('click', closeBox);
        $loginbox.off('click', stopPropagation);
        $loginlink.click();
    };
});