JSFiddle - React, Tailwind, and code Playground

by sandeepan_nits

HTML

<div class="wrapper">
    <div class="body">
        <div>body  ascjbac ashcacbas</div>
        <div class="status">Status</div>
    </div>
    
</div>
<div class="bottom"><span class="content">bottom</span></div>

CSS

.body
{
    display: block;
    height: 219px;
     position: relative;
    float: left;
}

.wrapper
{
        border: 1px solid #555555;
     position: relative;
    float: left;
}

.bottom
{
    clear: left;
    display: block;
    height: 2px;
    position: relative;
    float: left;
}

.content
{
    display: block;
    position: relative;
    float: left;
}

JavaScript

$(document).ready(function()
  {
      
          
$(".bottom").mouseover(
  function () {
     $('.status').html("reached bottom");
  });
      
      
$(".bottom").mouseout(function () {
     $('.status').html("Status");
  }
);  
  
  
  }
 
                 
);