JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="all">
		<div id="page-flip">
			<div id="r1"><div id="p1"><div><div></div></div></div></div>
			<div id="p2"><div></div></div>
			<div id="r3"><div id="p3"><div><div></div></div></div></div>
			<div class="s"><div id="s3"><div id="sp3"></div></div></div>
			<div class="s" id="s4"><div id="s2"><div id="sp2"></div></div></div>
			<a id="coke" href="#" title="Pure CSS Coke Can"></a>
			<a id="meninas" href="#" title="CSS 3D Meninas"></a>
		</div>
</div>

CSS

body {
    padding: 0;
    margin: 0;
}

#all {
    width: 680px;
    margin-left: auto;
    margin-right: auto;
}

#page-flip {
    background-image: url(http://cssdeck.com/uploads/media/items/6/6h4pDpK.jpg);
    position: absolute;
    padding: 40px 40px 40px 340px;
    width: 300px;
    height: 400px;
    overflow: hidden;
}

#r1 {
    position: absolute;
    z-index: 2;
    -webkit-transform-origin: 1315px 500px;
    -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
    -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
    -webkit-transition-duration: 1s;
}

#p1 {
    width: 1285px;
    height: 1388px;
    overflow: hidden;
}

#p1 > div {
    -webkit-transform-origin: 285px 0;
    -webkit-transform: translate(1030px, 500px) rotate(32deg);
    -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
    -webkit-transition-duration: 1s;
    width: 285px;
    height: 388px;
    background-image: url(http://cssdeck.com/uploads/media/items/8/87WOlJH.jpg);
}

#p1 > div > div {
    width: 10px;
    height: 388px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));
}

#p2 > div {
    width: 285px;
    height: 388px;
    -webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
    position: absolute;
    z-index: 1;
    background-image: url(http://cssdeck.com/uploads/media/items/4/4FpEEbu.jpg);
}

#r3 {
    -webkit-transform-origin: 1315px 500px;
    -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
    -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
    -webkit-transition-duration: 1s;
    position: absolute;
    z-index: 2;
}

#s3 {
    -webkit-transform-origin: 70px 500px;
    -webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
    -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
    -webkit-transition-duration: 1s;
    position: absolute;
    z-index: 1;
}

#page-flip:hover...