JSFiddle - React, Tailwind, and code Playground

by Cal Francesco

HTML

<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>

CSS

/* --------- demo presentation------------ */
 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 {
    width:960px;
    margin:20px auto;
    position: absolute;
    left: 50%;
    transform:translateX(-50%);
    /* half the fixed width */
    transition: left 2s;
}
/* --------------------------------------- */

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

/* --------------------------------------- */
 #footer {
    clear:both;
}
@media (max-width: 720px) {
    #container {
        left:240px;
        transition: left 2s;
    }
}