JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<figure id="moresh" class="nosel" for="shead">+</figure>
<article id="shead" class="trems">
    <menu id="share">
<a onclick=""><li class="g"></li></a>

<a onclick=""><li class="f"></li></a>

<a onclick=""><li class="t"></li></a>

<a onclick=""><li class="y"></li></a>

<a onclick=""><li class="ch"></li></a>

<a href=""><li class="p"></li></a>

<a onclick=""><li class="l"></li></a>

<a><li class="e"></li></a>

<a><li class="n"></li></a> 
    </menu>
</article>

CSS

* {
    margin: 0;
    padding: 0;
    border: 0
}
body {
    background: url(http://www.hdwallpapers3d.com/wp-content/uploads/2013/05/wallpaper-89f7622.jpg)
}
#shead {
    display:none;
    background: rgba(0, 0, 0, .5);
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1
}
#shead.open {
    display:block;
    z-index: 999
}
#moresh {
    z-index: 9999;
    width: 40px;
    height: 40px;
    background: #333;
    border-radius:100%;
    position: fixed;
    bottom: 10px;
    left: 10px;
    line-height: 40px;
    text-align: center;
    color: #FFF;
}
.nosel {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#share {
    width: 280px;
    padding: 5px;
    height: 280px;
    background: #fc6947;
    border-radius: 10px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -160px 0 0 -160px;
    z-index:9999
}
#share a {
    width: 27%;
    height: 27%;
    margin:3.1%;
    float: left;
    list-style: none;
    background-color: #F2F2F2;
    border-radius: 100% 50%;
    z-index:9999
}
#share a:hover {
    border-radius: 5px;
}
.trems, #share a {
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -khtml-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
}
#share li#sclose {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 5px;
    background: #fc6947;
    color: #FFF;
    position: absolute;
    left: 50%;
    margin: -38px 0 0 -20px;
    font-size: 24px;
    list-style: none;
}
#share a li.g {
    background-position: 0 0;
}
#share a li.f {
    background-position: -30px 0;
}
#share a li.t {
    background-position: -60px 0;
}
#share a li.y {
    background-position: -90px 0;
}
#share a...

JavaScript

$('#moresh').click(function () {
    var elt = $(this).attr('for');
    $("#" + elt).toggleClass("open");
});

$(function () {
    $("#share").draggable();
});

/** The event should be binded with this element **/
$('#shead').click(function () {
    $(this).toggleClass("open");
});