JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<section id="btn">
    <p>47k fans</p>
    <div id="facebook">
        <div class="logo"><div class="recto"></div></div>
        <div class="top"></div>
        <div class="logo verso"></div>
    </div>
    <div id="shadow"><img src="http://www.cssdeck.com/uploads/media/items/9/98AayKh.png" alt="shadow" /></div>
</section>

CSS

* {margin: 0; padding: 0;}
    
body {
    background:#e9edee;
}

#btn {
    width:103px;
    height: 35px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -17px 0 0 -51px;
    
    background-color: #d6dbde;
    background: #d6dbde -webkit-linear-gradient(bottom, rgb(215,219,222) 0, rgb(216,220,221) 60%, rgb(193,199,202) 100%);
    -webkit-box-shadow: inset 0px 0px 5px rgba(0,0,0,.2), 0px 1px 1px rgba(0,0,0,.5);
    
    background: #d6dbde -moz-linear-gradient(bottom, rgb(215,219,222) 0, rgb(216,220,221) 60%, rgb(193,199,202) 100%);
    -moz-box-shadow: inset 0px 0px 5px rgba(0,0,0,.2), 0px 1px 1px rgba(0,0,0,.5);
    
    text-align: center;
    border-radius: 2px;
    line-height: 35px;
    color: #4a66a7;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    font-size: .8em;
    font-weight: bold;
    
    -webkit-perspective: 200;
    -webkit-perspective-origin: 50% 0;
    
    -moz-perspective: 200;
    -moz-perspective-origin: 50% 0;
}

#facebook {
    width: 103px;
    height: 35px;
    text-indent: -9999px;
    border: none;
    cursor: pointer;
    position: relative;
    bottom: 100%;
    
    -webkit-transform-origin: bottom;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform .5s ease;
    -webkit-transform: translateY(0) rotateX(0);
    
    -moz-transition: -moz-transform .5s ease;
    -moz-transform: translate(0);
}

#shadow {
    display: block;
    width: 109px;
    height: 0px;
    position: absolute;
    z-index: -1;
    top: 31px;
    left: -3px;
    -webkit-transition: height 1s ease, opacity .5s ease;
    -moz-transition: height 1s ease, opacity .5s ease;
    opacity: 0;
}

    #shadow img {width: 100%; height: 100%;float: left;}

.logo, .top {position: absolute;}
    
.top {
    width: 103px; 
    height: 5px;
    top: 0;
    left: 0;
    background-color: rgba(84,113,173,1);
    
    -webkit-transform-origin: top;
    -webkit-transform: rotateX(-90deg);
   ...