JSFiddle - React, Tailwind, and code Playground

HTML

<a href="" class="shiny-button"><strong>A</strong></a>
<a href="" class="shiny-button"><strong>B</strong></a>
<a href="" class="shiny-button"><strong>C</strong></a>
<a href="" class="shiny-button"><strong>D</strong></a>
<a href="" class="shiny-button"><strong>E</strong></a>
<a href="" class="shiny-button"><strong>F</strong></a>
<a href="" class="shiny-button"><strong>G</strong></a>
<a href="" class="shiny-button"><strong>H</strong></a>
<a href="" class="shiny-button"><strong>I</strong></a>
<a href="" class="shiny-button"><strong>J</strong></a>
<a href="" class="shiny-button"><strong>K</strong></a>
<a href="" class="shiny-button"><strong>L</strong></a>
<a href="" class="shiny-button"><strong>M</strong></a>
<a href="" class="shiny-button"><strong>N</strong></a>
<a href="" class="shiny-button"><strong>O</strong></a>
<a href="" class="shiny-button"><strong>P</strong></a>
<a href="" class="shiny-button"><strong>Q</strong></a>
<a href="" class="shiny-button"><strong>R</strong></a>
<a href="" class="shiny-button"><strong>S</strong></a>
<a href="" class="shiny-button"><strong>T</strong></a>
<a href="" class="shiny-button"><strong>U</strong></a>
<a href="" class="shiny-button"><strong>V</strong></a>
<a href="" class="shiny-button"><strong>W</strong></a>
<a href="" class="shiny-button"><strong>X</strong></a>
<a href="" class="shiny-button"><strong>Y</strong></a>
<a href="" class="shiny-button"><strong>Z</strong></a>

CSS

/**
 * CSS Buttons Generator for your pleasure!
 * http://www.dextronet.com/css-buttons-generator
 * 
 * (c) Ondrej Zabojnik <[email protected]>, released under the MIT license
 * 
 * Usage: 
 *   <a href="" class="shiny-button"><strong>W</strong></a>
 * 
 */

.shiny-button {
  display: inline-block;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.1;
  font-weight: normal;
  font-family: sans-serif;
  color: #FFFFFF;
  font-size: 12px;
  background-color: #006BCF;
  background-image: -webkit-linear-gradient(top, #006ed4 0%, #197fdf 48%, #006BCF 49%, #006BCF 82%, #0079eb 100%);
  background-image: -moz-linear-gradient(top, #006ed4 0%, #197fdf 48%, #006BCF 49%, #006BCF 82%, #0079eb 100%);
  background-image: -o-linear-gradient(top, #006ed4 0%, #197fdf 48%, #006BCF 49%, #006BCF 82%, #0079eb 100%);
  background-image: linear-gradient(top, #006ed4 0%, #197fdf 48%, #006BCF 49%, #006BCF 82%, #0079eb 100%);
  border-color: hsl(209, 40%, 41%);
  -webkit-box-shadow: inset 0 0 1px 1px #1c92ff, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: inset 0 0 1px 1px #1c92ff, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 0 1px 1px #1c92ff, 0 0 1px 3px rgba(0, 0, 0, 0.15);
  -webkit-text-shadow: 1px 1px 1px #003669;
  -moz-text-shadow: 1px 1px 1px #003669;
  -o-text-shadow: 1px 1px 1px #003669;
  text-shadow: 1px 1px 1px #003669;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 2.4000000000000004px 6px 2.4000000000000004px 6px;
}

.shiny-button strong {
  letter-spacing: 1px;
  font-size: 16px;
}

.shiny-button:hover {
  color: #FFFFFF;
  background-color: #0073de;
  background-image: -webkit-linear-gradient(top, #0076e3 0%, #2087e6 48%, #0073de 49%, #0073de 82%, #0082fa 100%);
  background-image: -moz-linear-gradient(top, #0076e3 0%, #2087e6 48%, #0073de 49%, #0073de 82%, #0082fa 100%);
  background-image: -o-linear-gradient(top, #0076e3...