JSFiddle - React, Tailwind, and code Playground

by mitchbregs

HTML

<html>
    <body>
        <button class="show">Show</button>
        <div id="box">
            hi
        </div>
    </body>
</html>

CSS

body{
    width: 100%;
    height: 100%; 
}
#box{
    width: 200px;
    height: 300px;
    background-color: yellow;
}

JavaScript

$("#box").hide();
$(".show").click(function(){
    $("#box").slideDown();
});

var mouse_is_inside = false;

            $(document).ready(function(){

                $('#box').hover(function(){ 
                    mouse_is_inside=true; 
                }, function(){ 
                    mouse_is_inside=false; 
                });
                $("body").mouseup(function(){ 
                    if(! mouse_is_inside) $('#box').slideUp();
                });
            });