JSFiddle - React, Tailwind, and code Playground

by Lucas Silva

HTML

<div class="hover-container">
  <div class="child1"><div>
  <div class="child2"><div>
</div>

CSS

.hover-container {
  width: 100%;
  height: 120px;
  background: #191d20;
  display: inline-block;
}

.child1 {
  width: 20px;
  height: 80px;
  background: #197117;
  margin: 20px;
  transition: all .5s ease-out;
}

.child2 {
  width: 20px;
  height: 80px;
  background: rgb(246,131,32);
  margin: 20px;
  transition: all .5s ease-out;
}

.hover-container:hover .child1 {
  background: rgb(246,131,32);
}

.hover-container:hover .child2 {
  background: #197117;
}