JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<div class="stats_container">
<div id="show_stats1" class="stats">
    <h1>Strength:</h1>
    </div>
</div>

    
<div class="stat-1_info" style="visibility:hidden;">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium magna et velit dignissim, a placerat nisi rutrum. Vestibulum odio ipsum, rutrum a ex ac, fringilla fermentum ante. Donec nec elit molestie massa finibus pulvinar non nec lacus. Nullam ipsum nulla, sodales non ornare et, accumsan a sem. Donec tempus leo non laoreet viverra. Vestibulum ac nunc sem. Aenean vitae convallis velit, non molestie augue. Curabitur tristique eleifend mi, malesuada fringilla erat tristique imperdiet.
</div>

CSS

.stats_container {width:310px;padding:10px;margin-bottom:0px;}

.stats {width:300px;height:34px;margin:15px 0px -3px 0px;}

.stats h1 {text-align:left;}

.stats h2 {position:absolute;left:260px;margin-top:8px;width:50px;text-align:right;}

.stats h1 {display:inline-block;font-weight:400;color:#000;line-height:9.5pt;font-size:9.5pt;}

.stat-1_info {top:-50px;margin:0px;}

.stat-1_info {
    float:right;
    position:relative;
    left:0px;
    display:inline-block;
    width:380px;
    height:334px;
    background:red;
}

JavaScript

$(document).ready(function()
        {
$("#show_stats1 h1").mouseover(function() 
{ 
$(".stat-1_info").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1}, 200); 
});

$("#show_stats1 h1").mouseout(function() { $(".stat-1_info").css({opacity: 0.0, visibility: "hidden"}).animate({opacity: 1}, 200); });
});