JSFiddle - React, Tailwind, and code Playground

by Ryan Pendleton

HTML

<body>
    <div class="nav">
        <div class="nav_container">
            <ul>
                <li><a href="http://www.google.com/">Google</a></li>
            </ul>
        </div>
    </div>
</body>

CSS

.nav
{
    position:fixed;
    top:0px;
    bottom:0px;
    right:0px;
    width:15px;
    background-color:green;
    
    -webkit-transition:all .5s;
    
    padding:0px;
    margin:0px;
}

.nav:hover
{
    width:300px;
}

.nav_container
{
    margin-left:15px;
    margin-top:0px;
    
    background-color:red;
    height:100%;
    width:100%;
}

.nav_container ul
{
    padding-top: 15px;
}

.nav_container li a
{
    color: white;
}