JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
   <head>
      <title>Horizontal Menu</title>
      		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" /> 
			<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1,requiresActiveX=true" />
      <link href="style.css" rel="stylesheet" type="text/css" media="all" />
   </head>
	<body>
	<div id="header">
		<div id="logo">logo</div>
		<div id="logoright">logoright</div>
	</div>
	<div id="menu">menu</div>
	<div id="featuredshell">
		<div id="feautured">Feautured</div>
		<div id="feautured_extra">Feautured_extra</div>
	</div>
	<div id="content_shell">
		<div id="content">content</div>
		<div id="sidebar">sidebar</div>
	</div>
	<div id="box_shell">
		<div id="fbox1">fbox1</div>
		<div id="fbox2">fbox2</div>
		<div id="fbox3">fbox3</div>
	</div>
	<div id="fline">fline</div>
			 
	</body>
</html>

CSS

#header:after, #featuredshell:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	font-size: 0;
}
#header, #featuredshell
{
	display: inline-block;
}
#header, #featuredshell
{
/*\*/
	display: block;
/**/
	-height: 1px;
}
#logo {
background:#3a83b2;
width:300px;
height:90px;
float:left;
}
#logoright {
background:#c9bf20;
width:600px;
float:left;
height:90px;
}
#menu {
background:#a1104d;
height:50px;
width:900px;
}
#feautured {
background:#cb7519;
height:225px;
width:600px;
float:left;
}

#feautured_extra{
background:#19a3cb;
width:300px;
height:225px;
}
#content{
background:#7540a6;
}
#sidebar{
background:#d34532;
}
#fbox1{
background:#3579ea;
}
#fbox2{
background:#88b949;
}
#fbox3{
background:#169682;
}
#fline{
background:#eabf13;
}