JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<a href="contact"><div id="res">Reserveren</div></a>

CSS

#res { /* default styles */
    background-color: #000;
    -moz-transition: background-color 1s linear;
    -ms-transition: background-color 1s linear;
    -o-transition: background-color 1s linear;
    -webkit-transition: background-color 1s linear;
    transition: background-color 1s linear;
}

#res.animating, /* hovered-class/animating styles */
.animating {
    background-color: #fff;
    -moz-transition: background-color 1s linear;
    -ms-transition: background-color 1s linear;
    -o-transition: background-color 1s linear;
    -webkit-transition: background-color 1s linear;
    transition: background-color 1s linear;
}

JavaScript

$('#res').hover(

function() {
    $(this).addClass('animating');
}, function() {
    $(this).removeClass('animating');
});