JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="noworks">
    Click me!! <span>(broken)</span>
</a>
<a href="#" class="works">
    Click me!! <span>(works)</span>
</a>

CSS

a.noworks:link, a.noworks:visited, a.noworks:active {
    background: red;
}
a.noworks:hover {
    background: green;
}


a.works:link, a.works:visited {
    background: green;
}
a.works:hover {
    background: red;
}
a.works:active {
    background: green;
}






















a {
    display: block;
    width: 100px;
    height: 100px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    float: left;
    margin-left: 20px;
}
span {
    font-size: 16px;
    display: block;
    margin: 0 auto;
}