JSFiddle - React, Tailwind, and code Playground

by Kate Masiuk

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul>
    <li></li>
    <li></li>
</ul>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

body {background: #17140E;}
ul {display: inline-block;background: linear-gradient(to bottom, #DAAA00, #DA7400);padding: 0;border-radius: 12px 12px 0 0;}
li {list-style: none;width: 39px;height: 20px;border: 2px solid #17140E;}
ul li:first-child {border-radius: 10px 10px 0 0;}