JSFiddle - React, Tailwind, and code Playground

by IceCreamYou

HTML

<div class="a b"></div>
<div class="a"></div>
<div class="a"></div>

CSS

.a {
  background-color: red;
  cursor: pointer;
  height: 60px;
  margin: 10px;
  position: relative;
  width: 60px;
}

.a::after {
  background-color: gray;
  content: "";
  height: 40px;
  left: 40px;
  position: absolute;
  top: 10px;
  transition: background-color 1s, left 1s;
  width: 40px;
  z-index: -1;
}

.b {
  background-color: blue;
}

.a.b::after {
  background-color: green;
  left: 60px;
  transition: background-color 1s, left 1s;
}

JavaScript

document.body.addEventListener('click', function(event) {
	if (event.target.classList.contains('a')) {
  	document.querySelector('.a.b').classList.remove('b');
    event.target.classList.add('b');
  }
});