JSFiddle - React, Tailwind, and code Playground

by OriginalEXE

HTML

<br />
<a href="#" class="btn">You can click me</a>
<br />

CSS

.btn {
    background: #0084b4;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-family: sans-serif;
    margin: 5px 0;
    padding: 6px 12px;
    text-decoration: none;
    -webkit-box-shadow: 0px 4px 0px 0px #005472;
    -moz-box-shadow:    0px 4px 0px 0px #005472;
    box-shadow:         0px 4px 0px 0px #005472;
}

.btn:hover {
    background: #00729B;
}

.btn:focus,
.btn:active {
    margin-top: 7px;
    -webkit-box-shadow: 0px 2px 0px 0px #005472;
    -moz-box-shadow:    0px 2px 0px 0px #005472;
    box-shadow:         0px 2px 0px 0px #005472;
}