JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

CSS

* {
    margin:0;
    padding:0;
}
div.wrapper{
    width:100%;
    position:relative;
}
ul {
    position:relative;
    width:100%;
}
ul li {
    width:20%;
    float:left;
    padding:2.5%;
    background:#CCC;
    list-style:none;
    text-align:center;
}