JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-md-12 home" id="home">
    <div class="col-md-6 col-md-offset-3 menu2">
         <h1 class="home2head">Heading 1</h1>

        <p>Some content will go here. Something about the hotel and its specialities.</p>
    </div>
</div>
<div class="col-md-12 home2" id="home2">
    <div class="col-md-6 menu2" id="menu2">
         <h1 class="home2head">Heading 1</h1>

        <p>Some content will go here. Something about the hotel and its specialities.</p>
    </div>
</div>

CSS

.cssfocused {
    background-color: red;
}

JavaScript

$(document).ready(function () {
    
    $('#home2').mouseenter(function () {
        $(this).addClass('cssfocused');
    })
    
    $('#home2').mouseleave(function () {
        $(this).removeClass('cssfocused');
    });
    
   
});