JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<a href="#" class="btn">Button</a>

CSS

body{
    padding: 5em;
    font-family: Arial;
}
.btn{
    display: inline-block;
    padding: 1em 1.5em;
    background: #4C4C4C;
    color: rgba(255, 255, 255, 0.8);
    font-weight: bold;
    text-decoration: none;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
background-repeat: repeat-x;
    
    -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
    
    -webkit-box-shadow: 0 0 0 1px #1C1C19, 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.2);
-moz-box-shadow: 0 0 0 1px #1c1c19, 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.2);
box-shadow: 0 0 0 1px #1C1C19, 0 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.2);
    
    -webkit-transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
-moz-transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
-ms-transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
-o-transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
}

.btn:hover{
    background-color: #2C2C2C;
    color: rgba(255, 255, 255, 0.8);
}

.btn:active{
    color: rgba(255, 255, 255, 0.4);
background-color: #1C1C19;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0));
background-repeat: repeat-x;
    -webkit-box-shadow: 0 0 0 1px #1C1C19, 0 2px 0 rgba(255, 255, 255, 0.1), inset 0 2px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 0 1px #1c1c19, 0 2px 0 rgba(255, 255, 255, 0.1), inset 0...