JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<a class="social-button fagoc" target="_blank" href="http://teste.fagoc.br/siga/app/vestibular/?t=0436806">Página de Inscrição</a>

<a class="social-button facebook" target="_blank" href="http://teste.fagoc.br/siga/app/vestibular/?t=0436806">Compartilhar</a>

CSS

a.social-button {
    padding: 2px 6px 3px 25px;
    display: inline-block;
    font-weight: bold;
    border-radius: 2px;
    font-family: 'Helvetica Neue', Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
    font-size: 11px;
    text-decoration: none;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.3);
    margin: 2px;
}

a.social-button.fagoc {
    text-shadow: #354C97 0px -1px 0px;
    color: #fff;
    background-position: 1px 1px;
    background-repeat: no-repeat;
    background-size: auto;
    background-color: #016E1B;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAACB0RVh0U29mdHdhcmUATWFjcm9tZWRpYSBGaXJld29ya3MgTVi7kSokAAAAFnRFWHRDcmVhdGlvbiBUaW1lADA0LzI4LzE0S5BNpAAAAohJREFUeJx1k71LI1EUxR+ZiY0gTgx+wBph2imEAZVFISDoRJCZIbBKioDkD1jFQUVIMWAxYm1llVrImrQpkrERLOIKMY0iJAorIohpIijkt0XWQd3dU53ivse559wjAPEeq6urq4lE4krTtLYkSUiShKZpbdM0z7a2tmbe5gABdIkQQmSz2THTNM+i0SiZTIZyucz9/T2NRoPDw0Ns26avrw/TNH++/0QIIYTrujFN09ozMzM0Gg3+h2q1yvDwMPF4/NcH2ZZlVefm5nh6egKgUCig6zqhUIhQKIRt21QqFQCazSbT09NYllUVQgjhOM5yOBym2WwCkMlkGBsbw/M8bm9vubm5YWNjA1mWcV0XgPPzc2RZxnGcZWEYxmUqlQLg6OgIRVG4uLj4S/7JyQlDQ0MUCgU6nQ4LCwsYhnEpYrHYa6lUAmB2dpadnR0AKpUKkUgEVVXxfR+Azc1NdF0HIJ/PE4vFXoUQglarBV1LA64oCp7n4XkekUgkkC5JEgCPj49dj8QnPD8/BxwQDw8PQlEUIYQQrVYriO7u7q479HmFvb09AHzfZ2BgAFVVOT4+DgxOJpMA7O7uomlaWxiGcWnbdhBfOBymXq//ZeLBwQGyLOP7Pi8vL0xNTXWjXF9f/ybLMtfX1wCsrKwwMjKC4zicnp5SLpdJpVL09vaSy+UAKBaLRKPRzvb29tfgkOLxeHBIxWIRXdd560IymQzWqNfrqKpKOp3OB2a5rvtF07T2+Pj4P+W/oVQq0dPTw/z8/NUHp/+UadSyrGp/fz+Li4vkcjlqtRq1Wo39/X0mJycZHBzspNPpHx/e8qnOa2tr3xOJxOX7Ok9MTDwuLS2Vs9ns6Oc6/wYSLDEzshdGtgAAAABJRU5ErkJggg==);
}

a.social-button.fagoc:hover {
    background-color: #008534;
    color: #fafafa;
}

a.social-button.facebook {
  text-shadow: #354C97 0px -1px 0px;
  color: #fff;
  background-color: #3B55A0;
  background-position: 1px 1px;
  background-repeat: no-repeat;
  background-size: auto;
 ...