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'>o</span>
<span class='char-l'>M</span>
<span class='char-hiddenL'>a</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,...