JSFiddle - React, Tailwind, and code Playground

HTML

<div class="blog-post">
    <ul>
        <li>
            <div class="wrapPost">
                <div class="blog-img">
                	<img class="img-responsive" src="http://ecom.sofizar.com/media/catalog/product/cache/1/small_image/270x/9df78eab33525d08d6e5fb8d27136e95/r/o/rovigo3.jpg" alt="Lorem" >
                </div>
                <div class="bl-details">
                    <h4><a class="pro_URL" href="http://ecom.sofizar.com/rocker-wp-boots/">Spyke SP001 Rocker Motorcycle Boots (Rocker WP Boots)</a></h4>
                </div>
            </div>
            <div class="socialMedia">
            	<a class="fbook" title="Facebook" href="//www.facebook.com/sharer/sharer.php?u=" onclick="fbShare=window.open(this.href+encodeURIComponent(window.location), 'fbShare', 'toolbar = no, status = no, width = 640, height = 400, scrollbars=no'); return false;">&nbsp;</a> 
                
                <a class="twitter" title="Twitter" href="//twitter.com/home?status=" onclick="tweetShare=window.open(this.href+encodeURIComponent(window.location)+'&text='+encodeURIComponent(document.getElementsByTagName('title')[0].innerHTML)+'&url='+location.href+'&via=MaximoMoto','tweetShare','toolbar=no,status=no,width=600,height=400,scrollbars=no'); return false;" target="_blank">&nbsp;</a>
                
                <a class="googlePlus" title="googlePlus" href="//plus.google.com/share?url=" onclick="gplus=window.open(this.href+encodeURIComponent(window.location),'gplus','toolbar=no,status=no,width=600,height=300,scrollbars=no'); return false;" target="_blank"></a>
                
                <a class="pinterest" title="Pinterest" href="//pinterest.com/pin/create/button/?url=&media=&description=" onclick="pinterest = window.open(this.href + encodeURIComponent(window.location), 'toolbar = no, status = no, width = 640, height = 400, scrollbars = no'); return false;" target="_blank">&nbsp;</a>
                
        	</div>
        </li>
    </ul>
</div>

CSS

*{ margin:0; padding:0; box-sizing:border-box;}
.blog-post{ margin:0 auto; width:768px; box-shadow:0 0 10px rgba(0,0,0,0.7); background:#eee; padding:20px;}
.blog-post ul{ list-style:none; }
.blog-post ul li{ border-top: 1px solid #e5e5e5; padding:20px 0;}
.blog-post ul li:first-child{ border-top:0px none;}
.wrapPost:after{ content:""; display:block; clear:both; height:0;}

.img-responsive{ max-width:100%; height:auto;}

.blog-img{ float:left; width:25%; padding:0 15px;}
.bl-details{ float:left; width:75%; padding:0 15px;}

.socialMedia{ margin-left: 33.33333333333333%; padding:0 15px;}
.socialMedia a { display: inline-block; vertical-align: top; margin-left: 6px; height: 30px; width: 30px; text-decoration: none; background: url("http://ecom.sofizar.com/skin/frontend/default/sm-genera/images/xsocial-media.jpg.pagespeed.ic.z1SGyFIER6.webp") no-repeat; transition: all linear 300ms; -webkit-transition: all linear 300ms; -moz-transition: all linear 300ms; -ms-transition: all linear 300ms; }
.socialMedia a.fbook { margin-left: 0; background-position: 0 0px; }
.socialMedia a.twitter { background-position: -37px 0px; }
.socialMedia a.googlePlus { background-position: -109px 0px; }
.socialMedia a.pinterest { background-position: -74px 0px; }