JSFiddle - React, Tailwind, and code Playground

by hecker boi

HTML

<h1>
  <span class="text">Hello, World!</span>
</h1>

CSS

h1 {
  overflow: hidden;
}
h1 .text {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  display: inline-block;
  animation: baseline 0.5s forwards cubic-bezier(.4,0,.39,1.04);
}
@keyframes baseline {
  0% { transform: translateY(140%); }
  100% { transform: translateY(0); }
}

/* Just for basic styles */
html {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
body {
  color: white;
  background: #37474f
  ; 
}