JSFiddle - React, Tailwind, and code Playground

by chlorine

HTML

<section class="header">

  <a href="#" class="logo text-decoration-none">
    <div class="wrapper">
      <span>T</span>
      <span>R</span>
      <span>A</span>
      <span>V</span>
      <span>E</span>
      <span>L</span>
    </div>
  </a>

</section>

CSS

:root {
  --colorMain: #4784e6;
}

* {
  font-family: "Nunito", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
}

html {
  font-size: 63.5%;
  overflow-x: hidden;
  scroll-padding-top: 6rem;
  scroll-behavior: smooth;
  text-decoration: none;
}


/* header section */

section {
  padding: 5rem 10%;
}

a {
  text-decoration: none;
}

.header span {
  font-size: 3rem;
  background: rgba(255, 255, 255, 0.2);
  color: var(--colorMain);
  border-radius: 0.5rem;
  padding: 0.1rem 0.1rem;
}

.wrapper {
  width: max-content;
  margin-left: 2rem;
  margin-right: 2rem;
}

.wrapper span {
  display: contents;
  -webkit-text-stroke-width: 1.5px;
  text-shadow: 0 0px var(--brShadow), 0 0px var(--tlShadow);
  transform: translate(0, 100%) rotate(2deg);
  -webkit-transform: translate(0, 100%) rotate(2deg);
  -moz-transform: translate(0, 100%) rotate(2deg);
  animation: jump 2s ease-in-out infinite;
  -moz-animation: jump 2s ease-in-out infinite;
  -webkit-animation: jump 2s ease-in-out infinite;
  -o-animation: jump 2s ease-in-out infinite;
  color: var(--colorMain);
}

.wrapper span:nth-child(1) {
  animation-delay: 120ms;
  -moz-animation-delay: 120ms;
  -webkit-animation-delay: 120ms;
  -o-animation-delay: 120ms;
}

.wrapper span:nth-child(2) {
  animation-delay: 240ms;
  -moz-animation-delay: 240ms;
  -webkit-animation-delay: 240ms;
  -o-animation-delay: 240ms;
}

.wrapper span:nth-child(3) {
  animation-delay: 360ms;
  -moz-animation-delay: 360ms;
  -webkit-animation-delay: 360ms;
  -o-animation-delay: 360ms;
}

.wrapper span:nth-child(4) {
  animation-delay: 480ms;
  -moz-animation-delay: 480ms;
  -webkit-animation-delay: 480ms;
  -o-animation-delay: 480ms;
}

.wrapper span:nth-child(5) {
  animation-delay: 600ms;
  -moz-animation-delay: 600ms;
  -webkit-animation-delay: 600ms;
  -o-animation-delay: 600ms;
}

.wrapper span:nth-child(6) {
  animation-delay: 720ms;
  -moz-animation-delay: 720ms;
 ...