JSFiddle - React, Tailwind, and code Playground

by benjaminclausen

HTML

<!DOCTYPE html>  
<html lang="en">
  
<head>  

    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=320;" /> 
    
    <title></title>
    
</head>

<body>
    <a class="button round eggnog" href="#">Please click me!</a>
</body>
</html>

CSS

body {
    padding: 60px;
    font-family: Helvetica;
    font-size: 12px;
    background: #f9f9f9;
}

/* Button */

.button {
    padding: 20px 30px;
    border: 1px solid #000;
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    text-shadow: rgb(255, 255, 255) 0px 1px 0px; text-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px;
    font-size: 22px;
    display: inline-block;
}

a:link.button  {
    text-decoration: none;
}

a:hover.button {
    -webkit-box-shadow: 0 0 0 transparent;
}

.round {
    -webkit-border-radius: 75px;
    -moz-border-radius: 75px;
}

/* Button Styles */

.yellow {
    background: -moz-linear-gradient(top, #ffa912, #feff94);
background: -webkit-gradient(linear, center top, center bottom, from(#ffd813), to(#f18820));
background: -o-linear-gradient(top, #ffd813, #f18820);
border-color: rgba(211, 103, 3, 0.9);
-webkit-background-origin: border-box;
-webkit-background-clip: border-box;
-moz-background-origin: border-box;
-moz-background-clip: border-box;
}

.blue {
    background: -moz-linear-gradient(top, #ffa912, #feff94);
background: -webkit-gradient(linear, center top, center bottom, from(#A6DFF5), to(#4DBDEA));
background: -o-linear-gradient(top, #ffd813, #f18820);
border-color: rgba(36, 159, 209, 0.9);
-webkit-background-origin: border-box;
-webkit-background-clip: border-box;
-moz-background-origin: border-box;
-moz-background-clip: border-box;
}

.green {
    background: -moz-linear-gradient(top, #ffa912, #feff94);
background: -webkit-gradient(linear, center top, center bottom, from(#56AD00), to(#408000));
background: -o-linear-gradient(top, #ffd813, #f18820);
border-color: rgba(45, 89, 1, 0.9);
-webkit-background-origin: border-box;
-webkit-background-clip: border-box;
-moz-background-origin: border-box;
-moz-background-clip: border-box;
}

.eggnog {
    background: -moz-linear-gradient(top, #ffa912, #FCAC37);
background: -webkit-gradient(linear, center top, center bottom, from(#FDDE83), to(#FCAC37));
background:...