JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div id="divQueues">
    <div class="divQue">
        <div class="divQT">My Queue</div>
        <div class="divQC">67</div>
    </div>

    <div class="divQue">
        <div class="divQT">My Teams</div>
        <div class="divQC">93</div>
    </div>

    <div class="divQue">
        <div class="divQT">Unassigned</div>
        <div class="divQC">93</div>
    </div>

    <div class="divQue">
        <div class="divQT">OverDue - My Teams</div>
        <div class="divQC">93</div>
    </div>
</div>

CSS

#divQueues {

    }
    .divQue {
        float: left;
        margin: 2px;
        height: 120px;
        width: 120px;
        background-color: blue;
        display:flex;
        flex-direction: column;
        justify-content: space-between;

    }
    .divQue .divQT {
        color: #ffffff;
        font-size: 18px;
        width: 100%;
        margin-top: 10px;
    }
    .divQC {
        color: #ffffff;
        font-size: 28px;
        width: 120px;
        height: 30px;
        text-align: center;
        left: 0;
        right: 0;
        position:relative;
        bottom: 10px;
    }