JSFiddle - React, Tailwind, and code Playground

by goldfingerxyz

HTML

<a id="f">Show First content!</a><br/>
<a id="s">Show Second content!!</a>
<hr/>
<div class="a">Default Content</div>
<div class="ab">First content</div>
<div class="abc">Second content</div>

CSS

.abc,.ab {
    display: none;
}
/*show .ab*/
#f:hover ~ .ab {
    display: block;
    
}
/*show .abc*/
#s:hover ~ .abc {
    display: block;
}

#s:hover ~ .a,
#f:hover ~ .a{
    display: none;
}