JSFiddle - React, Tailwind, and code Playground

by Silambarasan_sundaram

HTML

<img id="login-trigger" src="http://www.jointcommission.org/assets/1/6/button-login.jpg" />
<div id="login-box">
    <p>Login now:</p>
    Username : <input />
    <br />
    Password : <input />
</div>

CSS

img {height: 50px;}

#login-box {border: 3px solid #000; color: #fff; width: 300px; height: 100px; background: grey; display: none;}

JavaScript

$('#login-trigger, #login-box').on({
    mouseenter: function(e) {
        if (e.target.id == 'login-trigger') $('#login-box').slideDown('slow');
        clearTimeout( $('#login-box').data('timer') );
    },
    mouseleave: function() {
        $('#login-box').data('timer', 
            setTimeout(function() {
                $('#login-box').slideUp('slow')
            }, 300)
        );
    }
});