JSFiddle - React, Tailwind, and code Playground

by ShaCP

HTML

<div tabindex="0">
<p>

</p>
</div>

CSS

div {
  height: 40px;
  width: 40px;
  background-color: blue;
}

p {
  position: relative;
  margin: 0;
  height: 150px;
  width: 20px;
  background-color: red;
  z-index: -1;
}

div:focus {
  animation: fade2 1s;
}

@keyframes fade {
  50% {
    color: transparent;
    background-color: transparent;
  }
}

@keyframes fade2 {
  50% {
    opacity: 0;
  }
}