JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top_header_menu">
		<div id="main_menu_shadower_top"></div>

		<div id="main_menu_cage">
			<div id="main_menu" class="contents_cager">
				<ul class="clearfix">
					<li>
						<a href="/page/lazienda.html">
							L'Azienda
							<span>Scopri Blue Day srl</span>
						</a>
						<div class="main_menu_submenu">
							<ul class="clearfix">
								<li>
									<a href="/">La storia</a>
								</li>
								<li>
									<a href="/">Le persone</a>
								</li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</div>

		<div id="main_menu_shadower_bottom"></div>
	</div>

CSS

.clearfix:after { clear: both; display: block; content: " "; height: 0px; visibility: hidden; }
	.clearfix { display: inline-block; }
	/* Hide these rules from IE-mac \*/
	* html .clearfix { height: 1%; }
	.clearfix { display: block; }
	li.clearfix { display: list-item; }

    #top_header_menu { width: 100%; background: transparent none; height: 70px; }
	#main_menu_cage { width: 100%; background: none #E9E9E9; }
	#main_menu_cage, #main_menu li { height: 50px; }
	#main_menu_shadower_top { background: transparent url('/images/shadow_bg_up.png') center top no-repeat; height: 10px; width: 100%; }
	#main_menu_shadower_bottom { background: transparent url('/images/shadow_bg_down.png') center bottom no-repeat; height: 10px; width: 100%; position: relative; z-index: 11; }
	#main_menu { font-size: 14px; }
	#main_menu li { display: block; float: left; position: relative; color: #255B9A; }
	#main_menu li:hover { background: none #6092BB; color: #FFFFFF; text-decoration: none; }
	#main_menu li a { font-weight: bold; text-decoration: none; color: inherit; display: block; height: 100%; padding: 10px 6px 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; }
	#main_menu li a:hover { color: inherit; text-decoration: inherit; }
	#main_menu li a span { font-size: 12px; font-weight: normal; display: block; }
    #main_menu .main_menu_submenu ul { padding-left: 0; }
    #main_menu .main_menu_submenu { position: absolute; z-index: 10; padding: 10px 5px 5px; background: none #A2C9E9; border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; white-space: nowrap; }
	#main_menu .main_menu_submenu li { display: block; float: left; padding: 0 5px; border-left: 1px solid #255B9A; height: 20px; font-size: 14px; }
	#main_menu .main_menu_submenu li:hover { background: none transparent; color: inherit; text-decoration: inherit; }
	#main_menu .main_menu_submenu li:first-child { border-left:...