JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<link href="http://fonts.googleapis.com/css?family=Dosis:200,400,700" rel="stylesheet" type="text/css">
<div class="elements">we just reinvented kougiland. Again ...</div>
<div class="elements">introducing the all new,</div>
<div class="elements">reimagined kouiland website</div>
<div class="elements"><div class="bubble1"></div>have a look now!</div>

CSS

.elements {width:50%;
    color: slategrey;
font-weight: 900;
text-align: center;
font-size: 24px;
    font-family: 'Dosis', Arial, sans-serif;
  height:200px;
    background:#ccc;
    opacity:0;
    float:left;
    -webkit-transition:opacity 1s;
    -moz-transition:opacity 1s;
    -ms-transition:opacity 1s;
    -o-transition:opacity 1s;    
    transition:opacity 1s;    
}






.bubble1:before{
    position:absolute;
content:'';
    color:white;
    text-align:center;
    font-weight:900;
    font-size:50px;
left:10px;
top:10px;
    width:60px;
    height:60px;
    background:url(http://thinkdesignblog.com/wp-content/uploads/image/12-burcu-vector.jpg);
 background-size:100%;
    
    border-radius:100%;   
   
}
.bubble1:after{
    position:absolute;
content:'';
    bottom:-9px;
    left:30px;
width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #FF4C48;
}
.bubble1{
position:relative;
width:80px;
height:80px; 
border-radius:100%;    
background: -khtml-linear-gradient(45deg, 
#F06, 
yellow);
background: -webkit-linear-gradient(45deg, 
#F06, 
yellow);
background: -moz-linear-gradient(45deg, 
#F06, 
yellow);
background: -ms-linear-gradient(45deg, 
#F06, 
yellow);
background: -o-linear-gradient(45deg, 
#F06, 
yellow);
background: linear-gradient(45deg, 
#F06, 
yellow);
}

JavaScript

function fadeInPlaylist(elem) {
    elem.css('opacity',1);
}

$(function() {
   $('.elements').each(function(i, fade) {
       setTimeout(function(){fadeInPlaylist($(fade));},200*i);
   });
});