JSFiddle - React, Tailwind, and code Playground

by Arsen

HTML

<!-- https://gist.github.com/mekegi/a8baebc16a462ffd33e299b1e8344485 -->

<section class="sharing-btns post-share">
    <a href="https://www.facebook.com/dialog/share?app_id={{ .Site.Params.facebook_admin }}&display=popup&href={{ .Permalink }}&redirect_uri={{ .Permalink }}"
       target="_blank"
       title="Поделиться через Facebook"
       data-social="Facebook"
       class="like__widget swidget_facebook"
    ></a>

    <a href="https://twitter.com/share?url={{ .Permalink }}&amp;text={{ .Title }}&amp;hashtags=some,ololo"
       target="_blank"
       title="Поделиться через Twitter"
       data-social="Twitter"
       class="like__widget swidget_twitter"></a>

    <a href="http://vkontakte.ru/share.php?url={{ .Permalink }}" target="_blank"
       title="Поделиться через Vkontakte"
       data-social="Vkontakte"
       class="like__widget swidget_vkontakte"
    ></a>

    <a href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st.comments={{ .Title }}&st._surl={{ .Permalink }}"
       target="_blank"  title="Поделиться через Odnoklassniki"
       data-social="Odnoklassniki"
       class="like__widget swidget_odnoklassniki"
    ></a>

    <a href="mailto:?subject=Отправлено с сайта ololo.com&amp;body=%0D%0A{{ .Title }}%0D%0A{{ .Permalink }} %0D%0A%0D%0A{{ .Summary }}"
       title="Поделиться через почту" data-social="Email" target="_blank"
       class="like__widget swidget_email"
    ></a>

    <a
       href="whatsapp://send?text={{ .Title }}.%20{{ .Permalink }}" data-action="share/whatsapp/share"
       target="_blank"
       title="Share link on Whatsapp"
       data-social="Whatsapp"
       class="like__widget swidget_whatsapp only_mobile">
    </a>

    <a
       href="https://telegram.me/share/url?url={{ .Permalink }}&text={{ .Title }}"
       target="_blank"
       title="Share link on Telegram"
       data-social="Telegram"
       class="like__widget swidget_telegram only_mobile">
    </a>
</section>

CSS

.like__widget {
	margin: .3em;
	color: #333;
	width: 32px;
	height: 32px;
	stroke-width: 0;
	stroke: currentColor;
	fill: currentColor;
	display: inline-block;
	vertical-align: middle;
	background-repeat: no-repeat;
}
.swidget_facebook:active,.swidget_facebook:focus,.swidget_facebook:hover {
	background: #425497;
	border-color: #425497;
}
.swidget_facebook {
	background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#425497" d="M13 0H3C1 0 0 1 0 3v10c0 2 1 3 3 3h5V9H6V7h2V5c0-2 2-2 2-2h3v2h-3v2h3l-.5 2H10v7h3c2 0 3-1 3-3V3c0-2-1-3-3-3z"/></svg>');
}
.swidget_twitter:active,.swidget_twitter:focus,.swidget_twitter:hover {
	background: #00b7ec;
	border-color: #00b7ec;
}
.swidget_twitter {
	background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="#00b7ec" d="M15.96 3.42c-.04.153-.144.31-.237.414l-.118.058v.118l-.59.532-.237.295c-.05.036-.398.21-.413.237V6.49h-.06v.473h-.058v.294h-.058v.296h-.06v.235h-.06v.237h-.058c-.1.355-.197.71-.295...