JSFiddle - React, Tailwind, and code Playground

by brennan

HTML

<a href="#" class="googlePlusBtn">
    <span class="googlePlusBtn-text">
        <span class="googlePlusBtn-icon"></span>
        +1 Connect via Google
    </span>
</a>
<br />
<a href="#" class="googlePlusBtn alt">
    <span class="googlePlusBtn-text">
        <span class="googlePlusBtn-icon"></span>
        +1 Connect via Google
    </span>
</a>

CSS

body{
    margin:10px;
}
.googlePlusBtn,
.googlePlusBtn:link,
.googlePlusBtn:visited{
    position:relative;
    display:block;
    overflow:hidden;
    height:22px;
    width:160px;
    color:#da573b;
    text-align:center;
    text-decoration:none;
    text-shadow:0 1px 0px #f7f7f7;
    font:normal 13px/22px arial, sans-serif;
    border:1px solid #bdbdbd;
    border-bottom-color:#cacaca;
    border-bottom-color:#acacac;
    border-radius:3px;
    background: #fbfbfb;
background: -moz-linear-gradient(top,  #fbfbfb 0%, #e4e4e4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#e4e4e4));
background: -webkit-linear-gradient(top,  #fbfbfb 0%,#e4e4e4 100%);
background: -o-linear-gradient(top,  #fbfbfb 0%,#e4e4e4 100%);
background: -ms-linear-gradient(top,  #fbfbfb 0%,#e4e4e4 100%);
background: linear-gradient(top,  #fbfbfb 0%,#e4e4e4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#e4e4e4',GradientType=0 );
}
.googlePlusBtn:hover{
    text-shadow:0 1px 0 #fcfcfc;
    background: #fefefe;
background: -moz-linear-gradient(top,  #fefefe 1%, #fbfbfb 16%, #f3f3f3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#fefefe), color-stop(16%,#fbfbfb), color-stop(100%,#f3f3f3));
background: -webkit-linear-gradient(top,  #fefefe 1%,#fbfbfb 16%,#f3f3f3 100%);
background: -o-linear-gradient(top,  #fefefe 1%,#fbfbfb 16%,#f3f3f3 100%);
background: -ms-linear-gradient(top,  #fefefe 1%,#fbfbfb 16%,#f3f3f3 100%);
background: linear-gradient(top,  #fefefe 1%,#fbfbfb 16%,#f3f3f3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#f3f3f3',GradientType=0 );

}
.googlePlusBtn:active{
    text-shadow:0 1px 0px #ededed;
background: #e1e1e1;
background: -moz-linear-gradient(top,  #e1e1e1 3%, #f2f2f2 16%, #eaeaea 50%, #e2e2e2 100%);
background: -webkit-gradient(linear, left top, left bottom,...