JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flip-container" ontouchstart="this.classList.toggle('focus');">
  <div class="flipper">
    <div class="front-brian">
    </div>
    <div class="back">
      <div class="centerize">
        <div class="socicon-style">
          <a href="imdb.com">
            <span class="socicon-imdb">
		</span>
          </a>
        </div>
        <div class="back-title">Brian Perry</div>
        <div class="role">CEO</div>
      </div>
    </div>
  </div>

CSS

.back {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
	transform: rotateY(180deg);
    
	background: #bd2d2c;
}







.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;

	
}




.flip-container:hover .flipper,  
  .flip-container.hover .flipper {
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}








.flip-container, .front-brian, .front-tony, .front-blaine, .front-alex, .front-eric, .front-sue, .front-tamara, .front-kenyon, .front-dom, .front-lt, .front-lindsey, .front-chris, .front-ethan, .back {
  width:6000px;
  min-height:100%; 
  max-width:100%;
  max-height: 10000px;
   height:0;
   padding-bottom: 70%;
  
}

.flipper {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;

	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;
  
  -o-transition: 0.6s;
	-o-transform-style: preserve-3d;

	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

.front-brian, .front-tony, .front-blaine, .front-alex, .front-eric, .front-sue, .front-tamara, .front-kenyon, .front-dom, .front-lt, .front-lindsey, .front-chris, .front-ethan, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 100;
}







.front-brian{
	background: url(http://static1.squarespace.com/static/573e762945bf219b6da541d1/t/57a5d191e3df28ea3c3f9bfb/1470484886737/Brian+Headshots-29.jpg);
   
  	background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}


.back-title {
	color: #fff;
    font-size: 2em;
	position: absolute;
	top: 14%;
	left: 0%;
	right: 0%;
	text-align: center;
}

.role {
	color: #fff;
    font-size: 1.5em;
	position: absolute;
	top: 30%;
	left: 0%;
	right: 0%;
	text-align:...