JSFiddle - React, Tailwind, and code Playground

by ASHISH ROX

HTML

<h1> Social Icon </h1>
<!-- Social Icons Start !-->

<div class="socialw fadeInDown">  
  
	<!-- Dribbble !-->
  <a href="http://dribbble.com/ryanbishop" target="_blank">		
    <div class="social first"> <img src="http://i.imgur.com/64r2jAv.png"/></div>
	</a>
	<!-- Dribbble !-->

	<!-- Behance !-->
	<a href="http://behance.com/ryanbishop" target="_blank">		
    <div class="social"> <img src="http://i.imgur.com/fkuhUov.png"/></div>
	</a>
	<!-- Behance !-->

	<!-- Facebook !-->
	<a href="http://facebook.com/abletroner" target="_blank">		
    <div class="social"><img src="http://i.imgur.com/PY2EPRW.png"/></div>
	</a>
	<!-- Facebook !-->

	<!-- Twitter !-->
	<a href="http://twitter.com/abletroner" target="_blank">		
    <div class="social"> <img src="http://i.imgur.com/ny0pyqt.png"/> </div>
	</a>
	<!-- Twitter !-->

	<!-- Intagram !-->
	<a href="http://instagram.com/abletroner" target="_blank">		
    <div class="social"> <img src="http://i.imgur.com/tZZG2zQ.png"/></div>
	</a>
	<!-- Instagram !-->

	</div>

<!-- Social Icons End !-->

CSS

body {
	background-color: #151515;
  background-image: url('http://i.imgur.com/Peh8nQN.png');
	background-repeat: repeat;
}

.socialw {
	width: 235px;
	margin: 100px auto 0 auto;
	overflow: auto;
	height: 100%;
}

.social{
  position:relative;
	border: 1px solid #292929;
	width: 37px;
	height: 62px;
	float: left;
	margin-left: 10px;
	overflow: hidden;
}

.first {
	margin-left: 0px;
}

/*    ANIMATIONS   */

/* Fade In Down */
@-webkit-keyframes fadeInDown {
	0% {  opacity: 0;  -webkit-transform: translateY(-100px);  }	
	100% {  opacity: 1;  -webkit-transform: translateY(0);	}
}

@-moz-keyframes fadeInDown {
	0% {  opacity: 0;  -moz-transform: translateY(-100px);	}	
	100% {  opacity: 1;  -moz-transform: translateY(0);  }
}

@-o-keyframes fadeInDown {
	0% {  opacity: 0;  -o-transform: translateY(-100px);	}	
	100% {  opacity: 1;  -o-transform: translateY(0);  }
}

@keyframes fadeInDown {
	0% {  opacity: 0;  transform: translateY(-100px);	}	
	100% {  opacity: 1;  transform: translateY(0);	}
}

.fadeInDown {
	-webkit-animation: fadeInDown 1s both 0.5s;
	-moz-animation: fadeInDown 1s both 0.5s;
	-o-animation: fadeInDown 1s both 0.5s;
	animation: fadeInDown 1s both 0.5s;
}
/* Fade In Down */

/* Social Transition */

.social img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top 250ms ease-in;
-moz-transition: margin-top 250ms ease-in;
-o-transition:  margin-top 250ms ease-in;
transition:  margin-top 250ms ease-in;
}
.social:hover img{
margin-top:-62px;
}