JSFiddle - React, Tailwind, and code Playground

HTML

<div class="app">
        <p> First paragraph </p>
        <p> paragraph between </p>
        <p> Second paragraph </p>
        <p> Third paragraph </p>
    </div>
<p>I am not a sibling :-(</p>

CSS

p:nth-of-type(3):hover + p{
color:red;
}

p:nth-of-type(2):hover ~ p:nth-of-type(4){
color:blue;
}


p:first-of-type:hover ~ p{
color:green;
}