JSFiddle - React, Tailwind, and code Playground

HTML

<span class="grey button">Rod Oliveira</span>
<span class="gold button">Rod Oliveira</span>
<span class="green button">Rod Oliveira</span>

CSS

.button {
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-family: sans-serif;
    font-size: 10pt;
    font-weight: bold;
    margin: 2px;
    overflow: visible;
    padding: 0.2em 0.5em;
    text-decoration: none !important;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
}
.button:hover, .button:focus {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.button:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) inset;
}

.button.grey {
    color: #606060;
    text-shadow: 0px -1px 0px rgba(170, 170, 170, 0.6);
    background-color: #d0d0d0;
    background-image: linear-gradient(#e0e0e0, #c0c0c0);
    background-repeat: repeat-x;
    border-color: #c0c0c0;
}
.button.gold {
    color: #604040;
    text-shadow: 0px -1px 0px rgba(120, 150, 150, 0.5);
    background-color: #e0c040;
    background-image: linear-gradient(#f0d040, #d0b000);
    background-repeat: repeat-x;
    border-color: #d0b000;
}
.button.green {
    color: #202020;
    text-shadow: 0px -1px 0px rgba(120, 120, 120, 0.4);
    background-color: #60c040;
    background-image: linear-gradient(#70e060, #50a020);
    background-repeat: repeat-x;
    border-color: #50a020;
}