JSFiddle - React, Tailwind, and code Playground

by Kang Beben

HTML

<div class='social-box'>

   <div class='social-item-outer'>

   <a class='social-item-box facebook-box' href='http://www.facebook.com/ficri12' target='_blank' rel='nofollow' title='Facebook'>   

     <div class='counter'>

    2JT

  </div>

  <span class='social-title'>Followers</span>

   </a>

   </div>



   <div class='social-item-outer'>

   <a class='social-item-box twitter-box' href='http://twitter.com/FicriPebriyana' target='_blank'  rel='nofollow' title='Twitter'>

     <div class='counter'>

    12.230

  </div>

  <span class='social-title'>Followers</span>

   </a>

   </div>



   <div class='social-item-outer'>

   <a class='social-item-box googleplus-box' href='https://plus.google.com/+FicriPebriyana' rel='nofollow' target='_blank' title='Google+'>

     <div class='counter'>

    7.352

  </div>

  <span class='social-title'>Followers</span>

   </a>

   </div>



   <div class='social-item-outer'>

   <a class='social-item-box rss-box' href='http://feeds.feedburner.com/ID_Feeds_Anda' rel='nofollow' target='_blank' title='RSS Feeds'>

     <div class='counter'>

    879

  </div>

  <span class='social-title'>Subcribers</span>

   </a>

   </div>

    </div>

CSS

/*SOCIAL WIDGET*/

.social-box{width:280px;padding:10px 9px;margin:0;overflow:hidden;background-color:#f2f2f2;border:1px solid #f2f2f2;text-align:center}

a.social-item-box{display:block;color:#4b4b4b;float:left;width:64px;overflow:hidden;margin:0;padding:4px 0;background-image:url("http://4.bp.blogspot.com/-BijS0OXNqUM/Ub9XA_RlZLI/AAAAAAAACCM/c19K_XX4R30/s1600/csg-51bf56d8dd195.png");background-repeat:no-repeat}

.social-item-outer{background:#f8f8f8;margin:0 0 0 8px;overflow:hidden;float:left;display:inline-block}

.social-item-outer:hover{background:#fff}

.social-item-outer:nth-child(1):hover{box-shadow:0 -2px 0 #187DDB inset}

.social-item-outer:nth-child(2):hover{box-shadow:0 -2px 0 #2DB5EB inset}

.social-item-outer:nth-child(3):hover{box-shadow:0 -2px 0 #E02222 inset}

.social-item-outer:nth-child(4):hover{box-shadow:0 -2px 0 #F6A429 inset}

.social-item-outer:hover{box-shadow:0 -2px 0 #FF8168 inset}

.social-item-outer:first-child{margin-left:0}

.facebook-box{background-position:7px 4px}

.rss-box{background-position:-73px 4px}

.twitter-box{background-position:-153px 4px}

.googleplus-box{background-position:-233px 4px}

.counter{margin:60px 0 0 0;font-family:'Oswald',Verdana,Sans-serif;line-height:1.2em;font-size:16px;font-weight:500}

.social-title{color:#888;font-size:11px}