JSFiddle - React, Tailwind, and code Playground

by John Crafts

HTML

<div class="equidistant">
    <ul>
        <li>hi</li>
        <li>img</li>
        <li>hi</li>
        <li>img</li>
    </ul>
    <ul>
        <li>hi</li>
        <li>img</li>
        <li>hi</li>
        <li>hi</li>
    </ul>
    <ul>
        <li>hi</li>
        <li>img</li>
        <li>hi</li>
        <li>img</li>
    </ul>
    <ul>
        <li>hi</li>
        <li>img</li>
        <li>hi</li>
        <li>hi</li>
    </ul>
</div>

CSS

div.equidistant {
    width:100%;
    display: table;
    text-align: center;
}
div.equidistant ul {
    display: table-row;
    margin: 0 auto;
}
div.equidistant ul li {
    padding: 10px;
    display: table-cell;
    text-align: center;
    border: 2px solid #000;
}