JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Lab3</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<!-- top_header -->
	<div id="top_header">
		<a href="#"><div id="logo_header"></div></a>
		<div id="search"><input type="search" placeholder="Search"></div>
	</div>
	<!-- end top_header -->

	<!-- header -->
	<div id="header">
		<div id="logo"></div>
		<div id="logo_title"></div>
		<div id="title">
			<p><strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vita tellus.</strong></p>
			<p>Sed velit leo, lobortis in, pellentesque eu, tempus et, tellus. Vestibulum nisi urna, rutrum id, auctor imperdiet, dictum at, nisiu dui dolor, congue eu lore consequat sollicitudin lorem.</p>
		</div>
		<a href="#">
		<button id="read_more" class="search"></button>
		</a>
	</div>
	<!-- end header -->
	
	<!-- menu -->
	<div id="menu">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Newsfeeds</a></li>
			<li><a href="#">&nbsp&nbsp&nbsp&nbspBlog</a></li>
			<li><a href="#">Links</a></li>
			<li><a href="#">Wrapper</a></li>
			<li><a href="#">Contacts</a></li>
		</ul>
	</div>
	<!-- end menu -->

	<!-- left sidebar -->
	<div id="main_menu">
		<div id="label_main_menu">
			<h1>Main menu</h1>
		</div>
		<div id="menu_left">
			<ul>
				<li><a href="#"><b>Home</b></a></li>
				<li><a href="#"><hr color="#e9e9e9" size="1px"><b>Joomla! License</b></hr></a></li>
				<li><a href="#"><hr color="#e9e9e9" size="1px"><b>The News</b></hr></a></li>
				<li><a href="#"><hr color="#e9e9e9" size="1px"><b>Blog</b></hr></a></li>
				<li><a href="#"><hr color="#e9e9e9" size="1px"><b>Contact Us</b></hr></a></li>
				<li><a href="#"><hr color="#e9e9e9" size="1px"><b>Search</b></hr></a></li>
				<li><a href="#"><hr color="#e9e9e9" size="1px"><b>News Feeds</b></hr></a></li>
			</ul>
		</div>
	</div>


	<div id="popular">
		<div...

CSS

body { margin-top: 20px; margin-right: auto; margin-left: auto; background: #151515; width: 881px; height: 100%; font-size:11px; line-height:20px; font-family: Tahoma, Arial;}
p {margin:0; }
h1 {color: white; font-size: 15px; margin-left: 45px;}
hr { color: #f8f8f8; margin: 0 15px 0 -25px;}

#top_header {width: 881px; height: 100px;}
#logo_header {display: inline-block; background: url(images/logo_header.png) no-repeat; width: 251px; height: 69px; clear: both;}
#search input {outline: none; margin-top: -40px; width: 150px; padding: 2px 2px 2px 10px; float: right; border: none; border-radius: 10px; box-shadow: inset 0 0 10px rgba(0,0,0,0.5)}
.search {cursor: pointer;}



#header {width: 881px; height: 275px; background: white; border-radius: 12px;}
#logo { height: 274px; margin-left: 20px; background: url(images/logo.png) no-repeat;}
#logo_title { width: 237px; height: 86px; background: url(images/logo_title.png) no-repeat; margin: -230px 0px 0px 410px;}
#title { margin: 4px 100px 0px 0px; float: right; width: 370px;}
#read_more { outline: none; display: block; border: none; background: url(images/read_more2.png) no-repeat; width: 93px; height: 23px; border-radius: 15px; margin: 100px -370px 0px 0px; float: right;}
#read_more:hover {background: url(images/read_more.png) no-repeat; outline: none;}


#menu { margin-top: 10px; background: url(images/menu.png) no-repeat; height:52px; clear:both; padding-top:15px; }
#menu ul { margin:0; padding:0; font-size: 12px;}
#menu ul li{ display:block; float:left; width:85px; list-style:none; text-align:center; color: white;}
#menu a { display:block; float:left; width:85px; font-size:12px; text-decoration:none; color:#FFFFFF; font-weight:bold }
#menu a:hover {color:#68d3ed;}

#main_menu {background: white; float: left; width: 188px; height: 216px; border-radius: 12px; clear: both;}
#label_main_menu {background: url(images/label_main_menu.png) no-repeat; float: left; width: 186px; height: 41px; margin: 1px 0 0 1px; }
#menu_left...