JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
            	
            	<div class="yomama">
                    that's right
                     </div>
          
</div>

CSS

.yomama {
  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() {
    $('.yomama').hide().each(function() {
        var fadeDelay = $(this).data("delay") || 0; 
        $(this).delay(fadeDelay).fadeIn(2000);
   });
});