JSFiddle - React, Tailwind, and code Playground

by surakrai

HTML

<div id="wrap">
    <div id="header"><h1>Simple 2 column CSS layout, final layout</h1></div>
    <div id="nav">
        <ul>
            <li><a href="/">Option 1</a></li>
            <li><a href="/">Option 2</a></li>
            <li><a href="/">Option 3</a></li>
            <li><a href="/">Option 4</a></li>
            <li><a href="/">Option 5</a></li>
        </ul>
    </div>
    <div id="main">
        <h2>Column 1</h2>
        <p><a href="/">456 Berea Street Home</a></p>
        <p><a href="/lab/developing_with_web_standards/csslayout/2-col/">Simple 2 column CSS layout</a></p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. Mauris risus nunc, tristique varius, gravida in, lacinia vel, elit. Nam ornare, felis non faucibus molestie, nulla augue adipiscing mauris, a nonummy diam ligula ut risus. Praesent varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        <p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce pulvinar lobortis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec semper ipsum et urna. Ut consequat neque vitae felis. Suspendisse dapibus, magna quis pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec ante in quam sollicitudin congue. Quisque congue egestas elit. Quisque viverra. Donec feugiat elementum est. Etiam vel lorem.</p>
        <p>Aenean tempor. Mauris tortor quam, elementum eu, convallis a, semper quis, purus. Cras at tortor in purus tincidunt tristique. In hac habitasse platea dictumst. Ut eu lectus eu metus molestie iaculis. In ornare. Donec at enim vel erat tempor congue. Nullam varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla feugiat hendrerit risus. Integer enim velit, gravida id, sollicitudin at, consequat sit amet, leo. Fusce imperdiet condimentum velit. Phasellus...

CSS

body,
    html {
        margin:0;
        padding:0;
        color:#000;
        background:#a7a09a;
    }
    #wrap {
        width:750px;
        margin:0 auto;
        background:#99c;
    }
    #header {
        padding:5px 10px;
        background:#ddd;
    }
    h1 {
        margin:0;
    }
    #nav {
        padding:5px 10px;
        background:#c99;
    }
    #nav ul {
        margin:0;
        padding:0;
        list-style:none;
    }
    #nav li {
        display:inline;
        margin:0;
        padding:0;
    }
    #main {
        float:left;
        width:480px;
        padding:10px;
        background:#9c9;
    }
    #main p{
    color: #eee;
    }
    h2 {
        margin:0 0 1em;
    }
    #sidebar {
        float:right;
        width:230px;
        padding:10px;
        background:#99c;
    }
    #footer {
        clear:both;
        padding:5px 10px;
        background:#cc9;
    }
    #footer p {
        margin:0;
    }
    * html #footer {
        height:1px;
    }