JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sharebox"></div>

CSS

ul.sharebox-buttons,
ul.sharebox-buttons li {
    display: inline-block;
    font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size: 12px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

ul.sharebox-buttons li {
    margin-left: 0;
    margin-right: 0.5em;
}

ul.sharebox-buttons li:last-child {
    margin-right: 0;
}

ul.sharebox-buttons li a {
    background: #efefef;
    border-radius: 3px;
    border: 1px solid #ddd !important;
    
    color: #000 !important;
    display: inline-block;
    font-size: inherit;
    font-family: inherit;
    font-weight: normal;
    line-height: 1;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

ul.sharebox-buttons li a:hover {
    background: #eee;
    border-color: #ccc;
    color: #000;
    text-shadow: 0 1px 0 #fff;
}

ul.sharebox-buttons li a span {
    background-position: 2px center;
    background-repeat: no-repeat;
    display: block;
    line-height: 1.5em;
    opacity: .8;
    padding: 1px 5px 1px 23px;
    text-shadow: none;
}

ul.sharebox-buttons li a:hover span {
    opacity: 1;
}

/* Icons */
li.share-digg a > span {
    background-image: url(icons/digg.png);
}

li.share-google-plus a > span {
    background-image: url(icons/google-plus.png);
}

li.share-facebook a > span {
    background-image: url(icons/facebook.png);
}

li.share-linkedin a > span {
    background-image: url(icons/linkedin.png);
}

li.share-pinterest a > span {
    background-image: url(icons/pinterest.png);
}

li.share-reddit a > span {
    background-image: url(icons/reddit.png);
}

li.share-stumbleupon a > span {
    background-image: url(icons/stumbleupon.png);
}

li.share-tumblr a > span {
    background-image: url(icons/tumblr.png);
}

li.share-twitter a > span {
    background-image: url(icons/twitter.png);
}

li.share-email a > span {
    background-image: url(icons/email.png);
}

li.share-print a > span {
    background-image: url(icons/print.png);
} 

li.share-digg a > span {
   ...

JavaScript

(function($) {
    "use strict";

    // Plugin name
    var name = "sharebox";

    // jQuery plugin
    var Self = function(options) {
        var Defaults = Self.defaults,
            Services = Self.services;

        this.each(function() {
            var $this = $(this),
                attrs = {
                    url: $this.data("url"),
                    title: $this.data("title"),
                    services: $this.data("services")
                },
                settings = $.extend({}, Defaults, attrs, options),
                services = settings.services.match(/\S+/g);

            // Container
            var $ul = $this.find("ul.sharebox-buttons");
            if (!$ul.length) $ul = $("<ul></ul>").addClass("sharebox-buttons").appendTo($this);

            // Buttons
            $.each(services, function(i, name) {
                name = name.replace("google+", "google-plus");

                var Service = Services[name];
                if (!Service) return;

                // li
                var $li = $ul.find("li.share-" + name);
                if (!$li.length) $li = $("<li></li>").addClass("share-" + name).appendTo($ul);

                // a
                $li.append(
                $("<a></a>")
                    .attr({
                    href: ($.isFunction(Service.url) ? Service.url(settings) : Service.url),
                    title: (Service.label || name)
                })
                    .data({
                    width: Service.width,
                    height: Service.height
                })
                    .click(function() {
                    return Service.click.call(this, settings);
                })
                    .append(
                $("<span></span>")
                    .text(Service.label || name)));
            });
        });

        return this;
    };

    // Autoinit `.sharebox` elements
    $(document).ready(function() {
        $(".sharebox").sharebox();
    });

    Self.popup...