JSFiddle - React, Tailwind, and code Playground

by dievardump

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.6/prefixfree.min.js"></script>
<div class="main">
            <div class="rounded center icon-share"></div>
            <div class="share-container rounded">
                 <div class="vert separator"></div>
                <div class="hori separator"></div>
                <a class="share-btn tl icon-google-plus" href='#'></a>    
                <a class="share-btn tr icon-twitter" href='#'></a>    
                <a class="share-btn bl icon-pinterest" href='#'></a>    
                <a class="share-btn br icon-facebook" href='#'></a>    
            </div>
        </div>

CSS

a {
                text-decoration: none;
            }
            .main, .center, .center-bis {
                width: 32px;
                height: 32px;
            }
            .main {
                font: 14px, 'FontAwesome';
                position: relative;
                margin: 150px auto;
                
            }
            .rounded {
                border-radius: 50%;
                overflow: hidden;
                text-align: center;
            }
            .center {
                display: inline-block;
                vertical-align: middle;
                z-index: 5;
                position: relative;
                background: linear-gradient(#8df 0%, #29d 100%);
                box-shadow: 0 1px 5px rgba(255, 255, 255, 0.5) inset, 0 0 0px 1px rgba(33, 112, 178, 0.5);
                line-height: 33px;
                color: #fff;

            }
            .center img {    
                vertical-align: middle;
            }
            
            
            .share-btn {
                display:inline-block;
                width: 49%;
                height: 49%;
                position: absolute;
                z-indez:1;
                border-color: #92888f;
                border-style: solid;
                border-width: 0;
                font-size: 25px;
                color: #777777;
                text-shadow: 0.1em 0.1em #fff;
            }
            .share-btn:hover {
                background:linear-gradient(#8df 0%, #29d 100%);
                color: #ffffff;
                text-shadow: 0 -1px #4298e0;
            }
            .share-btn.tl {
                right: 50%;
                bottom: 50%;
                border-top-left-radius: 100%;
                
                text-indent: 5px;
                line-height: 55px;

                box-shadow: -2px -2px 4px -4px #2299DD inset;
            }

            .share-btn.tr {
                left: 50%;
                bottom: 50%;
       ...