JSFiddle - React, Tailwind, and code Playground

by Joca Pinto

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=square1>1</div>
<div id=square2>2</div>

CSS

#square1 {
  height:100px;
  width:100px;
  text-align: center;
  background-color: red;
  -webkit-transition: all 0.5s ease;
}

#square2 {
  height:100px;
  width:100px;
  text-align: center;
  background-color: blue;
  -webkit-transition: all 0.5s ease;
}

#square1:hover + #square2 {
  background-color: red;
}

#square2:hover ~ #square1 {
  background-color: blue;
}