JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<li class="employee">
    <div class="employee_container">
        <div class="front flip">                <h2>Title</h2>
                <h3>Lorem ipsum</h3>
                <p>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</p>
        </div>
            <div class="back flip">
                <img src="http://www.piratealumni.com/s/722/images/editor/headshots/AshleyPerson.jpg" alt="" />
            </div>
        </div>
    </li>

CSS

*{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.employee {
	width:33%;
	float:left;
	display:block;
	padding:0.5em;
	height:20em;
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-ms-perspective: 800px;
	-o-perspective: 800px;
	perspective: 800px;
    border:1px solid red;
}

.employee_container {
    display:block;
	height:100%;
	position:relative;
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.back, .front {
  position: absolute;
	border: 3px solid #cecece;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
    backface-visibility: hidden;
	height:100%;
	width:100%;
}

img {
	height:100%;
	width:100%;
}

.front {
	overflow:hidden;
	background-image: url(img/RD.png);	background-repeat: no-repeat;
	background-position:90% 93%;
	padding:1em;
	background-color:#ecad40;
}

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

.employee:hover .employee_container {
	z-index: 1000;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}

h3 {
	font-weight:normal;
	font-size:0.8em;
}

p {
	font-size:1em;
	padding-top:1em;
	border-top:1px dashed white;
	margin-top:1em;
}