JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<section class="moe-layout moe-layout-2-1-3">
            <header>
                <p>A header</p>
            </header>
            <section>
                <section>
                    <h1>Fun with CSS3: Flexible Box Layout Module</h1>
                    <p><a href="/static/labs/css/flexbox/1_col.html" title="Flexible Box Layout Module: 1 column layout">1 column</a></p>
                    <p><a href="/static/labs/css/flexbox/2_cols.html" title="Flexible Box Layout Module: 2 columns layout">2 columns</a></p>
                    <p><a href="/static/labs/css/flexbox/3_cols.html" title="Flexible Box Layout Module: 3 columns layout">3 columns</a></p>
                    <p><a href="/static/labs/css/flexbox/_layout.css" title="Flexible Box Layout Module: CSS source">layout.css</a></p>
                </section>
                <aside>
                    <p>A sidebar</p>
                </aside>
                <aside>
                    <p>Another sidebar</p>
                </aside>
            </section>
            <footer>
                <p>A footer</p>
            </footer>
        </section>

CSS

body {
    font-family: 'Droid Sans', 'Lucida Sans Unicode', 'Lucida Grande', Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 160%;
}

/* sidebar widths */
section.moe-layout > section > aside:nth-of-type(1) {
    width: 200px;
}
section.moe-layout > section > aside:nth-of-type(2) {
    width: 300px;
}

/* colors */
header,
footer {
    background: #CCCCCC;
}
section.moe-layout > section > section {
    background: #FFCC00;
}
section.moe-layout > section > aside:nth-of-type(1) {
    background: #3399FF;
}
section.moe-layout > section > aside:nth-of-type(2) {
    background: #FF3366;
}
a:link, a:visited {
    color: #003399;
}
a:hover, a:active {
    color: #000000;
}

/* paddings */
header,
footer,
section.moe-layout > section > section,
section.moe-layout > section > aside:nth-of-type(1),
section.moe-layout > section > aside:nth-of-type(2) {
    padding: 20px;
}
p {
    padding: 0;
    margin: 0 0 1em;
}


/*
Moe's HTML5/CSS3 layout scheme
==============================
This layout is based on the Flexible Box Layout Module:

    http://www.w3.org/TR/css3-flexbox/

Which browsers support it?

    http://caniuse.com/#feat=flexbox

Main features are:

- 1 to 3 columns (more can be added as needed).
- Source order independence: displays columns in any order.
- Fluid or fixed layout width.
- Fluid content, fixed-width columns.
- 100% height columns.
- Elastic height for all elements.
- Complete control over column widths.
- Complete control over column gutters.
- Minimal markup and CSS classes.

Base markup is the following:

    <section class="moe-layout moe-layout-2-1-3">
        <header>
            A header
        </header>
        <section>
            <section>
                Main content
            </section>
            <aside>
                A sidebar
            </aside>
            <aside>
                Another sidebar
            </aside>
        </section>
        <footer>
            A footer
        </footer>
   ...