JSFiddle - React, Tailwind, and code Playground

HTML

<a class="animatedlink" href="#">This link should go pink on mouse hover, but it doesn't.</a>

<a class="regularlink" href="#">This is a regular link that does go pink on hover.</a>

CSS

.animatedlink,
.regularlink {
    display: block;            
    height: 50px;
    margin: 30px;
    width: 200px;
    outline: 2px dashed green;
}

.animatedlink {
    -webkit-animation: mybgloop 2s infinite;
    -moz-animation:    mybgloop 2s infinite;
    -o-animation:      mybgloop 2s infinite;
    animation:         mybgloop 2s infinite;
}

@-webkit-keyframes mybgloop {
    0% {background-color: blue}
    50% {background-color: red}
    100% {background-color: blue}
}

@-moz-keyframes mybgloop {
    0% {background-color: blue}
    50% {background-color: red}
    100% {background-color: blue}
}

@-o-keyframes mybgloop {
    0% {background-color: blue}
    50% {background-color: red}
    100% {background-color: blue}
}
a:hover {
    background-color: pink !important;
}