JSFiddle - React, Tailwind, and code Playground

by Fredy Sudhir

HTML

<div id="wrapper">
<!--Header-->
	<a href="index.html"><div id="headerContainer">
    	<div class="headerText">Test</div>
        <div class="headerLogo"><img src="images/header_logo.jpg" width="107" height="79"></div>
	</div></a>
<!--Header-->

<!--Menu-->
	<div id="menuWrapper">
		<div id="menuContainer">
        	<div class="menuItem" style="background-color:#80a13f;"><p class="menuItemText">Menu 1</p></div>
            <div class="menuItem" style="background-color:#6aa0d2; margin-left:2px;"><p class="menuItemText">Menu 2</p></div>
            <div class="menuItem" style="background-color:#e0922f; margin-left:2px;"><p class="menuItemText">Menu 3</p></div>
            <div class="menuItem" style="background-color:#3970b5; margin-left:2px;"><p class="menuItemText">Menu 4</p></div>
            <div class="menuItem" style="background-color:#97c363; margin-left:2px;"><p class="menuItemText">Menu 5</p></div>
            <div class="menuItem" style="background-color:#ca5f3d; margin-left:2px;"><p class="menuItemText">Menu 6</p></div>
        </div>
    </div>
<!--Menu-->
<div id="headerDivider"></div>

<div id="bodyContainer">
	<div id="sidebarLeft">wrgfwgr<br>wdfwdfvwdf<br>qwdegvqwedgfqwegfwrgfwgr<br>wdfwdfvwdf<br>qwdegvqwedgfqwegfwrgfwgr<br>wdfwdfvwdf<br>qwdegvqwedgfqwegfwrgfwgr<br>wdfwdfvwdf<br>qwdegvqwedgfqwegfwrgfwgr<br>wdfwdfvwdf<br>qwdegvqwedgfqwegfwrgfwgr<br>wdfwdfvwdf<br>qwdegvqwedgfqwegf</div>
	<div id="sidebarRight">wrgfwgr<br>wdfwdfvwdf<br>qwdegvqwedgfqwegfwrgfwgr<br>wdfwdfvwdf<br>qwdegvqwedgfqwegfwrgfwgr<br>wdfwdfvwdf<br>qwdegvqwedgfqwegfwrgfwgr<br>wdfwdfvwdf<br>qwdegvqwedgfqwegfwrgfwgr<br>wdfwdfvwdf<br>qwdegvqwedgfqwegfwrgfwgr<br>wdfwdfvwdf<br>qwdegvqwedgfqwegfwrgfwgr<br>wdfwdfvwdf<br>qwdegvqwedgfqwegf</div>
</div>

</div>

CSS

*{margin:0;paddding:0}

html, body { margin: 0; padding: 0; background-color: #CCC; }
#wrapper { margin:auto; width:100%; position:relative; background-color:#9CF; }

#headerContainer { height:100px; width:1024px; background-color:#FFF; top:0px; margin:auto; }
.headerText {  color:#000; font-size:18px; font-family: 'helveticaregular'; margin-top:70px; padding-right:30px; float:right; }
.headerLogo { height:80px; width:107px; float:left; margin-left:30px; top:4%; position:absolute; }

#menuWrapper { height:50px; width:1024px; background-color:#FFF; margin:auto; }
#menuContainer { height:50px; width:964px; background-color:#eaf5e8; margin-left:30px; float:left; }
.menuItem { width:159px; height:50px; float:left; }
.menuItemText { color:#FFF; font-size:12px; font-family: 'Conv_News Gothic Normal'; letter-spacing:.6px; padding:10px 0 0 0; text-align:center; }

#headerDivider { height:20px; width:1024px; background-color:#FFF; margin:auto; }

#bodyContainer { width:1024px; min-height:100px; margin:auto; background-color:#f4f3e7; padding-top:20px; position:relative; overflow:hidden; }

#sidebarLeft { height:100%; width:360px; background-color:#FFF; margin-left:30px; margin-bottom:20px; position:absolute; top:20px;left:0}
#sidebarRight { height:100%; width:634px; float:right; }

#bodyContainerBig { height:350px; width:764px; float:left; background-color:#FFF; }