JSFiddle - React, Tailwind, and code Playground

HTML

<div class="colors">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

CSS

body
{
    margin: 0;
    padding: 0;
}

.colors
{
    width: 100%;
    height: 100%;
}

.colors ul
{
    margin: 0;
    padding: 0;
}

.colors ul li:nth-child(odd) 
{   
    display: block;
    width: 25%;
    height: 500px;
    background: yellow;
    float: left;
}

.colors ul li:nth-child(even) 
{
    display: block;
    width: 25%;
    height: 500px;
    background: red;
    float: left;
}