JSFiddle - React, Tailwind, and code Playground

by Narayan Prusty

HTML

<div class="boxes">
    <div class="box1">
        H: 37<br>
        S: 100<br>
        L: 75
    </div>
    <div class="box2">
        H: 37<br>
        S: 59<br>
        L: 26
    </div>
    <div class="box3">
        H: 37<br>
        S: 100<br>
        L: 50
    </div>
    <div class="box4">
        H: 37<br>
        S: 30<br>
        L: 32
    </div>
    <div class="box5">
        H: 37<br>
        S: 61<br>
        L: 46
    </div>
</div>

CSS

.boxes
{
    clear: both;
}

.box3
{
    height: 70px;
    width: 70px;
    float: left;
    background-color: rgba(255, 157, 0, 1);
}

.box1
{
    height: 70px;
    width: 70px;
    float: left;
    background-color: rgba(255, 206, 128, 1);
}

.box2
{
    height: 70px;
    width: 70px;
    float: left;
    background-color: rgba(178, 157, 123, 1);
}

.box4
{
    height: 70px;
    width: 70px;
    float: left;
    background-color: rgba(106, 87, 57, 1);
}

.box5
{
    height: 70px;
    width: 70px;
    float: left;
    background-color: rgba(189, 134, 46, 1);
}