JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hedear">
	<div id="logo">Logo</div>
	<div id="logoright">Logoright</div>
</div>


<div id="menu">Menu</div>


<div id="feturedshell">
	<div id="fetured">fetured</div>
	<div id="feturedextra">feturedextra</div>
</div>


<div id="contendshell">
	<div id="content">Content</div>
	<div id="slidebar">Slidebar</div>
</div>


<div id="boxshell">
	<div id="fbox1">Fbox1</div>
	<div id="fbox2">Fbox2</div>
	<div id="fbox3">Fbox3</div>
	<div id="footerline">Footerline</div>
</div>

CSS

/*+clearfix {*/
#hedear:after, #boxshell:after, #contendshell:after, #feturedshell:after, #feturedshell:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	font-size: 0;
}
#hedear, #feturedshell, #boxshell, #contendshell, #feturedshell
{
	display: inline-block;
}
#hedear, #feturedshell, #boxshell, #contendshell, #feturedshell
{
	/*\*/
	display: block;
	/**/
	-height: 1px;
}
/*+}*/
#logo
{
	background-color: #D1D0C8;
	width: 300px;
	float: left;
	height: 105px;
}
/*[clearfix]*/#hedear
{
}
#footerline
{
	background-color: #646A52;
}
#fbox3
{
	background-color: #D1E09C;
}
#fbox2
{
	background-color: #D1E09C;
}
#fbox2
{
	background-color: #C9C8C5;
}
#fbox1
{
	background-color: #EFE1A8;
}
#slidebar
{
	background-color: #DCCE96;
	width: 300px;
	min-height: 700px;
	float: right;
}
#boxshell {
    width:900px
}
#content
{
	background-color: #97918B;
	width: 600px;
	min-height: 700px;
	float: left;
}
#feturedextra
{
	background-color: #C1A48B;
	width: 300px;
	height: 235px;
	float: right;
}
#fetured
{
	background-color: #A48662;
	height: 235px;
	width: 600px;
	float: left;
}
/*[clearfix]*/#feturedshell
{
    width:900px; // <------
        
}
#contendshell {
    width:900px;    

}
#menu
{
	background-color: #D38B35;
	height: 50px;
	width: 900px;
}
#logoright
{
	background-color: #D1D0C8;
	width: 900px;
	height: 105px;
}