JSFiddle - React, Tailwind, and code Playground

by edwardsharp

HTML

<div id="navbar-header">
  <small id="sched-beta"><i>beta</i></small>
  <a class="navbar-brand" href="/">Sched</a>

</div>

CSS

#sched-beta{
  float:left;
  margin-top: 25px;
  position: relative;
  left: 56px;
}

#sched-beta {
  -webkit-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: perspective(350px) rotateX(-90deg);
  -o-transform: perspective(350px) rotateX(-90deg);
  transform: perspective(350px) rotateX(-90deg);
 }


.loaded #sched-beta {
  -webkit-transform: perspective(350px) rotateX(0deg);
  -o-transform: perspective(350px) rotateX(0deg);
  transform: perspective(350px) rotateX(0deg);
  -webkit-transition:0.5s linear 0.5s;
  -o-transition:0.5s linear 0.5s;
  transition:0.5s linear 0.5s;   
}

JavaScript

$('body').addClass('loaded')