JSFiddle - React, Tailwind, and code Playground

by Erik Wegner

HTML

<div class="numTiles">
    <span class="tile completed">
        <span class="num">21</span>
        <span class="title">completed</span>
    </span>
    <span class="tile progress">
        <span class="num">9</span>
        <span class="title">in progress</span>
    </span>
    <span class="tile overdue">
        <span class="num">3</span>
        <span class="title">overdue</span>
    </span>
    <span class="tile total">
        <span class="num">33</span>
        <span class="title">total</span>
    </span>
</div>

CSS

.numTiles .tile {
    width:110px;
    height:110px;
    display:inline-block;
    padding:1ex;
}

.numTiles .tile .num {
    color:white;
    font-family:'Segoe UI Light', 'Segoe UI', Tahoma, Arial, Verdana;
    font-size:400%;
    text-align:center;
    display:block;
    text-shadow:black 0px 0px 8px;
}

.numTiles .tile .title {
    color:white;
    font-family:'Segoe UI Light', 'Segoe UI', Tahoma, Arial, Verdana;
    text-align:right;
    display:block;
    text-align:center;
    text-shadow:black 0px 0px 8px;
}

.numTiles .completed {
    background-color: #366461;
}

.numTiles .progress {
    background-color: #aFaF5C;
}

.numTiles .overdue {
    background-color: #CA0700;
}

.numTiles .total {
    background-color: #4E280B;
}