JSFiddle - React, Tailwind, and code Playground

by richardneililagan

HTML

<div class="spacer"></div>
<div class="container">
    <div class="card">
        <div class="front"></div>
        <div class="back">
            <h1>Richard Neil Ilagan</h1>
            <p>[email protected]</p>
        </div>
    </div>
</div>

CSS

body { 
    background:#eee; width:100%; height:100%; margin:0; padding:0; 
    font-family:'segoe ui',arial,sans-serif;
}
.spacer { width:50%;height:50%; }
.container { 
    position:relative; width:300px; height:180px;
    top:50%; 
    margin:0 auto;
    margin-top:-140px;
    perspective:800px; 
}

.card {
    width:100%; height:100%;
    margin:50px 0;
    position:absolute;
    -webkit-transform-style:preserve-3d;
    -webkit-transform:rotate(4deg);
    -webkit-transition:all .5s;    
    box-shadow:2px 2px 2px rgba(0,0,0,.2);
}

.card > div {
    position:absolute;
    width:100%; height:100%;
    -webkit-backface-visibility:hidden;
}

.card .front { background:url(http://dl.dropbox.com/u/10057969/rnai.jpg);  }
.card .back { background:white; -webkit-transform:rotateY(180deg); }

.container:hover .card { 
    -webkit-transform:
        rotateY(180deg) rotate(4deg) translateX(40px) translateY(-30px)
        ; 
    box-shadow:-16px 16px 16px rgba(0,0,0,.1); }

/* STYLES */
.card div * { font-size:9pt; padding:4px 10px; }
h1 { font-size:16pt !important; }