JSFiddle - React, Tailwind, and code Playground

by oscbco

HTML

<div class="home">   
    <span>blah</span>   
    <p>first</p>   
    <p class="red">second</p>   
    <p class="red">third</p>   
    <p class="red">fourth</p> 
</div>
<p></p>
<div class="home">  
    <span class="red">blah</span>   
    <p class="red">first</p>   
    <p class="red">second</p>   
    <p class="red">third</p>   
    <p class="red">fourth</p> 
</div>

CSS

.home > * {width:100px; height:100px; background-color:blue}

.red:first-child, :not(.red) + .red {border:5px solid red;}

.red:nth-of-type(2){ background-color:yellow } 
.red:last-child