JSFiddle - React, Tailwind, and code Playground

by Arjun Singh

HTML

<div class="wrapper">
  <h2>
    Hello
  </h2>
  <h2 class="copy">
    Hello
  </h2>
  <h2 class="copy">
    Hello
  </h2>
  <h2 class="copy">
    Hello
  </h2>
</div>

SCSS

body{
  background-color: black;
}

@use "sass:math";

@function pow($number, $exponent) {
  $value: 1;

  @if $exponent > 0 {
    @for $i from 1 through $exponent {
      $value: $value * $number;
    }
  }

  @return $value;
}

$green: #16d97e;

.wrapper{
  /* Positioning */
  position: relative;
  width: fit-content;
  transform: rotate(-45deg);
}

.wrapper h2{  
  /* Display and Box Model */
  display: inline-block;
  
  /* Others */
  cursor: pointer;
  font-family: Helvetica;
  font-size: 36px;
  font-style: italic;
  font-weight: bold;
  margin: 0;
  color: $green;
  -webkit-text-stroke: black 1px;
}

h2.copy{
  /* Positioning */
  position: absolute;
  top: 0;
  left: 0;
  
  /* Others */
  color: $green;
}

@for $i from 2 through 4{
  h2.copy:nth-of-type(#{$i}){
    transition: 0.25s cubic-bezier(0.68, -0.6, 0.32, 1.6) all;
    z-index: - $i;
  }
  
  .wrapper:hover h2.copy:nth-of-type(#{$i}){
    transform: translateY(pow(0.6 * ($i - 1), 2) * 95%);
    opacity: 1 - $i * 0.20;
    -webkit-text-stroke: $green 1px;
  }
  
  .wrapper:hover h2.copy:nth-of-type(even){
    color: rgba(0, 0, 0, 0);
  }
}