JSFiddle - React, Tailwind, and code Playground

HTML

<li style="height: 200px">
            <p><a>Div1</a></p>
            <div class="menuscroll">
            <div class="menucat">
            <a style="width: 20%; background-color: #FF3399;float:left;">1</a>
            <a style="width: 60%; background-color: #996633;float:left;">2</a>
            <a style="width: 20%; background-color: #CC3399;float:left;">3</a>
            </div>
            </div>
        </li>

CSS

li{
    width:200px;
    height:32px;
    border-top: solid 4px #7D7D7D;
    border-bottom: solid 4px #666666;
    color:#191919;
    text-align:center;
    overflow:hidden;
    display: block;
    float: left;
    background-color: #666666;
}
p{
    padding:0px 5px;
}
.subtext{
    padding-top:15px;
}
.menuscroll{
    background-color: #FFCC00;
    margin: 2px;
    height: 100%;
}
.menucat{
    background-color: #FF9900;
    display: block;
    width: 196px;
    height: 20px;
    border-top: solid 2px;
    border-bottom: solid 2px;
    margin: 0px
}
a
{
    display:inline-block;
}