JSFiddle - React, Tailwind, and code Playground

by ShaCP

HTML

<div tabindex="0" class="container">
  <p></p>
</div>

CSS

div {
  position: relative; /* Ensure the div creates a stacking context */
  height: 40px;
  width: 40px;
  background-color: blue;
}

p {
  position: absolute; /* Position the p element absolutely within the div */
  top: 0;
  left: 0;
  margin: 0;
  height: 150px;
  width: 20px;
  background-color: red;
  z-index: -1; /* Ensure it stays behind the div */
  opacity: 1; /* Explicitly set opacity */
}

div:focus {
  animation: fade2 1s;
}

@keyframes fade2 {
  50% {
    opacity: 0; /* Animate opacity */
  }
}