JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fixedsocial">
     <div class="facebookflat" id="shareBtn"></div>
     <div class="twitterflat">
          <a href="https://twitter.com/share" data-show-count="false"></a>
     </div> 
</div>

CSS

#fixedsocial {
top:40%;    
width:50px;
height: 100px;
position:fixed;
left: 0; 
display: block;
z-index: 1000;   
background-color: #eee;
}

.facebookflat {
background: url("https://i.stack.imgur.com/LR6bK.png") no-repeat;
background-position: -168px -161px;
background-size: 1430% 1430%;
height:50px;
width: 50px;
}

 .facebookflat:hover {        
     cursor: pointer;
  }

  .twitterflat {    
background: url("https://i.stack.imgur.com/LR6bK.png") no-repeat;
background-position: -430px -161px;
background-size: 1420% 1420%;
height:50px;
width: 50px;
   }

   .twitterflat:hover {    
       cursor: pointer;
   }