JSFiddle - React, Tailwind, and code Playground

by Sean

HTML

<div class="dashboard">
<div class="item">
    <div class="dashboard-item-top child">
      Classes
    </div>
    <div class="dashboard-item-bottom child">
      <span class="info-block-item">0</span>
    </div>
</div>
</div>

CSS

.dashboard {
    display: flex;
}

.dashboard .item {
    border-radius: .25rem;
    border: 1px solid rgba(0,0,0,.125);
    background: white;
    text-align: center;
    flex-grow: 1;
    margin-right: 20px;
    width: 20%;
    transition: border-color 0.5s ease;
}

.dashboard .item:hover {
    cursor: pointer;
    border: 1px solid #A7A7A7;
}

.dashboard .item:hover > .dashboard-item-top {
    background: #CECECE;
}

.dashboard-item-top {
    border-bottom: 1px solid #dfdfdf;
    padding: 2px;
    font-size: 20px;
    transition: background-color 0.5s ease;
}

.info-block-item {
    font-size: 20px;
}