JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div id="container">
	<p>#container {width: 960px; margin: 0 auto;}</p>
	<div id="header">
		<p>Header: No css needed</p>
	</div>
	
	<div id="primary">
		<p>Primary Sidebar</p>
		<pre>#primary {
float:left;
width:240px;
}
</pre>
	</div>
	
	<div id="content">
		<p>Main content</p>
		<pre>#content {
float:left;
width:480px;
}
	</pre>
	</div>
	
	<div id="secondary">
		<p>Secondary Sidebar</p>
		<pre>#secondary {
float:left;
width:240px;
}
</pre>
	</div>
	
	<div id="footer">
		<p>Footer: #footer {clear:both;}</p>
	</div>
	
	<ul id="demo-nav">
		<li><a href="http://www.vanseodesign.com/css/3-column-layout-code/">Back to Post</a></li>
		<li><a href="index.php">Primary-Main-Secondary</a></li>
		<li><a href="secondary-main-primary.php">Secondary-Main-Primary</a></li>
		<li><a href="main-secondary-primary.php">Main-Secondary-Primary</a></li>
		<li><a href="primary-secondary-main.php">Primary-Secondary-Main</a></li>
		<li><a href="secondary-primary-main.php">Secondary-Primary-Main</a></li>
		<li><a href="main-primary-secondary.php">Main-Primary-Secondary</a></li>
	</ul>

</div>

</body>

CSS

body {font: normal 16px/1.5em helvetica, aria, sans-serif; text-align: center;}
#demo-nav {width: 200px; margin: 10px auto; list-style: none; overflow: hidden}
#header, #footer {padding:5px; height: 50px; background: #777; color:#fff}
#primary, #content, #secondary {height: 300px; padding: 50px 0}
#primary p, #content p, #secondary p {font-weight: bold}
#primary {background:#eee;}
#content {background:#ccc;}
#secondary {background:#ddd;}
pre {text-align: left; margin:20px auto; width:100px}
/* --------------------------------------- */



/* ----- set width and center layout ----- */
#container {
	position: absolute;
	left: 50%;
	width:960px;
	margin-left: -480px;
	margin-top: 20px;
	margin-bottom: 20px;
	-webkit-transition: margin-left 1s ease-in-out;
    -moz-transition: margin-left 1s ease-in-out;
    -o-transition: margin-left 1s ease-in-out;
    transition: margin-left 1s ease-in-out;
}
/* --------------------------------------- */




/* ----------- float columns ------------- */
#primary {
	float:left;
	width:240px;
}

#content {
	float:left;
	width:480px;
}

#secondary {
	float:left;
	width:240px;
}
/* --------------------------------------- */




/* --------------------------------------- */
#footer {
	clear:both;
}
/* --------------------------------------- */

@media (max-width : 960px) {

	#container {
		left: 460px;
		margin-left: -700px;
	}

}