JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
<div id="pak4box" class="massbox">
<h4 style="text-align: center;"><span style="color: red;">Mastery</span></h4>
<p style="text-align: center;"><span style="color: #ffffff;"> </span></p>
</div>
<div id="g4" class="graybox">
<h6 style="text-align:center;color:black;">     Po ukończeniu poziomu Mastery:</h6>
</div>
<div id="bt4" class="boxtext">
<ul>
<li>dwa</li>
<li>raz</li>
</ul>
</div>
<div id="b4" class="butt">
<p style="text-align: center;"> <br /><a href="/index.php/download_file/150/">Pobierz </a><br /><br /></p>
</div>
</div>

JavaScript

$(function() {
    $('.butt').hover(
    function() {
        $('#g4, #bt4, #pak4box').css('background-color', '#1174c9');
        $('h6').css('color', '#ffffff');
    }, function() {
        $('#g4, #bt4, #pak4box').css('background-color', '');
        $('h6').css('color', '#000000');
        
    });
});