JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="social-buttons">
        <ul>
            <li><a href="#" class="vk"></a>
            </li>
            <li><a href="#" class="twi"></a>
            </li>
            <li><a href="#" class="fb"></a>
            </li>
            <li><a href="#" class="ok"></a>
            </li>
        </ul>
    </div>
</div>

CSS

.container {
    height: 1200px;
}
.social-buttons {
    position: fixed;
    top: 100px;
    right: 0;
    z-index: 10;
    overflow: hidden;
    padding: 3px 0 3px 3px;
    width: 27px;
    height: 126px;
    background: #fffad1;
}
.social-buttons ul {
    display: block;
    margin: 0;
    padding: 0;
    padding-top: 13px;
    width: 26px;
    height: 112px;
    border: 1px solid #e1ddb9;
    border-right: none;
    list-style: none;
}
.social-buttons ul li {
    display: block;
}
.social-buttons ul li a {
    display: block;
    margin-bottom: 6px;
    margin-left: 3px;
    width: 20px;
    height: 21px;
    background: url(http://studiojump.ru/amore/img/social-buttons.png) 0 0 no-repeat;
}
.social-buttons .twi {
    background-position: 0 -21px;
}
.social-buttons .fb {
    background-position: 0 -42px;
}
.social-buttons .ok {
    background-position: 0 -63px;
}