JSFiddle - React, Tailwind, and code Playground

by Josh Hurlburt

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<ul id="nav_animations">
    <li class="nav_square home_square" id="greenHome"></li>
</ul>
<ul id="navlist">
    <li class="navlistitems" id="home">Home</li>
</ul>

CSS

#nav_animations {
    display:inline;
    position:relative;
    bottom:13px;
}
#greenHome {
    display:none;
}
.nav_square {
    background-color:green;
    width:100px;
    height:15px;
    z-index:22;
    position:relative;
}
#navlist {
    display:inline;
    font-family: 'Dhurjati', sans-serif;
    font-size:45px;
    position:relative;
}
.navlistitems {
    display:inline;
    padding:50px;
    color:black;
}

JavaScript

$(document).ready(function(){
    $('#home').hover(function(){
        $('#greenHome').slideToggle('fast');
    });
});