JSFiddle - React, Tailwind, and code Playground

by dimshik

HTML

<div class="bg-phone"></div>
<div class="phone">

<div class="banner" style="margin-top:60px;">
	<div class="cube-wrap vertical">
		<div class="cube depth">
			<div class="front-pane">front</div>
			<div class="back-pane">back</div>
			<div class="top-pane">top</div>
			<div class="bottom-pane">bottom</div>
			<!--<div class="left-pane">left</div>-->
			<!--<div class="right-pane">right</div>-->
		</div>
	</div>
	</div>
</div>

CSS

.cube-wrap {
    perspective: 400px;
    /*perspective-origin: 50% 50px;*/
}

.cube {
    position: relative;
    width: 320px;
    margin: 0 auto;
    transform-style: preserve-3d;
    /*animation: cube-spin 5s infinite linear;*/
}

.cube-wrap.vertical .cube {
    transform-origin: 0 25px;
    animation: spin-vertical 6s infinite linear;
}
.cube div {
    position: absolute;
    width: 320px;
    height: 50px;
    /*background: rgba(255,255,255,0.1);
    box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
    font-size: 20px;*/
    text-indent:-9999px;
    background-image:url('http://cdn.adnxs.com/p/be/b3/51/b8/beb351b8a7487a3e7277f6a94845a54e.jpg');
    text-align: center;
    /*line-height: 200px;*/
    color: rgba(0,0,0,0.5);
    font-family: sans-serif;
    text-transform: uppercase;
}


@keyframes spin-vertical {

    0% {transform: rotateX(0);}
    25% {transform: rotateX(-90deg);}
    50% {transform: rotateX(-180deg);}
    75% {transform: rotateX(-270deg);}
    100% {transform: rotateX(-360deg);}
    
}

.depth div.front-pane {
    transform: translateZ(25px);/
}
.cube-wrap.vertical .depth div.back-pane {
    transform: translateZ(-25px) rotateX(180deg);
}
.cube-wrap.vertical .depth div.top-pane {
    transform-origin: top center;
    transform: rotateX(-270deg) translateY(-25px);
}
.cube-wrap.vertical .depth div.bottom-pane {
    transform-origin: bottom center;
    transform: rotateX(-90deg) translateY(25px);
}

/*
.depth div.left-pane {
    transform: rotateY(270deg) translateX(-100px);
    transform-origin: center left;
}
.depth div.right-pane {
    transform: rotateY(-270deg) translateX(100px);
    transform-origin: top right;
}
*/

.banner{
    position:absolute;
    top:122px;
    left:25px;
}

.bg-phone{
    background-image:url('http://mooxidesign.com/wp-content/uploads/2014/09/Apple-iPhone-6-Plus-Mockup-PSD.jpg');
    position:absolute;
    top:0px;
    left:0px;
width: 690px;
    height: 985px;
    background-size: contain;
}

.phone{
   ...