JSFiddle - React, Tailwind, and code Playground

HTML

<div class="raw">
		<div class="flip-container"  >
			<div class="flipper">
				<div class="front"> <i class="fa fa-vk">hover me </i>
				</div>
				<div class="back">
					<p>jsfiddle</p>
				</div>
			</div>
		</div>

		<div class="flip-container" >
			<div class="flipper">
				<div class="front"> <i class="fa fa-facebook">hover me </i>
				</div>
				<div class="back">
					<p>facebook</p>
				</div>
			</div>
		</div>

		<div class="flip-container"  >
			<div class="flipper">
				<div class="front">
					<i class="fa fa-codepen">hover me </i>
				</div>
				<div class="back">
					<p>codepen</p>
				</div>
			</div>
		</div>

		<div class="flip-container"  >
			<div class="flipper">
				<div class="front">
					<i class="fa fa-github">hover me </i>
				</div>
				<div class="back">
					<p>github</p>
				</div>
			</div>
		</div>
	</div>

CSS

@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  src: local('Kaushan Script'), local('KaushanScript-Regular'), url(http://fonts.gstatic.com/s/kaushanscript/v4/qx1LSqts-NtiKcLw4N03IO87R-l0-Xx_7cYc0ZX1ifE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  src: local('Kaushan Script'), local('KaushanScript-Regular'), url(http://fonts.gstatic.com/s/kaushanscript/v4/qx1LSqts-NtiKcLw4N03IOCxcENHzeph3q_bnZkaszo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

body {
  background: #333;
}

.raw {
	height: 120px;
	width: 500px;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.flip-container, 
.front, 
.back {
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	font-size: 30px;
	border-radius: 20px;

}

.flip-container {
	float: left;
	margin: 10px;
	-webkit-perspective: 1000;
	perspective: 1000;
}

/* turning on hover */
.flip-container:hover .flipper {
	transform: rotateY(-180deg);
}

.flipper {
	transition: transform .5s ease-in;
	position: relative;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;

}

.front, 
.back {
	backface-visibility: hidden;
	position: absolute;
	left: 0;
	top: 0;
}

.front {
	background: tomato;
	color: white;
	z-index: 2;
	
}

.front .fa {
	display: inline-block;
	font-size: 20px;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}


.back {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.back p {
	font-size: 18px;
	margin-top: 0px;
	font-family: 'Kaushan Script', cursive;
	border: 1px solid white;
	border-radius: 20px;
	background-color: #333;
	color: white;
}