JSFiddle - React, Tailwind, and code Playground

by ilapawar

HTML

<div id="starfox">
    <ul id="access">
        <li id="listVal">750</li>
        <li id="listVal">100</li>
        <li id="listVal">1111</li>
        <li id="listVal">45678</li>
    </ul>
</div>

CSS

#starfox {
    padding: 0 10px;
    position: absolute;
    top: 5%;
    left: 0;
    z-index: 1001;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #fff;
    color: white;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000),color-stop(0.45, #444),color-stop(0.55, #444),color-stop(1, #000));
    background: -moz-linear-gradient(#000 0%,#444 45%, #444 55%, #000 100%);
    background: -ms-linear-gradient(#000 0%,#444 45%, #444 55%, #000 100%);
    background: -o-linear-gradient(#000 0%,#444 45%, #444 55%, #000 100%);

}   
#access{
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    position: relative;
    z-index: 2;
}

#listVal{
    list-style: none;
    margin: 0;
    padding: 0 5px;
    display: block;
    text-align: center;
    line-height: 40px;
    font-size: 26px;
    text-shadow:0 1px 1px #000;
}