JSFiddle - React, Tailwind, and code Playground
HTML
<div id="share_links">
<div id="share_icons">
<div id="fb_button" class="share_outside">
<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:50px; height:20px;" src="http://www.facebook.com/plugins/like.php?href=http://www.applesiam.com%2F&layout=button_count&show_faces=false&width=50&action=like&font=lucida+grande&colorscheme=light&height=21"></iframe>
</div>
<div id="tw_button" class="share_outside"> <a href="https://twitter.com/AppleSiam" class="twitter-follow-button" data-show-count="false">Follow @AppleSiam</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></span></a>
</th>
</div>
<div id="p1_button" class="share_outside">
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium" annotation="none" href="http://applesiam.com"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div id="share_options">
<div id="share_left">
<div class="share_option"><a target="_blank" href="http://www.facebook.com/iPhoneDownloadBlog"> <span class="socialsprites" id="sofb"> </span></a>
<div class="share_text">
<h4> <a target="_blank" href="http://www.facebook.com/iPhoneDownloadBlog">Facebook</a> </h4>
<p> <a target="_blank"...
CSS
#share_left {
display: inline;
float: left;
width: 138px;
}
#share_right {
display: inline;
float: left;
margin-left: 20px;
width: 138px;
}
.socialshare1 {
color: #000000;
font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
font-size: 62.5%;
}
.share_option {
float: left;
border-top: 1px dashed #BBB;
border-top-width: 1px;
border-top-style: dashed;
border-top-color: #BBB;
margin-top: 8px;
padding-top: 10px;
}
.share_text {
float: left;
display: inline;
margin-left: 5px;
width: 100px;
}
#share_icons {
height: 25px;
overflow: hidden;
text-align: left;
}
#share_links {
background: none repeat scroll 0 0 #FFFFFF;
padding: 15px 0 15px 15px;
}
#stay_connected {
margin-bottom: 10px;
}
#fb_button.share_outside {
width: 50px;
}
.share_outside {
display: inline;
float: left;
}
#tw_button.share_outside {
margin-left: 27px;
width: 155px;
}
#p1_button.share_outside {
float: right;
margin-right: 15px;
width: 32px;
}
.socialsprites {
background: url(http://applesiam.com/wp-content/themes/Avenue/result.png);
}
#sofb {
background-position: -0px -35px;
float: left;
display: block;
width: 26px;
height: 25px;
}
#sorss {
background-position: -0px -104px;
width: 25px;
height: 25px;
}
#soytb {
background-position: -0px -174px;
width: 25px;
height: 25px;
}
#sotwt {
background-position: -0px -139px;
width: 25px;
height: 25px;
}
#somail {
background-position: -0px -0px;
width: 25px;
height: 25px;
}
#sogp {
background-position: -0px -69px;
width: 25px;
height: 25px;
}