JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="body">
  <div class="word" style="animation-delay: .1s;">l</div>
  <div class="word" style="animation-delay: .3s;">u</div>
  <div class="word" style="animation-delay: .2s;">k</div>
  <div class="word" style="animation-delay: .4s;">a</div>
  <div class="word" style="animation-delay: .1s;"> </div>
  <div class="word" style="animation-delay: .0s;">k</div>
  <div class="word" style="animation-delay: .1s;">u</div>
  <div class="word" style="animation-delay: .3s;">p</div>
  <div class="word" style="animation-delay: .2s;">u</div>
  <div class="word" style="animation-delay: .4s;">n</div>
  <div class="word" style="animation-delay: .1s;">i</div>
  <div class="word" style="animation-delay: .0s;">a</div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Aleo');
body {
  margin: 0;
  background: black;
  overflow-x: hidden;
}
* {
  box-sizing: border-box;
  font-family: 'Aleo', serif;
  color: white;
}
div.body {
  position: relative;
  left: 50%;
  display: inline-block;
  transform: translateX(-50%);
  margin: 50px 0;
}
div.word {
  display: inline-block;
  font-size: 30px;
  text-transform: uppercase;
  transform: translateX(-200px);
  opacity: 0;
  /* border: 1px solid black; */
  /* background: black; */
  animation:  a cubic-bezier(0.79, 0.25, 0.38, 1.2)  1s forwards;
}



@keyframes a {
  100% {
    transform: translateX(0px) rotateY(-360deg);
    opacity: 1;
  }
}
@keyframes b {
  100% {
    transform: rotateX(100deg);
    
  }
}