JSFiddle - React, Tailwind, and code Playground

by S1l3

HTML

<!doctype html>
<html> 
<head> 
    <title>Social Button CSS3 Test</title> 
    <link rel="stylesheet" href="style.css" />
</head>

<body>

    <div id="container">
        <a href="#" class="s3d dribbble">
            Dribbble
            <span class="icons dribbble"></span>
        </a>
        
        <a href="#" class="s3d twitter">
            Twitter
            <span class="icons twitter"></span>
        </a>
        
        <a href="#" class="s3d facebook">
            Facebook
            <span class="icons facebook"></span>
        </a>
        
        <a href="#" class="s3d forrst">
            Forrst
            <span class="icons forrst"></span>
        </a>
        
        <a href="#" class="s3d designmoo">
            Designmoo
            <span class="icons designmoo"></span>
        </a>
        
        <a href="#" class="s3d flickr">
            Flickr
            <span class="icons flickr"></span>
        </a>
    </div>
    
</body>
</html>

CSS

/**
 * Remake of "HTML + CSS3 Icons" by Clay Cauley
 *
 * Inspiration was taken from:
 * - http://designmoo.com/5368/html-css3-icons/
 */
 
/**
 * Demo styles
 */
body { background: #383838; }

#container {
    margin: 50px auto;
    width: 125px; }
    
/**
 * Base style
 */
a.s3d  {
    clear: both;
    
    -webkit-border-radius:3px;
       -moz-border-radius:3px;
            border-radius:3px;
            
    -webkit-box-shadow:0 4px 5px rgba(0,0,0,.3);
       -moz-box-shadow:0 4px 5px rgba(0,0,0,.3);
            box-shadow:0 4px 5px rgba(0,0,0,.3);
            
    display: inline-block !important;
    font: 700 13px/36px 'Arial', Helvetica, Clean, sans-serif;
    height: 26px;
    margin: 0 0 10px;
    padding: 0 10px 11px;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(255,255,255,.35);
    width: 125px; }

/**
 * Dribbble
 */
a.dribbble {
    background: #F98CB6;
    background: -webkit-gradient(linear, 0 0, 0 0, from(#F98CB6), to(#F75F94));
    background: -moz-linear-gradient(#F98CB6, #F75F94);
    background: linear-gradient(#F98CB6, #F75F94);
    border-top: 1px solid #fbbad3;
    color: rgba(74,36,49,.9); }
    
a.dribbble:active {
    background: #F75F94;
    background: -webkit-gradient(linear, 0 0, 0 0, from(#F75F94), to(#F98CB6));
    background: -moz-linear-gradient(#F75F94, #F98CB6);
    background: linear-gradient(#F75F94, #F98CB6); }

/**
 * Twitter
 */
a.twitter {
    background: #65acc8;
    background: -webkit-gradient(linear, 0 0, 0 0, from(#65acc8), to(#4586ae));
    background: -moz-linear-gradient(#65acc8, #4586ae);
    background: linear-gradient(#65acc8, #4586ae);
    border-top: 1px solid #a1cdde;
    color: rgba(25,45,55,.9); }
    
a.twitter:active {
    background: #4586ae;
    background: -webkit-gradient(linear, 0 0, 0 0, from(#4586ae), to(#65acc8));
    background: -moz-linear-gradient(#4586ae, #65acc8);
    background: linear-gradient(#4586ae, #65acc8); }

/**
 * Facebook
 */
a.facebook {
...