JSFiddle - React, Tailwind, and code Playground

by pashkes

HTML

<div class="container">
  <div class="block"></div>
    <div class="block block--red"></div>
      <div class="block block--blue"></div>
</div>

SCSS

.conteiner {
  width: 100px;
  height: 100px;
}
.block {
  width: 100px;
  height: 100px;
  background-color: grey;
  &--red {
    background-color: red;
  }
  &--blue {
    background-color: blue;
  }
}

JavaScript

$('.container').hover(function () {
	setTimeout(function () {
  	$(this).children(".block:visible").fadeOut().next(".block").fadeIn();
  }, 300);
});