JSFiddle - React, Tailwind, and code Playground

HTML

<div class="one">
    <div> </div>
    <div class="three">1 </div>
    <div class="four"> 2</div>

</div>
<div class="one">
    <div> </div>
    <div class="three">3 </div>
    <div class="four"> 4</div>
</div>
<div class="one">
    <div> </div>
    <div> </div>
</div>

CSS

.three, .four{
    display:block;
    background:Red;
    height:20px; width:20px;
    float;left;
    margin:10px;
}

.one:first-child .four{
    background:green;
}