JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="itemListFull">
<div class="legend cf">
    <span class="legendQty">Qty.</span>
     <span class="legendDesc">Description</span>
     <span class="legendPartNum">Part #</span>
     <span class="legendEa">Per Item</span>
     <span class="legendTotal">Total</span>
</div>    
            <ul class="cf">
                <li class="cf">
                    <span class="itemQty">156</span>
                <span class="itemDesc">156</span>
                <span class="itemPartNum">156</span>
                <span class="itemEa">156</span><span class="itemTotal">156</span>
                <span class="itemRemove">remove</span>
                </li>
            </ul>
    
</div>

CSS

/* For modern browsers */
        .cf:before,
        .cf:after {
            content:"";
            display:table;
        }

        .cf:after {
            clear:both;
        }

        /* For IE 6/7 (trigger hasLayout) */
        .cf {
            *zoom:1;
        }
    


.itemListFull {
    background:red;
    width:100%;
}
.legend {
      -moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
    -webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
    box-shadow:inset 0px 1px 0px 0px #54a3f7;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
    background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
    padding:5px 0;
    border-radius:10px 10px 0 0;
}
.legend span {
    display:inline-block;
    text-align:center;
    border-collapse:collapse;
    border-right:1px solid #333;
}
.legendQty {width:10%;}
.legendDesc {width:42%}
.legendPartNum {width:12%}
.legendEa {width:12%}
.legendTotal {width:12%;}

.itemListFull ul li span {
    display:inline-block;
    text-align:center;
    padding:0;
    border-collapse:collapse;
    border-right:1px solid #333;
    background:blue;
}

.itemListFull ul li {
    width:100%; margin:0;
    padding:0;
}
.itemListFull ul {
    padding:0;
    margin:0;
    width:100%;
    background:yellow;
    display:block;
        padding:5px 0px;
}
.itemQty {width:10%;}
.itemDesc {width:42%}
.itemPartNum {width:12%}
.itemEa {width:12%}
.itemTotal {width:12%;}
.itemRemove {width:%;font-size:80%;float:right}
.itemRemove:hover {color:red;}