JSFiddle - React, Tailwind, and code Playground

by Persio

HTML

<div class='foo'>
  <div class='biz'></div>
  <div class='bar'></div>
  <div class='biz'>
    <div class='baz'></div>
  </div>  
  <div class='biz'></div>
</div>

CSS

.foo {
    margin: 10px; padding: 10px;
    position: relative;
    width: 600px; height: 200px;
    background-color: #ccc;
}
.bar, .biz {
    margin: 10px; padding: 10px;
    width: 100px; height: 100px;
    content: normal;
    float: left;
}
.baz {
    margin: 10px; padding: 10px;
    width: 50px; height: 50px;
    background-color: #ccc;
    content: normal;
}
.bar {
    background-color: #00f;
}
.biz {
    background-color: #006;
}
.bar:hover ~ div {
    background-color: #f00;
}