JSFiddle - React, Tailwind, and code Playground
HTML
<button class="blue">Click me</button>
<button class="red">Click me</button>
<button class="green">Click me</button>
<button class="grey">Click me</button>
CSS
button {
padding: 1em 2em;
color: white;
border: none;
border-radius: 3px;
box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .4);
}
button:active {
box-shadow: inset 0 0 6px rgba(0, 0, 0, .9);
}
button:hover {
background-color: #4F80C0;
}
.red { background:crimson; }
.blue { background:cornflowerblue; }
.green { background: green; }
.grey { background: grey; }