JSFiddle - React, Tailwind, and code Playground

by gion_13

HTML

<div id="container">
<a href="javascript:;" onclick="$('#example').fadeIn('fast');">FadeIn!</a>

<div class="midbox" id="example" style="display:none;">
    Lorum ipsum<br>
    <br>
    [<a href="javascript:;" onclick="$('#example').fadeOut('fast');">Close</a>]
</div>
</div>

CSS

.midbox{
    display:block;
    position:absolute;
    top:50%;
    left:35%;
    padding: 8px;
}
#container{
    position : relative;
    top : 300px;
    left : 100px;
}