JSFiddle - React, Tailwind, and code Playground

by blasteralfred

HTML

<li style="height: 200px">
            <p><a>Div1</a></p>
            <div class="xx">
            <div class="xxx">
            <a style="width: 20px; background-color: #FF3399">1</a>
            <a style="width: 156px; background-color: #996633">2</a>
            <a style="width: 20px; background-color: #CC3399">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;
}
.xx{
    background-color: #FFCC00;
    margin: 2px;
    height: 100%;
}
.xxx{
    background-color: #FF9900;
    display: block;
    width: 196px;
    height: 20px;
    border-top: solid 2px;
    border-bottom: solid 2px;
    margin: 0px
}