JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="page">
    <header>
        <h1>The CSS3 Flexible box model in action</h1>
        <p>This demo show a web site layout fully made thanks to this new box model.</p>
    </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" />
               ...

CSS

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

body{
    font : 0.8em Arial, Helvetica, sans-serif;
    line-height : 1.4em;
    
    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 : 800px;
    
    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 : 10px;
    background : #EFEFEF;
    margin-bottom : 20px;
    
    -moz-border-radius : 0 0 10px 10px;
    -webkit-border-radius : 0 0 10px 10px;
    border-radius : 0 0 10px 10px;
}

footer{
    display : block;
    padding : 10px;
    background : #EFEFEF;
    text-align : center;
    margin-top : 20px;
    
    -moz-border-radius : 10px 10px 0 0 ;
    -webkit-border-radius : 10px 10px 0 0 ;
    border-radius : 10px 10px 0 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;
    
    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;
    -webkit-box-direction : normal;
    
    box-flex : 1;
    box-orient :...