JSFiddle - React, Tailwind, and code Playground

by Ganesh

HTML

<footer id="ending" class="block-bg move-in-bottom">

      
      <!-- COPYRIGHT NOTE -->
      <div id="copyright">
        Copyright © 20134 GkDreamz Inc  

<div class="footer-right"> 
<a class="tooltip footercontact" href="/contact">
439 N 6th Avenue #115 Tucson, AZ 85705 | Phone: 520 344 4513
<span> Let's get started! </span>
</a>
<span id="reveal-support" class="small_button_footer" style="cursor:pointer;">Support</span>

<div class="fb-like opacitylow fb_iframe_widget" data-href="http://www.facebook.com/pages/GraphicFusion-Design-Inc/36329484440" data-send="false" data-layout="button_count" data-width="60" data-show-faces="false" data-colorscheme="dark" data-font="tahoma" fb-xfbml-state="rendered" fb-iframe-plugin-query="app_id=&amp;color_scheme=dark&amp;font=tahoma&amp;href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FGraphicFusion-Design-Inc%2F36329484440&amp;layout=button_count&amp;locale=en_US&amp;sdk=joey&amp;send=false&amp;show_faces=false&amp;width=60"><span style="vertical-align: bottom; width: 80px; height: 20px;"><iframe name="f6d304368" width="60px" height="1000px" frameborder="0" allowtransparency="true" scrolling="no" title="fb:like Facebook Social Plugin" src="http://www.facebook.com/plugins/like.php?app_id=&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D40%23cb%3Df3b6ca4ab%26domain%3Dgraphicfusiondesign.com%26origin%3Dhttp%253A%252F%252Fgraphicfusiondesign.com%252Ff33e182dfc%26relation%3Dparent.parent&amp;color_scheme=dark&amp;font=tahoma&amp;href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FGraphicFusion-Design-Inc%2F36329484440&amp;layout=button_count&amp;locale=en_US&amp;sdk=joey&amp;send=false&amp;show_faces=false&amp;width=60" style="border: none; visibility: visible; width: 80px; height: 20px;" class=""></iframe></span></div>


<a rel="nofollow" title="Follow us on twitter" class="tooltip tright twitter" href="http://twitter.com/graphicfusion">
  
<div class="icon-twitter footer-icon"></div>

<span>
Follow...

CSS

/* ---- FADE ANIMATIONS ------ */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
	opacity:0;  /* make things invisible upon start */


	-webkit-animation:fadeIn ease-in 1;
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}


.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}

.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}

.fade-in.four {
-webkit-animation-delay:  2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
}

.fade-in.five {
-webkit-animation-delay: 2.5s;
-moz-animation-delay: 2.5s;
animation-delay: 2.5s;
}

.fade-in.six {
-webkit-animation-delay: 0,3s;
-moz-animation-delay: 3s;
animation-delay: 3s;
}

.fade-in.seven {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
animation-delay: 3.5s;
}

.fade-in.eight {
-webkit-animation-delay: 0,4s;
-moz-animation-delay:4s;
animation-delay: 4s;
}
.fade-in.nine {
-webkit-animation-delay: 0, 4.5s;
-moz-animation-delay: 4.5s;
animation-delay: 4.5s;
}
.fade-in.ten {
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
animation-delay: 5s;
}

.fade-in-time600ms {
	-webkit-animation-duration:600ms;
	-moz-animation-duration:600ms;
	animation-duration:600ms;
}

/* -- animation speed ==*/
.fade-in-time1s {
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.fade-in-time2s {
	-webkit-animation-duration:2s;
	-moz-animation-duration:2s;
	animation-duration:2s;
}

/* ---- MOVE IN FROM TOP ------ */
@-webkit-keyframes move-in...