JSFiddle - React, Tailwind, and code Playground

by irama

HTML

<ol class="g2g-process steps-4">
    <li>Step 1 use <a href="https://www.google.com/">Google</a></li>
    <li>Step 2 call Ghostbusters</li>
    <li><ul>
        <li>If this, then that</li>
        <li>If not this, then panic</li>
    </ul></li>
    <li>All good, evil spirit banished</li>
</ol>

CSS

.g2g-process {
    float: left;
    clear: left;
    overflow: hidden;
    width: 100%;
}
.g2g-process,
.g2g-process ul,
.g2g-process li {
    list-style-type: none;
    margin: 0; padding: 0;
}

.g2g-process li {
    float: left;
    margin: .5em;
    padding: .5em;
    background: #efefef;
    min-height: 10em;
    box-sizing: border-box;
    width: 20%;
}

.g2g-process.steps-4 li {
    width: 25%;
}