JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menuSquare" class="TheMenuBox" style="overflow: hidden; width: 20px; height: 20px; background-color: rgb(229, 25, 55); opacity: 0.8; padding: 0px;">
    <div class="inner">
    <p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Custom Homes');">Custom Homes</p><p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Full Service Hotels');">Full Service Hotels</p><p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Mixed Use');">Mixed Use</p><p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Office');">Office</p><p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Retail');">Retail</p><p style="text-decoration:none; color:#666; cursor: pointer;    " onclick="changeImg('Select Service Hotels');">Select Service Hotels</p>    </div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#menuSquare, .inner').mouseout(function() {
            theMenu('close');
        });
        
        $('#menuSquare, .inner').mouseover(function() {
            theMenu('open');
        });
    });
</script>

CSS

body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#666;
}
body {
    background-color: #b9b9b9;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}


.TheMenuBox {
    position:absolute; 
    background-color:#e51937; 
    width: 20px; /* 95 */
    display:block; 
    height: 20px; /* 20 */
    top:30px; /* 16 */
    left:260px; 
    opacity:0.80; 
    filter:alpha(opacity=80); 
    z-index:2100; 
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    text-transform:uppercase; 
    text-decoration:none;
    overflow: hidden;
}

.inner {position:absolute;top:20px;left:20px; min-width: 110px;}

JavaScript

function theMenu(what2Do) {
        if (what2Do == 'open') {
            $('#menuSquare').stop().animate({
                width: 190, //95
                height: $('.inner').height(),
                duration:900,
                'padding-top' : 10,
                'padding-right' : 10,
                'padding-bottom' : 10,
                'padding-left' : 10,
                backgroundColor: '#fff',
                opacity: 0.8
            }, 1000,'easeOutCubic')
        } else {
            $('#menuSquare').stop().animate({
                width: "20",
                height: "20",
                padding: '0px',
                backgroundColor: '#e51937',
                opacity: 0.8
            }, 500,'easeInCirc')
        }
    }