JSFiddle - React, Tailwind, and code Playground

by icntfan

HTML

<!DOCTYPE html>
<html>
<head>
  <style>
div.out { width:40%; height:120px; margin:0 15px;
          background-color:#D6EDFC; float:left; }
div.in {  width:60%; height:60%; 
          background-color:#FFCC00; margin:10px auto; }
p { line-height:1em; margin:0; padding:0; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<div class="out overout">
  <span>fareyi buraya getirin</span>
  <div class="in">
  </div>
</div>

<div class="out enterleave">
  <span>fareyi buraya getirin</span>
  <div class="in">
  </div>
</div>

<script>
  var i = 0;
  $("div.overout").mouseover(function() {
    i += 1;
    $(this).find("span").text( "mouse over x " + i );
  }).mouseout(function(){
    $(this).find("span").text("mouse out ");
  });

  var n = 0;
  $("div.enterleave").mouseenter(function() {
    n += 1;
    $(this).find("span").text( "mouse enter x " + n );
  }).mouseleave(function() {
    $(this).find("span").text("mouse leave");
  });

</script>

</body>
</html>