JSFiddle - React, Tailwind, and code Playground
HTML
<div><a href="#" id="link" title="click me">click me</a></div>
<div id="component_statsbox">
<div id="component_statsbox_helper" class="hidden">
<img alt="stats" src="http://www.esus.be/stats.png"></img>
<div class="stats_inner">
Date of birth: <span class="stats_inner_text">test</span><br/>
Time of birth: <span class="stats_inner_text">test</span><br/>
Place of birth: <span class="stats_inner_text">test2</span><br/>
Weight: <span class="stats_inner_text">test3</span><br/>
Height: <span class="stats_inner_text">test4</span><br/>
Mother: <span class="stats_inner_text">test5</span><br/>
Father: <span class="stats_inner_text">test6</span><br/>
</div>
</div>
</div>
CSS
.hidden {
display:none;
}
.stats_inner {
position: absolute;
top: 160px;
left: -160px;
width: 100%;
text-align:center;
line-height: 1.3em;
/* for fading in ie */
filter:inherit;
}
.stats_inner_text {
font-size: 12px;
font-family: Helvetica;
color: black;
font-weight: bold;
}
JavaScript
jQuery(document).ready(function(){
jQuery('#link').click(function(){
jQuery('#component_statsbox_helper').fadeTo(3500, '1');
});
});