JSFiddle - React, Tailwind, and code Playground

by Serhat Uzuncavdar

HTML

<div></div>

CSS

div {
    width: 220px;
    height: 170px;
    margin: 10px 50px 10px 10px;
    background: yellow;
    border: 2px groove;
    float: right;
  }
  p {
    margin: 0;
    color: red;
    width: 220px;
    height: 120px;
    padding-top: 70px;
    float: left;
    font-size: 14px;
  }
  span {
    display: block;
  }
.userLeft{
    background:red;
}
body{
    margin:0;
}

JavaScript

$( window).mouseleave(function( event ) {
    $('div').addClass('userLeft');
 
});

$( window).mouseenter(function( event ) {
    $('div').removeClass('userLeft');
 
});