JSFiddle - React, Tailwind, and code Playground

by Maz Soma

HTML

<header class='header' id='header' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<a href='http://www.dhf.web.id/' id='header-logo' itemprop='url'>
<span aria-hidden='true' class='accessible-hidden' itemprop='name'></span>
<span class='char-d'>S</span>
<span class='char-hiddenD'>om</span>
<span class='char-l'>A</span>
<span class='char-hiddenL'>zing</span>
<span class='char-symb'>
<span></span>
  <span class="trip"></span>
  <span class="trap"></span>
</span>  
</a><p class='description' itemprop='description'><span>Seekor nyamuk nakal yang tak akan pernah berhenti menyebarkan wabah.!</span></p></header>

CSS

body {background:#333;padding:20% 100px ;}
#header-wrapper {
  background-color: #333;
  color: white;
  margin-bottom: 1%;
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -ms-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  transition: all .5s ease-out;
  padding: 8px 15px 18px;
}

#header {margin: 0;}
#header a,#header a:visited {color: white;}

#header .description {
  font: normal normal 100%/1.5em Alike,Georgia,"URW Bookman L",Serif;
  color: #999;
  padding: 5px 30px 0;
  margin: 0 0;
}

#header-logo {
  display:block;
  width:107px;
  height:35px;
  margin:25px 30px -10px;
  position:relative;
}

#header-logo span {
  display:block;
  float:left;
  height:10px;
  font:normal 0/0 a;
}

#header-logo .char-d,
#header-logo .char-l {
  text-shadow:0 1px 0 #fff,0 2px 0 #ddd,0 3px 0 #ccc,0 4px 0 #bbb,0 5px 0 #aaa,0 6px 0 #999,0 7px 0 #888,0 8px 0 #777,0 9px 0 #666,0 10px 0 #555,0 11px 5px rgba(0,0,0,0.4),0 15px 15px rgba(0,0,0,0.4);
  color:#eee;
  font-size:41px;
  -webkit-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -ms-transition:all 1s ease-in-out;
  -o-transition:all 1s ease-in-out;
  transition:all 1s ease-in-out;
}

#header-logo .char-hiddenD {
  font-size:41px;
  color:#eee;
  width:0;
  opacity:0;
  -webkit-transition:width 0.5s 0.5s ease-in-out,opacity 0.5s 0.5s ease-out;
  -moz-transition:width 0.5s 0.5s ease-in-out,opacity 0.5s 0.5s ease-out;
  -ms-transition:width 0.5s 0.5s ease-in-out,opacity 0.5s 0.5s ease-out;
  -o-transition:width 0.5s 0.5s ease-in-out,opacity 0.5s 0.5s ease-out;
  transition:width 0.5s 0.5s ease-in-out,opacity 0.5s 0.5s ease-out;
  text-shadow:0 1px 0 #fff,0 2px 0 #ddd,0 3px 0 #ccc,0 4px 0 #bbb,0 5px 0 #aaa,0 6px 0 #999,0 7px 0 #888,0 8px 0 #777,0 9px 0 #666,0 10px 0 #555,0 11px 5px rgba(0,0,0,0.4),0 15px 15px rgba(0,0,0,0.4);
}

#header-logo:hover .char-hiddenD {
  width:52px;
  opacity:1;
  -webkit-transition:width 0.6s 0.5s ease-in-out,opacity 0.3s...