JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="page">
    <header>
        <h1>CSS3 Flexible box model</h1>
    </header>
    <div id="main">
        <section id="content">
            <article>
                <h2>Positioning Articles</h2>
                <p>The articles above are vertically displayed following the HTML order.</p>
            </article>
            <article>
                <h2>Positioning Form Fields</h2>
                <p>All the form fields are displayed without any float property. It make the forms layouts easier to build and much more consistant.</p>
            </article>
            <article class="topgroup">
                <h2>Article Always On Top</h2>
                <p>This article is always placed on top by using a simple class declaration. Its positionning is not locked to the HTML flow, it only depend on the author wish. The same technique is used to highlight a link on the sidebar.</p>
            </article>
            <article>
                <h2>Browser Compliance</h2>
                <p>This page will be correctly render with Firefox, Safari, chrome and any browser which use the Gecko or Webkit rendering engine.</p>
            </article>
            <article>
                <h2>Positioning Footer</h2>
                <p>The flexible box model is ideal to solve a common problem in webdesign : to stick the footer on the bottom of the page if there is not enough content (you need a big screen to check this out).</p>
            </article>
            
            <nav>
                <a href="#">Next Page</a>
                <a href="#">Previous Page</a>
            </nav>
        </section>
        <section id="sidebar">
            <div>
                <h2><label for="recherche">Search</label></h2>
                <form action="#">
                    <input type="text" id="recherche" />
                    <input type="submit" value="Go" />
                </form>
            </div>
            
            <div>
                <h2>Links</h2>
             ...

CSS

html, body{
    padding : 0;
    margin : 0;
    height : 100%;
    width : 100%
}

body{
    font : 0.8em Arial, Helvetica, sans-serif;
    line-height : 1.4em;
    background: #eaedf2;
    
    display : -moz-box;
    display : -webkit-box;
    display : box;
    
    -moz-box-orient : horizontal;
    -moz-box-pack : center;
    
    -webkit-box-orient : horizontal;
    -webkit-box-pack : center;
    
    box-orient : horizontal;
    box-pack : center;
}

section{
    display : block;
}

#page{
    height : 100%;
    max-width : 960px;
    
    display : -moz-box;
    display : -webkit-box;
    display : box;
    
    -moz-box-orient : vertical;
    -moz-box-flex : 1;
    
    -webkit-box-orient : vertical;
    -webkit-box-flex : 1;
    
    box-orient : vertical;
    box-flex : 1;
}

header{
    display : block;
    padding : 3px;
    background: #192832;
    margin-bottom : 10px;
    color: #ddd;
}

footer{
    display : block;
    padding : 3px;
    margin-top : 10px;
}
footer li {
    float: left;
    display: inline-block;
    height: 30px;
    padding: 0 20px 0 0;
}
footer li:first-child {
    padding-left: 5px;
}
footer li:last-child {
padding: 0;
}
footer p{
    margin-top : 0;
}

#main{
    display : -moz-box;
    display : -webkit-box;
    display : box;
    
    -moz-box-flex : 1;
    -moz-box-orient : horizontal;
    -moz-box-direction : reverse;
    
    -webkit-box-flex : 1;
    -webkit-box-orient : horizontal;
    -webkit-box-direction : reverse;
    
    box-flex : 1;
    box-orient : horizontal;
    box-direction : reverse;
}

#content{
    padding : 0 20px 10px 10px;
    -moz-box-shadow: 0 2px 3px #8e949c;
    -webkit-box-shadow: 0 2px 3px #8e949c;
    background: #fff;
    box-shadow: 0 2px 3px #8e949c;
    
    display : -moz-box;
    display : -webkit-box;
    display : box;

    -moz-box-flex : 1;
    -moz-box-orient : vertical;
    -moz-box-direction : normal;
    
    -webkit-box-flex : 1;
    -webkit-box-orient : vertical;
   ...