JSFiddle - React, Tailwind, and code Playground

by ShockFamily

HTML

<a class="zocial facebook"><span>Sign in with Facebook</span></a>
<a class="zocial googleplus"><span>Sign in with Google+</span></a>
<a class="zocial twitter"><span>Sign in with Twitter</span></a>
<a class="zocial linkedin"><span>Sign in with LinkedIn</span></a>

<a class="zocial dropbox"><span>Sync with Dropbox</span></a>
<a class="zocial evernote"><span>Clip to Evernote</span></a>
<a class="zocial forrst"><span>Follow me on Forrst</span></a>
<a class="zocial dribbble"><span>Sign in with Dribbble</span></a>
<a class="zocial cloudapp"><span>Sign in to CloudApp</span></a>
<a class="zocial github"><span>Fork me on Github</span></a>
<a class="zocial spotify"><span>Play on Spotify</span></a>
<a class="zocial instapaper"><span>Read It Later</span></a>
<a class="zocial soundcloud"><span>Follow me on Soundcloud</span></a>
<a class="zocial tumblr"><span>Follow me on Tumblr</span></a>
<a class="zocial smashing"><span>Read on Smashing Magazine</span></a>
<a class="zocial itunes"><span>Available on iTunes</span></a>
<a class="zocial appstore"><span>Available on the App Store</span></a>
<a class="zocial macstore"><span>Available on the Mac App Store</span></a>
<a class="zocial android"><span>Available on Android Market</span></a>

<a class="zocial paypal"><span>Pay with Paypal</span></a>
<a class="zocial amazon"><span>Sign in with Amazon</span></a>
<a class="zocial skype"><span>Call me on Skype</span></a>
<a class="zocial lastfm"><span>Sign in with Last.fm</span></a>
<a class="zocial yelp"><span>Write a review on Yelp</span></a>
<a class="zocial foursquare"><span>Check in with foursquare</span></a>

<a class="zocial wikipedia"><span>View on Wikipedia</span></a>
<a class="zocial disqus"><span>Sign in with Disqus</span></a>
<a class="zocial intensedebate"><span>Sign in with IntenseDebate</span></a>
<a class="zocial google"><span>Sign in with Google</span></a>
<a class="zocial gmail"><span>Sign in with Gmail</span></a>
<a class="zocial vimeo"><span>Upload to Vimeo</span></a>
<a...

CSS

html {
    background: #f0f0eb;
    font-family: "Helvetica Neue", sans-serif;
}
h2, p {
    font-family: "Pompiere","Helvetica Neue", sans-serif;
}
body {
    background: #FFF;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.5);
    box-shadow: 0 1px 1px rgba(0,0,0,0.5);
    -webkit-border-radius: 0 0 2px 2px;
    -moz-border-radius: 0 0 2px 2px;
    border-radius: 0 0 2px 2px;
    margin: 0 auto 2em;
    padding: 2em 1em;
    width: 600px;
}
body .zocial {
    margin: 8px 4px;
    font-size: 16px;
}
h2 {
    font-size: 17px;
    font-weight: normal;
    padding: 1em 0 0.75em;
    border-bottom: 1px solid #eee;
}

/* Code written by Sam Collins (@smcllns) of www.eventasaur.us */
/* You are free to use this work commercially */
/* You are free to extend this work without permissions from the author (just do so tastefully eh?) */
/* Enjoy */

/*Vector Icons*/
@font-face {
    font-family: 'zocial';
    src: url('zocial-regular-webfont.eot');
    src: url('zocial-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('zocial-regular-webfont.woff') format('woff'),
    url('zocial-regular-webfont.ttf') format('truetype'),
    url('zocial-regular-webfont.svg#ZocialRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*Button Structure*/
.zocial {
    border: 1px solid rgba(0,0,0,0.2);
    border-bottom-color: rgba(0,0,0,0.4);
    -moz-box-shadow: inset 0 0.0625em 0 rgba(255,255,255,0.4), inset 0 0 0.0625em rgba(255,255,255,0.6);
    -webkit-box-shadow: inset 0 0.0625em 0 rgba(255,255,255,0.4), inset 0 0 0.0625em rgba(255,255,255,0.6);
    box-shadow: inset 0 0.0625em 0 rgba(255,255,255,0.4), inset 0 0 0.0625em rgba(255,255,255,0.6);
    color: #fff;
    cursor: pointer;
    font-family: "Lucida Grande", Tahoma, sans-serif;
    font-size: 1em;
    line-height: 1.6em;
    letter-spacing: 0;
    padding: 0;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px 0...