JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://yandex.st/share/share.js"></script>
<div id="the_share"></div>
    <script src="http://yandex.st/share/share.js"></script>
    <script>
        new Ya.share({
            element: 'the_share',
            elementStyle: {
                'type': 'none',
                'quickServices': ['yaru', 'vkontakte', 'facebook', 'twitter', 'odnoklassniki', 'moimir', 'lj', 'gplus']
            },
            link: document.location.href,
            title: document.title
        });
    </script>

CSS

#the_share {
    
}

#the_share .b-share {
      text-align: justify;
line-height: 0;
font-size: 1px;
text-justify: newspaper;
zoom: 1;
text-align-last: justify;
list-style-type: none;
padding: 0 !important;
margin: 9px 0 0 0;
display: block !important;
}

#the_share .b-share::after {
      width: 100%;
height: 0px;
visibility: hidden;
overflow: hidden;
content: '';
display: inline-block;
}

#the_share .b-share-icon_yaru,
#the_share .b-share-icon_vkontakte,
#the_share .b-share-icon_facebook,
#the_share .b-share-icon_twitter,
#the_share .b-share-icon_odnoklassniki,
#the_share .b-share-icon_moimir,
#the_share .b-share-icon_lj,
#the_share .b-share-icon_gplus {
    display: block;
width: 32px;
height: 32px;
float: none;
background: none;
}

#the_share .b-share a.b-share__handle {
    width: 32px;
height: 32px;
display: inline-block;
text-align: center;
line-height: normal;
vertical-align: top;
background: #ffe4c3;
border-radius: 50%;
float: none ! important;
padding: 0 !important;
}