JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<div class="container">
            	
            	<ul class="social">
                	<li class="fadeIn col-md-3 col-sm-3" data-delay="0" ><a href="form/index.php" target="_blank"><i class="fa fa-desktop"></i><p><span>1. Logi end sisse</span></p></a></li>
                	<li class="fadeIn col-md-3 col-sm-3" data-delay="500"><a href="form/index.php" target="_blank"><i class="fa fa-file-text-o"></i><p><span>2. Täida taotlus</span></p></a></li>
                	<li class="fadeIn col-md-3 col-sm-3" data-delay="1000"><a href="form/index.php" target="_blank"><i class="fa fa-check-square-o"></i><p><span>3. Sõlmi leping</span></p></a></li>
                	<li class="fadeIn col-md-3 col-sm-3" data-delay="1500"><a href="form/index.php" target="_blank"><i class="fa fa-thumbs-o-up"></i><p><span>4. Raha kasvab</span></p></a></li>
                </ul>  
          
</div>

CSS

.social {
  left: 32%;
  position: absolute;
  text-align: center;
  top: 20%;
}
.social li{ display:inline-block; padding-right:40px;}
.social li a{ display:block; width:122px; height:122px; border:2px solid #bed431; background-color:transparent; text-align:center; color:#bed431; font-size:70px; border-radius:100%; line-height:110px;}
.social li p span{ display:inline-block; color:#FFF; font-size:14px;  padding-top:35px;font-family: 'Open Sans',sans-serif;}
.social li:nth-child(1) a:hover{ background-color:transparent; color:#f6c715;border:2px solid #f6c715;}
.social li:nth-child(2) a:hover{ background-color:transparent; color:#f6c715;border:2px solid #f6c715;}
.social li:nth-child(3) a:hover{ background-color:transparent; color:#f6c715;border:2px solid #f6c715;}
.social li:nth-child(4) a:hover{ background-color:transparent; color:#f6c715;border:2px solid #f6c715;}
.social li:nth-child(5) a:hover{ background-color:transparent; color:#f6c715;border:2px solid #f6c715;}

JavaScript

$(window).load(function() {
    $('.social li').hide().each(function() {
        var fadeDelay = $(this).data("delay") || 0; 
        $(this).delay(fadeDelay).fadeIn(2000);
   });
});