JSFiddle - React, Tailwind, and code Playground

by gmdavis62

HTML

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
  <a href="http://www.amazon.com/Unbroken-World-Survival-Resilience-Redemption/dp/1400064163%3FSubscriptionId%3D0FY14YXN76X2KKF2F0G2%26tag%3Dhomeschoolbuzz-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D1400064163"><img src="http://ecx.images-amazon.com/images/I/517gOImApNL._SL160_.jpg" alt="Unbroken: A World War II Story of Survival, Resilience, and Redemption"></a>
		</div>
		<div class="back">
            <div class="link">
  <h4><a href="http://www.amazon.com/Unbroken-World-Survival-Resilience-Redemption/dp/1400064163%3FSubscriptionId%3D0FY14YXN76X2KKF2F0G2%26tag%3Dhomeschoolbuzz-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D1400064163"><span></span>Unbroken: A World War II Story of Survival, Resilience, and Redemption</a></h4>
  <p>Hardcover, Laura Hillenbrand</p>
            </div>
		</div>
	</div>
</div>

CSS

div{outline:1px solid red;}
/*"Create a CSS Flipping Animation" from: http://davidwalsh.name/css-flip*/
/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
	display:inline-block;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		-webkit-transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 160px;
	height: 160px;
}

/* flip speed goes here */
.flipper {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	position: relative;
	text-align: center;
}

/* hide back of pane during swap */
.front, .back {
	-webkit-backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	background-color:#000;
}

/* back, initially hidden pane */
.back {
	-webkit-transform: rotateY(180deg);
	background-color:#FC0;
}
.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
	-webkit-transform: rotateY(180deg);
}
/* "Make a div into a link" from: http://stackoverflow.com/a/3494108/1818828*/
.link{    /*Important:*/
    height:160px;
    width:160px;
    position:relative;
}
.back a span{
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0px;
  z-index: 1;
}