JSFiddle - React, Tailwind, and code Playground

by Soren Romer Damby

HTML

<body>
<div id="wrapper">
	<div id="header">
    	<h1>Page title</h1>
        <h3>Subtitle</h3>
    </div>
    <div id="main">
    	<div class="content">This is the main area</div>
        <div class="sidebar">This is the sidebar</div>
    </div>
    <div id="footer">
    	The footer;
    </div>
</div>
</body>
</html>

CSS

body {
	margin: 0;
	padding: 0;
	background-color: #ff1;
}

#wrapper {
	width: 800px;
	margin: 0 auto;
}

#header {
	background-color: rgba(255,255,255,0.7);
}
	
#nav {
	background-color: rgba(255,255,255,0.7);
}

#main {
	background-color: rgba(255,255,255,0.7);
}

.content, .sidebar {
	float: left;
	padding: 20px;
}

.content {
	width: 510px;	
}

.sidebar {
	width: 210px;
}

#footer {
	background-color: rgba(255,255,255,0.7);
	clear:both;
}