JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <div class="top"></div>
        <div class="bottom">I have 1 line</div>
    </li>
    <li>
        <div class="top"></div>
        <div class="bottom">I have 1 line</div>
    </li>
    <li>
        <div class="top"></div>
        <div class="bottom">I have 1 line</div>
    </li>
    <li>
        <div class="top"></div>
        <div class="bottom">I have 2 lines - im longer!</div>
    </li>
    <li>
        <div class="top"></div>
        <div class="bottom">I have 1 line</div>
    </li>
    <li>
        <div class="top"></div>
        <div class="bottom">I have 1 line</div>
    </li>
    <li>
        <div class="top"></div>
        <div class="bottom">I have 1 line</div>
    </li>
    <li>
        <div class="top"></div>
        <div class="bottom">I have 1 line</div>
    </li>
    <li>
        <div class="top"></div>
        <div class="bottom">I have 1 line</div>
    </li>
    <li>
        <div class="top"></div>
        <div class="bottom">I have 2 lines - im longer!</div>
    </li>
</ul>

CSS

.top {
    height: 130px;
    background: #000;
}

.bottom {
    height: 60px;
    padding: 10px 15px;
    background: #4f1d4e;
}

li {
    display: inline-block;
    width: 166px;
    margin: 20px 10px 0 0;
    float: left;
}