JSFiddle - React, Tailwind, and code Playground

by ilyasnone

HTML

<input type="button" name="show" id="show" class="show" value="Show" onClick="abc();">
<div id="box" style="display:none;">
                    <a href="#" class="close">Close</a>
</div>

CSS

#box{
    width: 200px;
    height: 200px;
    background-color: #666666;
    margin: auto;
    left: 0px;
    right: 0px;
    top: 40px;
}

JavaScript

$('a.close').click(function() { 
        $('#box').hide("scale",
            {percent: 0, direction: 'both', origin: ['top','right']},1000);       
    });

   $('#show').click(function() {
        $('#box').show("scale",
            {percent: 100, direction: 'vertical', origin: ['top','right']},1000);       
    });