JSFiddle - React, Tailwind, and code Playground

by Robert Barros

HTML

<div class="purchasing-tips">
    <div id="slender-trigger">nnnn</div> 
    <div id="slender"></div>
</div>

CSS

#slender-trigger {
background-color: #CCC;
height: 80px;
width: 40px;
margin-left: 70px;
margin-top: 50px;
position: absolute;
}
#slender {
font-family: 'Strait', sans-serif;
height: 400px;
width: 400px;
border: thin dotted #F00;
position: absolute;
margin-top: 100px;
display: none;	
}

JavaScript

$("#slender-trigger").on("mouseenter", function() {
	$("#slender").show();
}).on("mouseleave", function() {
	$("#slender").hide();
});