JSFiddle - React, Tailwind, and code Playground

by Shanna Barnard

HTML

<ul>
    <li class="parent">
        <label class="labeltitle">NAME</label>
        <label id="firstTF">100</label>
        <label class="unitlabels">UNIT</label>
    </li>
    <li class="parent">
         <label class="labeltitle">NAME</label>
         <label id="secondTF">200</label>
         <label class="unitlabels">UNIT</label>
    </li>
</ul>

CSS

ul {
     padding: 0;
     list-style-type: none;
      width: 120px;          
}

li  {
    overflow: hidden;
    border-radius: 10px; 
    border:1px solid #000;
}

li label {
    display:block;
    text-align: center;
    font-size: 24px;
    padding:3px 0;
}
li label.labeltitle {
    font-size: 16px;
    color: #CCC;
}
li label.unitlabels {
    font-size: 16px;
    color: white;
}
.parent:nth-of-type(odd) {
   background-color: #555;
}

.parent:nth-of-type(even) {
   background-color: #777;
}