JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="box">
  <h2 id='name'> zxyzx </h2>
  <div id='innerbox'><h4 id='emptyInfo'></h4><div>
  <script>
	$('#innerbox').hide();
  </script>
</div>

CSS

#box {
    background-color: lightgrey;
    width: auto;
    padding: 25px 0 25px 0;    
    margin: 25px;
}
#emptyInfo{
	font-size: 150%;
}

#innerbox {
    background-color: white;
    width: auto;
    height: 30px;
	border-radius: 10px;
	border : 1px;
	border-style: solid;
    border-color: darkgrey;
}

JavaScript

$('#name').css('color','black');
$('#name').css('text-align','center');



$(document).ready(function () {
	var originalText = $('#name').text();
	var tOut;
    $("#box").hover(
		function () {	
			tOut = setTimeout(function(){
				$('#innerbox').show('slow',function(){
					$('#emptyInfo').fadeOut(400, function () {
						$(this).text('Welcome to my website').slideDown().css('text-align','center');
					});	
				});	
			},1000);		
			
		},
		function(){
			clearTimeout(tOut);
			$('#innerbox').hide('slow',function(){
				$('#emptyInfo').hide('slow');
			});		
		}
	);
});