JSFiddle - React, Tailwind, and code Playground

by S1l3

HTML

<div class="sliderContainer">
    <span class="quit hide">quit</span> smoking +
  
    <span class="extraMarkup">
        <span class="time">time</span>
        <span class="screening hide">screening</span>
    </span>   
    =     &nbsp;can
    <span class="extraMarkup_2">
        <span class="cer">cer</span>
           <span class="tp2">2</span>
        <span class="survive hide">survive</span>
    </span>   
</div>

CSS

.hide{
    display:none;
    opacity:0;
}

.sliderContainer{
    position:relative;
    width:700px;
    height:150px;

    background:#333031;
   
    border:7px solid #D8AF96;
    -moz-box-shadow:inset 0 0 20px 5px #000;
    -webkit-box-shadow:inset 0 0 20px 5px #000;
    box-shadow:inset 0 0 20px 5px #000;
    
    color:#fff;  
    text-align:center;
    line-height:150px;
    font-size:2em;
    
    overflow:hidden;
}
.extraMarkup{
    min-width:150px;
    height:40px;
    
    position:relative;
      display:inline-block;
      
    top:13px;
   
}
.quit{
    position:relative;
    
    top:50px;  
    
    color:#E86A58;  
}
.screening{
    position:absolute;
    
    color:#E86A58;  
    
    top:100px;    
    left:10%;
}
.time{
    
    top:-58px;    
    left:30%;
    
    position:absolute;
   
    
}
.extraMarkup_2{
    min-width:150px;
    height:40px;
    
    position:relative;
      display:inline-block;
      
    top:13px;
    left:-7px;
}
.cer{
    
    top:-59px;    
    left:0;
    
    position:absolute;
   
    
}
.survive{
    color:#E86A58; 
     
    top:158px;    
    left:5px;
    
    position:absolute;
   
    
}
.tp2{
    vertical-align:super;
    font-size:0.6em;
    
    position:absolute;
    
    top:-70px;
    left:40px;
}

JavaScript

var quit= $('.quit');
    time= $('.time'),
    screening= $('.screening'),
    cer= $('.cer'),
    survive = $('.survive'),
    tp2= $('.tp2'),
    hide = $('.hide '),
    duration = 2000;


quit.show().animate({opacity:'1','top':'0px'},duration ,function()
{
    time.animate({opacity:'0','top':'-150px'},duration );
    screening.show().animate({opacity:'1','top':'-59px'},duration ,function()
    {
            cer.animate({opacity:'0','top':'-150px'},duration );    
            tp2.animate({'left':'105px'},duration );            
            survive.show().animate({opacity:'1','top':'-59px'},duration );    
        
    });
    
    
});