JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<div class="text-container">
  <span class="text top">Top Text</span>
  <span class="text bottom">Bottom Text (hidden)</span>
</div>

CSS

.text-container {
  position: relative; /* Needed for positioning child elements */
  cursor: pointer; /* Change cursor to indicate clickability */
}

.text {
  position: absolute;
  top: 0; /* Align texts to the top */
  width: 100%; /* Ensure text fills container width */
  transition: transform 0.2s ease-in-out; /* Smooth transition */
}

.text.top {
  transform: translateY(0); /* Start top text at top position */
}

.text.bottom {
  transform: translateY(100%); /* Hide bottom text initially by moving it downwards */
}

.text-container:active .text.top {
  transform: translateY(-100%); /* Move top text down on click */
}

.text-container:active .text.bottom {
  transform: translateY(0); /* Reveal bottom text on click */
}