JSFiddle - React, Tailwind, and code Playground

by mridulpv

HTML

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

CSS

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