JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://lipis.github.io/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="https://lipis.github.io/bootstrap-social/assets/css/font-awesome.css">
<link rel="stylesheet" href="https://lipis.github.io/bootstrap-social/assets/css/bootstrap.css">
<link rel="stylesheet" href="https://lipis.github.io/bootstrap-social/assets/css/docs.css">
<p>
  Exemplo 1:
  <a class="btn btn-social-icon btn-twitter"><span class="fa fa-twitter"></span></a>
  <a class="btn btn-social-icon btn-facebook"><span class="fa fa-facebook"></span></a>
</p>

<p>
  Exemplo 2:
<div class="col-sm-4 social-buttons">
  <a class="btn btn-block btn-social btn-github" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-github']);">
    <span class="fa fa-github"></span> Exemplo GitHub</a>

<a class="btn btn-block btn-social btn-linkedin" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-linkedin']);">
  <span class="fa fa-linkedin"></span> Exemplo LinkedIn</a>
</div>
</p>