JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Random color</title>
	<link rel="stylesheet" type="text/css" href="basic.css">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="script.js"></script>
	
</head>
<body>
	<div class="container">
		<div class="title-text">RANDOM COLOR</div>
		<div class="workspace">
			<div class="square">
				
			</div>
		</div>
	</div>
	<div class="footer"></div>
</body>
</html>

CSS

body { 
	background-color:#696969;
}
.title-text {
	text-align: center;
	font-size: 50px;
	color:red;
	text-shadow: -4px 4px 5px #363636;
}
.square {
	width: 100px; height: 100px;
	float:left;
	background-color: white;
	color:white;
	text-align: center;
	font-size:20px;
	display: table;

}
.text{
	text-align: center;
	display: table-cell;
    vertical-align: middle;

}
.square:hover {
	box-shadow: 0px 0px 20px #F0FFF0 inset;
	text-align: center;
	vertical-align: middle;
	color:white;
}
.workspace {
	/*border: 3px solid #00FFFF;*/
	width: 800px; height: 1200px;
	background-color: white;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	box-shadow: -4px 4px 5px #363636;
}

JavaScript

var main=function(){
	var elementCount = ($('.workspace').width())*($(".workspace").height())/
		(Math.pow($('.square').width(),2));
		
	for (var i = 0; i < elementCount-1; i++) {
		$('<div>').addClass('square').appendTo('.workspace');
		
		
	}
	$('.square').mouseenter(function (e){
  	if(e.target===e.currentTarget){
			var color = colorGenerator();
			(this).style.backgroundColor=color;
			$(this).children('.text').remove();
			$('<div>').addClass('text').appendTo(this).text(color);
		}
	});
}
function colorGenerator(){
	var symbvols="0123456789ABCDEF";
	var color="#";
	for (var i = 0; i < 6; i++) {
		color+=symbvols[Math.round(Math.random()*15)];
	}
	return color;
}
$(document).ready(main);