JSFiddle - React, Tailwind, and code Playground

by rcmdnk

HTML

<div class="sharing">
    <ul>
        <li class="hatena"> <a href="http://b.hatena.ne.jp/entry/http://rcmdnk.github.io" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加"/></a> 
        </li>
        <li class="twitter"> <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://rcmdnk.github.io" data-via="rcmdnk" data-counturl="http://rcmdnk.github.io">Tweet</a> 
        </li>
        <li class="googleplus">
            <div class="g-plusone" data-size="medium" data-href="http://rcmdnk.github.io"></div>
        </li>
        <li class="facebook">
            <div class="fb-like" data-send="false" data-layout="button_count" data-show-faces="false" data-font="verdana" data-href="http://rcmdnk.github.io"></div>
        </li>
        <li class="facebook_share">
            <div class="fb-share-button" data-type="button_count" data-font="verdana" data-href="http://rcmdnk.github.io"></div>
        </li>
        <li class="tumblr"><a href="http://www.tumblr.com/share/link?url=http%3A%2F%2Frcmdnk.github.io%2F" title="Share on Tumblr" class="tumblr_button" style="">Tumblr</a>

        </li>
        <li class="pocket"> <a href="https://getpocket.com/save" class="pocket-btn" data-lang="en" data-save-url="http://rcmdnk.github.io" data-pocket-count="horizontal" data-pocket-align="left">Pockett</a> 
        </li>
        <li class="bookmark">
            <input class="link_btn add_bookmark" type="button" value="Favorite" data-page_title="rcmdnk's blog" data-page_url="http://rcmdnk.github.io" />
        </li>
    </ul>
</div>

CSS

.sharing {
    *zoom: 1;
    margin-bottom: 20px;
}
.sharing:after {
    content:"";
    display: table;
    clear: both;
}
.sharing ul li {
    display: block;
    float: left;
    margin-right: 5px;
}
li.hatebu {
    width: 60px;
}
li.twitter {
    width: 80px;
}
li.googleplus {
    width: 65px;
}
li.facebook {
    width: 100px;
}
li.facebook_share {
    width: 100px;
    //margin-top: -5px;
    // need sometime?
}
#fb-root {
    display: none;
}
li.tumblr {
    width: 60px;
}
.sharing a.tumblr_button {
    display: inline-block;
    text-indent: -9999px;
    overflow: hidden;
    height:20px;
    //background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;
    withd: 81px;
    //background:url('http://platform.tumblr.com/v1/share_2.png') top left no-repeat transparent;
    width: 61px;
    background:url('http://platform.tumblr.com/v1/share_2T.png') top left no-repeat transparent;
    width: 61px;
}
li.pocket {
    width: 90px;
}
li.bookmark {
    width: 100px;
    margin-top: -2px;
}
.link_btn {
    background-color: #f2f2f2;
    padding: 2px 5px 0px;
    position: relative;
    text-decoration: none;
    border: solid 2px #cccccc;
    border-radius: 10px;
}
.link_btn:active {
    padding: 3px 5px 1px;
    top: 1px;
}
.link_btn::before {
    background-color: #f2f2f2;
    content:"";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 1px;
    left: -1px;
    top: -1px;
    z-index: -1;
    border-radius: 10px;
}

JavaScript

(function (w, d) {
    var j, s = d.getElementsByTagName('script')[0],
        a = function (u, i) {
            if (!d.getElementById(i)) {
                j = d.createElement('script');
                j.src = u;
                if (i) {
                    j.id = i;
                }
                s.parentNode.insertBefore(j, s);
            }
        };
    //Hatena Bookmark
    a('//b.st-hatena.com/js/bookmark_button.js', 'hatebu-js');
    //Twitter
    a('//platform.twitter.com/widgets.js', 'twitter-wjs');
    // Google+
    w.___gcfg = {
        lang: 'ja'
    };
    a('//apis.google.com/js/plusone.js', 'plusone-js');
    // Facebook
    a('//connect.facebook.net/ja_JP/all.js#xfbml=1', 'facebook-jssdk');
    // Tumblr
    a('//platform.tumblr.com/v1/share.js', 'tumblr-share-js');
    // Pocket
    a('//widgets.getpocket.com/v1/j/btn.js?v=1', 'pocket-btn-js');
})(this, document);