JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<a id="div-1" href="#">Test 1</a>
	<a id="div-2" href="#">Test 2</a>
	<a id="div-3" href="#">Test 3</a>
</body>

CSS

body {
    background: #ccc;
    -webkit-transition:0.5s;
}

JavaScript

$("#div-1").hover(
    function () {
        $('body').css("background", "#ff9900");
    }, 
    function () {
        $('body').css("background", "#ccc");
    }
);

$("#div-2").hover(
    function () {
        $('body').css("background", "red");
    }, 
    function () {
        $('body').css("background", "#ccc");
    }
);

$("#div-3").hover(
    function () {
        $('body').css("background", "yellow");
    }, 
    function () {
        $('body').css("background", "#ccc");
    }
);