JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
<head>
<title>22</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
     $(document).ready(function(){
	     $('#box1uitleg').hide();
	 })
	 $(document).ready(function(){
	     $('#box1').mouseenter(function(){
		     $('#box1uitleg').fadeIn();
		 })
	 })
</script>
</head>
<body>
<div id="boxes">
     <div id="box1">
	 
	 </div>
	 <div id="box1">
	 
	 </div>
	 <div id="box1">
	 
	 </div>
	 <div id="box1">
	 
	 </div>
	 <div id="box1">
	 
	 </div>
	 <div id="box1">
	 
	 </div>
	 <div id="box1uitleg">
	     Waarom komt deze tekst gewoon niet in de box?
	 </div>
</div>
</body>
</html>

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 }
body {
margin: 0;
}
p {
margin: 0;
}
#boxes {
margin: 0;
height: 400px;
width: 100%;
position: relative;
float: left;
}
#box1 {
background: #109ed1;
width: 16.6%;
height: 100px;
float: left;
}
#box1uitleg {
margin-top: 0px;
background: #000;
color:#fff;
height: 100px;
width: 16.6%;
position:absolute;
z-index: 2;
top:0;
opacity: 0.6
}