JSFiddle - React, Tailwind, and code Playground

HTML

<div class="home">   
    <span>blah</span>   
    <p>first</p>   
    <p class="red">second</p>
    <p>second and halfth</p>
    <p class="red">third</p>   
    <p class="red">fourth</p> 
</div>
<p></p>
<div class="home">  
    <span class="red">blah</span>   
    <p>first</p>   
    <p>second</p>   
    <p>third</p>   
    <p>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(1){ background-color:yellow }