JSFiddle - React, Tailwind, and code Playground

HTML

<a class="social" href="" target="_blank">
     <div class="front">
     </div>
     <div class="back">
     </div>
   </a>

CSS

.social {
  float: left;
  width: 100px; 
  height: 100px;    
  position: relative;
     -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -moz-transition: transform .25s ease-out;
    -o-transition: transform .25s ease-out;
    -webkit-transition: transform .25s ease-out;
    transition: transform .25s ease-out;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.social > div {
  width: 100px; height: 100px;
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
.social >.front {
  transform:translateZ(40px);
  width: 100px; 
  height: 100px; 
  background: red;
}
.social >.back {
  background: #3B5998; 
    -moz-transform: rotateY(-100deg) translateZ(40px);
    -ms-transform: rotateY(-100deg) translateZ(40px);
    -o-transform: rotateY(-100deg) translateZ(40px);
    -webkit-transform: rotateY(-100deg) translateZ(40px);
 transform:rotateY(-100deg) translateZ(40px);
   width: 100px; 
    height: 100px; 
   background: black;
}
.social:hover {
  -moz-transform: rotateY(100deg);
    -ms-transform: rotateY(100deg);
    -o-transform: rotateY(100deg);
    -webkit-transform: rotateY(100deg);
    transform: rotateY(100deg);
}