JSFiddle - React, Tailwind, and code Playground

by kevinPHPkevin

HTML

<a href="#" class="one">link 1</a>
<a href="#" class="two">link 2</a>
<a href="#" class="three">link 3</a>
<div id="body"></div>

CSS

#body {
    width: 150px;
    height: 150px;
    background: #ccc;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    position: absolute;
     -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
    z-index:-1;
}
a  {
    z-index:1;
}
a.one:hover ~ #body {
    background: blue;
}
a.two:hover ~ #body {
    background: red;
}
a.three:hover ~ #body {
    background: yellow;
}