JSFiddle - React, Tailwind, and code Playground

by Muhammad Hassaan

HTML

<div class="sumome_share_wrapper">
        <div class="share_client">
            <span>Share</span>
            <a title="Facebook" class="social-is social-fbook" href="https://www.facebook.com/sharer/sharer.php?u=" onclick="fbShare=window.open(this.href+escape(window.location),'fbShare','toolbar=no,status=no,width=640,height=400,scrollbars=no'); return false;" target="_blank">
                <div class="front"><img src="http://eevents.s3.amazonaws.com/flat-web-icons/facebook-white-60.png" alt="Facebook"></div>
                <div class="back"><img src="http://eevents.s3.amazonaws.com/flat-web-icons/facebook-white-60.png" alt="Facebook"></div>
            </a>
            <a class="social-is social-twitter" href="https://twitter.com/intent/tweet?tw_p=" onclick="tweetShare=window.open(this.href+escape(window.location)+'&text='+escape(document.getElementsByTagName('title')[0].innerHTML)+'&url='+this.href+'&via=ExciteEventstix','tweetShare','toolbar=no,status=no,width=640,height=400,scrollbars=no'); return false;" target="_blank">
                <div class="front"><img src="http://eevents.s3.amazonaws.com/flat-web-icons/twitter-white-60.png" alt="Twitter"></div>
                <div class="back"><img src="http://eevents.s3.amazonaws.com/flat-web-icons/twitter-white-60.png" alt="Twitter"></div>
            </a>
            <a class="social-is social-googleplus" href="https://plus.google.com/share?url=" onclick="gplus=window.open(this.href+escape(window.location),'gplus','toolbar=no,status=no,width=600,height=300,scrollbars=no'); return false;" target="_blank">
                <div class="front"><img src="http://eevents.s3.amazonaws.com/flat-web-icons/googleplus-white-60.png" alt="Google Plus"></div>
                <div class="back"><img src="http://eevents.s3.amazonaws.com/flat-web-icons/googleplus-white-60.png" alt="Google Plus"></div>
            </a>
            
        </div>
    </div>

CSS

#shareButtons{ width: 50px; }
.shareable h2{ display:block; margin:0; line-height:32px; text-align:center; padding:0; border-bottom:0px none;}
.shareable .socialmedia-buttons{ margin:0;}
.shareable a { margin-right:0px;}
.shareable a img{ max-width:100%; width:auto; float:none; border-radius:0; margin:0px!important;}

.social-is { width: 50px; height: 50px; display: block; text-align: center; line-height: 50px; color: #fff; position: relative; transform: rotateY(0deg); transition: transform .25s ease-out; transform-style: preserve-3d;}
.social-is > div { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.social-is > div img{ max-width:100%; height:auto;}
.social-is >.front { transform: translateZ(20px); padding: 8px; box-sizing:border-box;}
.social-is >.back { font-size: 3em; transform: rotateY(-100deg) translateZ(20px); }
.social-is >.front img{ width:30px; height:30px;}
.social-is.social-fbook > .front{ background:#3B5998;}
.social-is.social-fbook > .back{ background: #3B5998;}
.social-is.social-twitter > .front { background: #55ACEE; }
.social-is.social-twitter > .back { background: #55ACEE; }
.social-is.social-googleplus > .front { background: #dd4B39; }
.social-is.social-googleplus > .back { background: #dd4B39; }
.social-is:hover { transform: rotateY(100deg); }