JSFiddle - React, Tailwind, and code Playground

by Kate Masiuk

HTML

<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>

CSS

body {background: #17140E;}
div {
    width: 35px;
    height: 181px;
    display: inline-block;
    background: repeating-linear-gradient(to bottom, transparent, transparent 17px, #17140E 17px, #17140E 20px), 
                linear-gradient(to bottom, #DAAA00, #DA7400);
    margin-left: 5px;
    border-radius: 5px 5px 0 0;
    vertical-align: bottom;
}

div:nth-of-type(1){height: 100px;}
div:nth-of-type(2){height: 40px;}
div:nth-of-type(3){height: 160px;}
div:nth-of-type(4){height: 200px;}
div:nth-of-type(5){height: 100px;}
div:nth-of-type(6){height: 40px;}