JSFiddle - React, Tailwind, and code Playground

by acodesmith

HTML

<div class="t">
    <em>W</em>
    <strong>ideOpenTech</strong>
</div>

CSS

div.t {
    height:100px;
    background:#BCD436;
    min-width:100px; 
    display:block;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color:#fff;
    font-size:80px;
    font-family:sans;
    text-align:center;
    
    float:left;
}
div.t em {
 float:left;  
  padding:0 0 8px 10px;
}
div.t strong {
   display:none;  
   font-size:14px; 
   margin:0 10px 0 -10px;
}

JavaScript

$(document).ready(function(){
    $(".t em").delay(500).animate({
        marginLeft: "+=100px"
    }, 1500, function(){
        $(".t strong").delay(500).animate({
            width: "toggle",
            opacity: 1
        }, 10000);  
    }).animate({
                marginLeft: "-=100px" 
            }, 800);
});