JSFiddle - React, Tailwind, and code Playground

by Erik Woods

HTML

<div class="css-transition-fun-1">
  Hover over me. Observe instant flip of colors.
</div>

<div class="css-transition-fun-2">
  Hover over me. Observe transition between flip of colors.
</div>

CSS

body {
  margin: 0;
}

.css-transition-fun-1,
.css-transition-fun-2 {
  background: #f00;
  color: #fff;
  cursor: pointer;
  margin-bottom: 10px;
  padding: 20px;
  text-align: center;
  width: 100%;
}

.css-transition-fun-2 {
  transition: background 2s linear;
}

.css-transition-fun-1:hover,
.css-transition-fun-2:hover {
  background: #00f;
}