JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    </head>
<body>

<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>

</body>
</html>

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/>');
    });