JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tile">
    I am the main tile
        <div class="inner">
            I am the inner region
        </div>
</div>

<div class="tile">
    I am the main tile
        <div class="inner">
            I am the inner region
        </div>
    </div>

CSS

.tile {
            width: 200px;
            height: 300px;
            background-color: yellow;
            margin: 20px;
        }
        .hover {
            background-color: lightblue;
        }
        .inner {
            width: 200px;
            height: 50px;
            background-color: goldenrod;
        }

JavaScript

$(function() {
           

            $('.tile').hover(
                function () {
                    $(this).addClass("hover"); 
                  },
                  function () {
                    $(this).removeClass("hover");
                  }
            )

        });