JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Page heading Start - Static -->		
		<header>
			<div id="logo">
				<a href="index.html"><img src="images/logo.gif" alt="Everything Blinds Logo"></a>
			</div>
			<div id="phone">
				<img src="images/quote.png" alt="Phone Us on 0429 993 231">
			</div>
		</header>
		<!-- Page Header End -->
		<!-- Navigation Start -->
		<div id="navigation">			
			<ul id="ddmenu">
				<li><a href="index.html">Home</a></li>
				<li><a href="blinds.html">Product List</a>
					<ul>
						<li><a href="blinds.html#venetian">Venetian Blinds</a></li>
						<li><a href="blinds.html#roller">Roller Blinds</a></li>
						<li><a href="blinds.html#roman">Roman Blinds</a></li>
						<li><a href="blinds.html#vertical">Vertical Blinds</a></li>
						<li><a href="blinds.html#honeycomb">Honeycomb Blinds</a></li>
						<li><a href="blinds.html#awnings">Awnings</a></li>
						<li><a href="blinds.html#curtain">Curtain Tracks</a></li>
					</ul>
				</li>
				<li><a href="#">Services</a>
					<ul>
						<li><a href="services/cleaning.html">Cleaning</a></li>
						<li><a href="services/repairs.html">Repairs</a></li>
						<li><a href="services/installations.html">New Blinds</a></li>          
					</ul>
				</li>
				<li><a href="gallery.html">Gallery</a></li>
				<li><a href="contact.html">Contact Us</a></li>
			</ul>			
		</div>
		<!-- Navigation End -->
		<!-- Main Body Start -->
		<div id="main-content">									
			<div id="side-bar">
				<h3>Blinds</h3><br>
				<table id="sidebar">
					<tr id="sidebar">
						<td><img id="sidebarimg" src="images/photos/venetian_sample.gif" alt="venetian blind icon"></td>
						<td id="sidebar"><a href="blinds.html#venetian">Venetian Blinds</a></td>
					</tr>
					<tr id="sidebar">
						<td><img id="sidebarimg" src="images/photos/roller_sample.gif" alt="roller blind icon"></td>
						<td id="sidebar"><a href="blinds.html#roller">Roller Blinds</a></td>
					</tr>
					<tr id="sidebar">
						<td><img id="sidebarimg" src="images/photos/roman_sample.gif"...

CSS

/**********************************************
			 Containers 
**********************************************/
body  {
	background-color: #fff;
	/*background-image: url('images/background.gif');*/
	background-attachment: fixed;
}

header {	
	width: 70%;	
	max-height: 10%; 
	padding: 1% 15% 1% 15%;
	background: #185f96;
	clear: both;
	overflow: hidden;
	white-space: nowrap;
}

#logo {
	float: left;
	width: 70%;
}

#phone {	
	float: left;
	width: 30%;
}

#navigation { 
	background: rgba(109, 183, 229, 1);
	text-align: center;
	white-space: nowrap;
	display: block; 
	position: static;
	min-width: 96%;	
	height: 20px;
	padding: 0% 2% 0% 2%;
	clear: both;
	border-style: solid;
	border-color: #31679a;
	border-width: 0px 0px 2px 0px;
} 

#main-content {
	padding: 0% 15% 0% 15%;
	overflow: hidden;
	height: 620px;	
	clear: both;
	width: 70%;
	border-style: solid;
	border-color: #31679a;
	border-width: 0px 0px 2px 0px;
}

#side-bar {	
	float: left;	
	max-width: 28%;		
	height: 99%;
	/*background: rgba(188, 217, 242, 1);*/
	padding: 1% 1% 0% 1%;
	font-size: 14px;
}

#side-bar  td {
	font-size: 12px;
}

#container {
	float: left;
	max-width: 68%;
	height: 100%;
	/*background: rgba(188, 217, 242, 1);*/
	padding: 1% 1% 0% 1%;	
}

footer {
	width: 46%;
	padding: 1% 27% 1% 27%;
	text-align: center;
	background: #F0F0F0;
}  

#bottomnav {
	width: 100%;
	font-size: 0.625em;
	position: static;
}


#socialmedia {
}

#disclaimer {
	margin-top: 5%;
}

img.sidebarimg{
	height: 40px;
	width: 50px;
}

/**********************************************
			 Design Elements 
**********************************************/
alt {
	height: 10px;
	width: 10px;
}
tr#sidebar {
	height: 60px
}
td#sidebar {
	width: 200px;
}

hr {width: 80%}

p#phone {
	font-size: 0.75em;
	text-align: center;
}

p.body {
	text-align: justify;
	font-size: 14px;
}

h1 {
	font-size: 20px;
}

h3 {
	font-size: 16px;
}

ul {
	list-style-type: circle;
}
ul li#body{
	font-size: 14px;
	margin-left: 5%;
}

p#copyright...