JSFiddle - React, Tailwind, and code Playground

HTML

<div class="social-widgets">
      <ul class="social-widgets-content">
        <li><a href="#"><img src="/images/button/button.facebook.png"></a></li>
        <li><a href="#"><img src="/images/button/button.twitter.png"></a></li>
        <li><a href="#"><img src="/images/button/button.feedback.png"></a></li>
      </ul>
    </div> <!-- /.social-widgets -->

CSS

.social-widgets {
    position: fixed; 
    top: 125px; 
    left: 0px; 
    background: #f00; 
    width: 34px;
}
.social-widgets-content {
    list-style: none inside none; 
    margin: 0; 
    padding: 0; 
    text-align: left; 
    background: #ff0;
}
.social-widgets-content li {
    margin: 10px 0 !important; 
    padding:0; width: 34px; 
    background: #0f0;
}
.social-widgets-content img {
    display:block; 
    border-top: 2px solid #e9e8e8; 
    border-bottom: 2px solid #e9e8e8; 
    border-right: 2px solid #e9e8e8; 
    padding: 0px; margin:0px;
    background: #00f;
}