JSFiddle - React, Tailwind, and code Playground

by dkunin

HTML

<br><br><center><a class="button">Blue</a></center>
<br><br><center><a class="button green">Green</a></center>
<br><br><center><a class="button red">Red</a></center>
<br><br><center><a class="button black">Black</a></center>

<br><br><center><a class="button white">White</a></center>
<br><br><center><a class="button white">Еще одна кнопка</a></center>

CSS

.button { 
      transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    background: #21bbe1;
    border-radius: 5px; 
    color: #fff; 
    padding: 12px 15px; 
    text-transform: uppercase; 
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
    font-family: Arial, sans-serif; 
    font-weight: bold; 
    margin-bottom: 10px; 
        margin-top:45px;
    border: none; 
    cursor: pointer;
    -webkit-box-shadow: 0px 5px 0px #249BC4, 0 5px 5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 5px 0px #249BC4, 0 5px 5px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 5px 0px #249BC4, 0 5px 5px rgba(0, 0, 0, 0.75);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.button.green { 
    background: #5faa15;
    -webkit-box-shadow: 0px 5px 0px #469a18, 0 5px 5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 5px 0px #469a18, 0 5px 5px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 5px 0px #469a18, 0 5px 5px rgba(0, 0, 0, 0.75);
}
.button.red{ 
    background: #FF0000;
    -webkit-box-shadow: 0px 5px 0px #a60000, 0 5px 5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 5px 0px #a60000, 0 5px 5px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 5px 0px #a60000, 0 5px 5px rgba(0, 0, 0, 0.75);
}

.button.white{ 
    background: #E6E6E6;
    color:#000000;
    -webkit-box-shadow: 0px 5px 0px #B3B3B3, 0 5px 5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 5px 0px #B3B3B3, 0 5px 5px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 5px 0px #B3B3B3, 0 5px 5px rgba(0, 0, 0, 0.75);
}

.button.black{ 
    background: #4D4D4D;
    -webkit-box-shadow: 0px 5px 0px #1A1A1A, 0 5px 5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 5px 0px #1A1A1A, 0 5px 5px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 5px 0px #1A1A1A, 0 5px 5px rgba(0, 0, 0, 0.75);
}
.button:hover { text-decoration: none;        
    transition: all 0.1s...