JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<section class="info">
  <ul class="info__container">
    <li class="info__text">
      <span class="info__number">01</span>
      <a class="info__link" href="#" data-text="Works">
        <span data-text="Works"></span>
      </a>
    </li>
    <li class="info__text">
      <span class="info__number">02</span>
      <a class="info__link" href="#" data-text="About">
        <span data-text="About"></span>
      </a>
    </li>
    <li class="info__text">
      <span class="info__number">03</span>
      <a class="info__link" href="#" data-text="Contact">
        <span data-text="Contact"></span>
      </a>
    </li>
  </ul>
</section>

CSS

.info {
  max-width: 1920px;
  margin: 0 auto;
}

.info__container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  text-decoration: none;
  list-style-type: none;
  font-size: 20px;
  color: #1c1c1c;
  background: #ebebeb;
  margin: 0;
  padding-left: 0;
  height: 150px;
  width: 100%;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.info__container:has(.info__link:hover) .info__link:not(:hover) {
  color: #7a7a7a;
}

.info__text {
  width: 70px;
}

.info__text::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  bottom: 0%;
  transition: all .5s ease;
  background: #1c1c1c;
  z-index: -11;
}

.info__text:has(.info__link:hover)::before {
  top: 0;
  bottom: 0;
}

.info__number {
  font-size: 22px;
  color: #7a7a7a;
  display: inline-block;
}

.info__link {
  text-decoration: none;
  list-style-type: none;
  color: #1c1c1c;
}

.info__link:hover {
  color: white;
}

.info__link::before {
  content: attr(data-text);
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  bottom: 50%;
  font-size: 100px;
  vertical-align: baseline;
  line-height: 150px;
  font-family: "Roobert";
  color: #474747;
  overflow: hidden;
  z-index: -10;
  pointer-events: none;
  transition: all .5s ease;
  text-align: center;
  transform: skewY(45deg);
  transform-origin: 0% 0%;
}

.info__link:hover::before {
  top: 0;
  bottom: 0;
  transform: skewY(0deg);
}

.info__link>SPAN {
  display: block;
  overflow: hidden;
  position: relative;
}

.info__link>SPAN::before {
  content: attr(data-text);
  display: block;
  position: relative;
  transform: translateY(0%);
  transition: all .5s ease;
  transform-origin: 100% 100%;
}

.info__link:hover>SPAN::before {
  transform: translateY(-100%) skewY(45deg);
}

.info__link>SPAN::after {
  content: attr(data-text);
  display: block;
  position: absolute;
  width: 100%;
  top: 100%;
  transition: all .5s ease;
  transform: skewY(45deg);
 ...