JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="container"> <!--wrapper-->
	<header id="header">
    	<div id="menu" class="menu"> <!--navMenu-->
        	<ul>
                <li><a href="#" > HOME </a></li>
                <li>OUR PRODUCT
				<ul> 
					<li><a href="#" > PRODUCT OVERVIEW</a></li>
					<li><a href="#" > USAGE</a></li>
					<li><a href="#" > PRODUCT REVIEWS </a></li>
				</ul>
				</li>
				<li> SUGGESTIONS 
				<ul>
					<li><a href="#" > TIPS and IDEAS </a></li>
					<li><a href="#" > RECIPES </a></li>
					<li><a href="#" > SEND US YOUR IDEAS </a></li>
				</ul>
				</li>
				<li><a href="#" > ABOUT US </a> </li>
				<li><a href="#" > CONTACT US </a> </li>
        	</ul> 
			<br class="clearFloat" />
        </div>
</header>

<section id="content">
	<div class="reviews" id="reviews">
	<center>
	<table style="width:700px;">
		<tr>
			<th colspan="2" id="overview"> <h2> - PRODUCT REVIEW - </h2> <br />  <h5>Our customers love us </h5> </th>
		</tr>
		<tr>
			<td rowspan="2" > <img src="images/reviewID.jpg" /> </td>
			<td> <h3> Big Al 5000 </h3></td>
		</tr>
		<tr>
			<td> <p>There are some friends of mine who have a catering business that deals with private events, and they have had to make hemp/marijuana-based foods for their clients. They used cheesecloth for certain things like butter making, tea and even separating the plant from seeds. Let's just say it definitely works well for those purposes. I am not saying you should condone it, but it is an emerging culinary trade. The more it becomes legal, the more you will see this in even fine dining restaurants.</p></td>
		</tr>
		
		<tr>
			<td rowspan="2"> <img src="images/reviewID.jpg" /> </td>
			<td> <h3> Ari </h3></td>
		</tr>
		<tr>
			<td> <p>I love cheese, but it is getting quite expensive these days. I have found myself doing a lot more DIY projects, and now I can say I have successfully made my own cheese. Sharp cheddar to be exact. It may not have been the absolute best cheese I ever had, but it was very, very good...

CSS

/* sticky footer codes */


.fmenu, .push{
	height: 4em;
	clear:both;
}

/*ends here */

body {
	background: url(images/cheeseclothBG.jpg)no-repeat center center fixed;
	font-family: Avenir !important;
	font-size: 12pt;
	line-height: 20px;
	
	-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

}
#header {
	background: url(images/header.jpg) no-repeat;
	min-height: 270px;
	overflow: hidden;
	background-size: 100%;
}
#content {
	float: left;
	width: 100%;
	margin-top: -101px;
	background: #fff;
	
	position:relative;
}

	
#img {
	margin: 5px;
    padding: 5px;
    border: 1px solid #0000ff;
    height: auto;
    width: auto;
    float: left;
    text-align: center;
}
#img img{
	display: inline;
    margin: 5px;
    border: 1px solid #ffffff;
}

#desc{
	text-align: center;
	font-weight: normal;
	width: 120px;
	margin: 5px;
}


#container {
	width: 826px;
	margin: 0 auto;
	box-shadow: 0 0 5px 1px #ccc;
}

#menu{
	margin:0;
	padding:0;
}
#menu ul{
	margin:0;
	padding:0; 
	line-height:30px;
	margin-left:35px;
	margin-top: 139px;
}

#menu li{
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	position:relative;
	background:#fff;
}

#menu ul li a{
	text-align:center;
	font-family:"Comic Sans MS", cursive;
	font-size:12px;
	text-decoration:none;
	height:30px;
	width:150px;
	display:block;
	color:#000;
	margin-left:10px;
	text-shadow:1px 1px 1px #999;
}

#menu ul li{
	text-align:center;
	font-family:"Comic Sans MS", cursive;
	font-size:12px;
	text-decoration:none;
	height:30px;
	width:150px;
	display:block;
	color:#000;
	
	text-shadow:1px 1px 1px #999;
}

#menu ul li ul li a{
	text-align:center;
	margin-left:0px;
	
	
}

#menu ul li ul{
	margin-top:-5px;
}

#menu ul li ul li{
	margin-top:-2px;
	margin-left:-35px;
	position:relative;
	z-index:3px;
}
#menu ul ul{
	position:absolute;
	visibility:hidden;
	top:32px;
	z-index:10;
	
}

#menu ul li:hover...