JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<a id="link1" href="url1">Link1</a>
<a id="link2" href="url2">Link2</a>
<a id="link3" href="url2">Link3</a>
<div class="hovgroup3" id="hovele1">
Hoverelement 1
</div>
<div class="hovgroup2 hovgroup3" id="hovele21">
Hoverelement 2.1
</div>
<div class="hovgroup2 hovgroup3" id="hovele21">
Hoverelement 2.2
</div>
<div class="hovgroup3" id="hovele3">
Hoverelement 3
</div>

CSS

div {
  display: none;
}
#link1:hover ~ #hovele1 {
    display: block;
}
#link2:hover ~ .hovgroup2 {
    display: block;
}
#link3:hover ~ .hovgroup3 {
    display: block;
}