JSFiddle - React, Tailwind, and code Playground

HTML

<div class="out enterleave">
    <p>move your mouse</p>
    <div class="in">
        <p>move your <input type="text" value="blah"> mouse</p>
    </div>
</div>
<div id="result"></div>

CSS

div.out {
    width:40%;
    height:120px;
    margin:0 15px;
    background-color:#D6EDFC;
}
div.in {
    width:60%;
    height:60%;
    background-color:#FFCC00;
    margin:10px auto;
}

JavaScript

$("div.enterleave").mouseenter(function() {
    $('#result').html($('#result').html() + 'enter<br/>');
}).mouseleave(function() {
    $('#result').html($('#result').html() + 'leave<br/>');
});