JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
	<h2 id="app_title">Historia Sesiones</h2>
	<div id="logo_container_div"></div>	
	<div id="app_form">
		<ul>
		<form id="user_login_history" action="." method="post">
			<div style="display:none"><input type="hidden" name="csrfmiddlewaretoken" value="Mu71Bb0F5sH5ml7DgVRICl48x3S3OE04"></div>
			
				<li class="label_cell"><label for="id_login_user_id">Usuario : </label></li>
				<li class="input_cell"><input type="text" name="login_user_id" id="id_login_user_id"></li>			
						
				<li class="label_cell"><label for="id_from_date">Fecha Desde: </label></li>
				<li class="input_cell"><input readonly="readonly" type="text" name="from_date" id="id_from_date" class="hasDatepicker"></li>			
						
				<li class="label_cell"><label for="id_to_date">Fecha Hasta: </label></li>
				<li class="input_cell"><input readonly="readonly" type="text" name="to_date" id="id_to_date" class="hasDatepicker"></li>			
			
			<div id="dynamic_table_holder"></div>
			<div class="spinner" id="spinner" style="display: none;"><img alt="spinner" src="/static_mimansa_apps//images/spinner.gif"></div>
			<input type="button" value="Submit" id="submit_button">
		</form>
		</ul>
		<table id="data_table"></table>
		<div id="dialog"></div>
	</div>

CSS

body, ul, li {
	font-size:14px; 
	font-family:Arial, Helvetica, sans-serif;
	line-height:21px;
	text-align:left;
}

body{background-color:#F4F4F4;}

#menu {
	list-style:none;
	width:90%;
	margin:30px auto 0px auto;
	height:43px;
	padding:0px 20px 0px 20px;

	/* Rounded Corners */
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;

	/* Background color and gradients */
	background: #000080;
	background: -moz-linear-gradient(top, #0272a7, #000080);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#000080));
	
	/* Borders */
	border: 2px solid #0A1B0A;
	-moz-box-shadow:inset 0px 0px 1px #edf9ff;
	-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
	box-shadow:inset 0px 0px 1px #edf9ff;
	behavior: url("/static_mimansa_apps/js/PIE.htc");
}

#menu li {
	float:left;
	display:block;
	text-align:center;
	position:relative;
	padding: 4px 10px 4px 10px;
	margin-right:30px;
	margin-top:7px;
	border:none;
}

#menu li:hover {
	border: 1px solid #777777;
	padding: 3px 9px 3px 9px;
	
	/* Background color and gradients */
	background: #F4F4F4;
	background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
	
	/* Rounded corners */
	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
	behavior: url("/static_mimansa_apps/js/PIE.htc");
}

#menu li a {
	color: #EEEEEE;
	display:block;
	outline:0;
	text-decoration:none;
	text-shadow: 1px 1px 1px #000;
	font-weight:bold;
}

#menu li:hover a {
	color:#161616;
	text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
	padding-right:21px;
	background:url("../images/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
	background:url("../images/drop.png") no-repeat right 7px;
}

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns {
	margin:4px auto;
	float:left;
	position:absolute;
	left:-999em; /* Hides the drop...