JSFiddle - React, Tailwind, and code Playground

by bazmegakapa

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

<style>
#menu{
    width:200px;
    height:300px;
    position:fixed;
    top:50%;
    margin:-150px 0 0 0;
    background-color: #CCC;
}

/*#menu:hover .content{
    display:block;
}*/

#menu .content{
    width:500px;
    height:300px;
    background-color:#000;
    position:absolute;
    left:200px;
    top:0px;
    display:none;
    text-align:left;
    border-left:1px solid #333;    
    opacity: 0;
}
</style>

<script>
$(function() {
            
        $('#menu').stop(true, true).hover(function () {
$('.content')
    .stop(true, true)
    .show( "clip",{direction: "vertical"}, 800 )
    .animate({ opacity : 1 }, { duration: 800, queue: false });            },
               function() {
$('.content')
    .stop(true, true)
    .hide( "clip",{direction: "vertical"}, 800 )
    .animate({ opacity : 0 }, { duration: 800, queue: false });        });    
});
</script>

</head>

<body>

<div id="menu">
    <div class="content">
    </div>
</div>

</body>
</html>