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;
    padding: .5em;
    margin: .5em 2%;
    background: #efefef;
    min-height: 10em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 16%;
}
.g2g-process li < ul {
    background: none;
}
.g2g-process.steps-4 ul li {
    width: 100%;
}
.g2g-process.steps-4 li {
    width: 21%;
    margin: 2%;
}