JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<h2>
    <a href="http://thegeekinvasion.com/r-p-hans-rudolf-ruedi-giger/">Some Title</a>
</h2>

<div class="tgi-share-wrap">
    <div class="tgi-share-icons">	<span class="facebookSpan"><div class="fb-share-button" data-show-faces="false"></div></span>
	<span class="twitterSpan"><a href="https://twitter.com/share" class="twitter-share-button" data-width="90"></a></span>
	<span class="googleSpan"><div class="g-plus" data-action="share" data-size="medium"></div></span>
	<span class="linkedinSpan"><script type="IN/Share"></script></span>
	<span class="tumblrSpan"><a target="_blank" href="http://www.tumblr.com/share/link/" title="Share on Tumblr">Share on Tumblr</a></span>

    </div>
    <div class="tgi-share-btn">	<span class="tgi-share-text">Share This Post</span>

    </div>
</div>

CSS

@import url('http://fnt.webink.com/wfs/webink.css/?project=48A0FEEA-BDD3-4D13-87A6-73DC10C33BB5&fonts=31B87CF9-F410-ED20-E812-2F143D523935:f=Hermes-Regular');

/* Async Share Button
---------------------- */

/* Regular */
 .tgi-share-wrap {
    background-color: #2cae85;
    box-sizing: content-box;
    cursor: pointer;
    height: 62px;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: opacity 0.5s ease-in-out, background-color 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out, background-color 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out, background-color 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out, background-color 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out, background-color 0.5s ease-in-out;
    width: 92px;
}
.tgi-share-btn {
    padding: 10px 5px;
}
.tgi-share-btn > * {
    color: #fff;
    display: block;
    float: left;
    -webkit-transition: color 0.5s ease-in-out;
    -moz-transition: color 0.5s ease-in-out;
    -ms-transition: color 0.5s ease-in-out;
    -o-transition: color 0.5s ease-in-out;
    transition: color 0.5s ease-in-out;
}
.tgi-share-wrap:hover .tgi-share-btn > * {
    color: #2cae85;
}
.tgi-share-wrap:hover {
    background-color: #e7e7e7;
}
.tgi-share-wrap.show {
    opacity: 1;
}
.tgi-share-wrap .tgi-share-text {
    /*display: block;*/
    font: bold 9px"Hermes-Regular", sans-serif;
    margin: 0 auto;
    padding: 3px 0 0 4px;
    text-transform: uppercase;
    width: 44px;
}
.tgi-share-wrap i {
    font-size: 42px;
}
.tgi-share-bottom {
    height: 35px;
    width: 167px;
}
.tgi-share-bottom .tgi-share-btn {
    padding: 5px 10px!important;
}
.tgi-share-bottom .tgi-share-text {
    font-size: 10px;
    padding-top: 5px;
    width: auto;
}
.tgi-share-bottom i {
    font-size: 25px;
}
.open .tgi-share-icons {
    background-color: #333;
    display: none;
    height: 100%;
    /*width: 100%;*/
}
.tgi-share-icons > span {
    float: left;
   ...

JavaScript

$.fn.tgiLoadDone = function (cb) {
    $(this).load(function(cb) {
        cb();
    });
};

function tgiLoadSocial(el) {
    var tgiSocialData = {
        // FaceBook
        "facebook": {
            "query": false,
                "url": "data-href",
                "fn": function () {
                if (typeof (FB) != 'undefined') FB.init({
                    status: true,
                    cookie: true,
                    xfbml: true
                });
                else {
                    $.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1", function () {
                        FB.init({
                            status: true,
                            cookie: true,
                            xfbml: true
                        });
                    });
                }
            },
                "type": {
                "name": "data-type",
                    "hl": "button_count",
                    "vl": "box_count"
            }
        },
        // Twitter
        "twitter": {
            "query": false,
                "url": "data-url",
                "fn": function () {
                if (typeof (twttr) != 'undefined') twttr.widgets.load();
                else $.getScript('http://platform.twitter.com/widgets.js');
            },
                "type": {
                "name": "data-count",
                    "hl": "horizontal",
                    "vl": "vertical"
            },
                "title": "data-text"
        },
        //Google +
        "google": {
            "query": false,
                "url": "data-href",
                "fn": function () {
                if (typeof (gapi) != 'undefined') {
                    $(".g-plusone").each(function () {
                        gapi.plusone.render($(this).get(0));
                    });
                } else $.getScript('https://apis.google.com/js/plusone.js');
            },
                "type": {
                "name":...