JSFiddle - React, Tailwind, and code Playground

HTML

<div class="custom-social-share">
<a class="post-share facebook" href="http://www.facebook.com/plugins/like.php?href=http://magneticmarcomsandbox2.hs-sites.com{{ request.path }}&width&layout=standard&action=like&show_faces=true&share=true&height=80&appId=451275968361854" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=100,width=200');return false;">Facebook<span></span></a>
<a class="post-share twitter" href="https://twitter.com/share?url=http://magneticmarcomsandbox2.hs-sites.com{{ request.path }}&text=Text for Twitter Here&via=jestlinbaum" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Twitter<span></span></a>
<a class="post-share gplus" href="https://plus.google.com/share?url=http://magneticmarcomsandbox2.hs-sites.com{{ request.path }}" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;">Google Plus<span></span></a>
<a class="post-share stumble" href="http://www.stumbleupon.com/submit?url=http://magneticmarcomsandbox2.hs-sites.com{{ request.path }}" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=800');return false;">Stumbleupon<span></span></a>
                    
                </div>

CSS

a.post-share {
    display: block;
	width: 94px;
	height: 46px;
	float: left;
	margin: 10px 0px 0px 0px;
	background: #3e599a url(sidebar-share.png) no-repeat 0 0;
	text-decoration:none;
	width: 197px;
	text-indent: 50px;
	font: 15px/46px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #ffffff;
}
a.post-share:hover {
	opacity: 0.8;
	text-decoration: none;
	cursor: pointer;
}

a.post-share span {
	width: 20px;
	height: 16px;
	padding: 15px;
	display: block;
	float:right;
	background-color: #4665af;
	color: #ffffff;
	vertical-align: middle;
	font: 16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	text-align: center;
	text-indent: 0;
}

a.post-share.facebook {
	background: #3e599a url(sidebar-share.png) no-repeat 0 1px;
	margin-right: 10px;
}
a.post-share.facebook span {
	background-color: #4665af;
}
a.post-share.twitter {
	background: #4b8cbe url(sidebar-share.png) no-repeat -0px -111px;
	margin-right: 10px;
}
a.post-share.twitter span {
	background-color: #529fda;
}
a.post-share.gplus {
	background: #b8382e url(sidebar-share.png) no-repeat -0px -50px;
	margin-right: 10px;
}
a.post-share.gplus span {
	background-color: #d24238;
}
a.post-share.stumble {
	background: #e15131 url(sidebar-share.png) no-repeat -0px -165px;
}
a.post-share.stumble span {
	background-color: #fd5d3b;
}

JavaScript

function get_social_counts() {
	var thisUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
	$.ajax({
		type: "GET",
		url: 'http://cdn2.hubspot.net/hubfs/169677/social_sharing/get_social_counts.php?thisurl='+thisUrl,
		dataType: "json",
		success: function (data){
			$('a.post-share.twitter span').html(data.twitter);
			$('a.post-share.facebook span').html(data.facebook);
			$('a.post-share.gplus span').html(data.gplus);
			$('a.post-share.stumble span').html(data.stumble);
		}
	});
}


$(document).ready(function(){
    	get_social_counts();
		
	});