JSFiddle - React, Tailwind, and code Playground

by johntrepreneur

HTML

<div id="wrapper">
    <div id="header">
        <h1>Two Equal Columns with Fixed Widths</h1>
        <h2>No Faux Images Needed</h2>    
    </div>
    <div id="innerwrap">
        <div id="inner">
            <div id="main">
                <h3>Main Content</h3>
                <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae dolor quis diam
                sodales sodales. Quisque massa leo, sagittis sed, rhoncus vitae, convallis nec, orci.
                Fusce lorem. Nullam ac dui. Mauris quis risus. Mauris volutpat. Ut sollicitudin magna
                ac arcu. Aliquam velit. Donec commodo tempus urna. Mauris mi purus, rutrum vel, aliquet
                ut, faucibus eget, purus. Phasellus tellus libero, iaculis ut, tempor malesuada,
                elementum et, urna. Proin vehicula viverra sapien. Integer eleifend, tortor et
                hendrerit vulputate, lectus enim pharetra risus, quis blandit nibh dui sed neque. Nunc
                nec odio vel odio porta fermentum. Sed quis arcu. Donec tristique scelerisque nibh. Nam
                lacinia libero a sem. Nunc volutpat, dui rutrum euismod sodales, ipsum dui accumsan
                libero, id consequat quam lorem vitae orci.
                </p>
                <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae dolor quis diam
                sodales sodales. Quisque massa leo, sagittis sed, rhoncus vitae, convallis nec, orci.
                Fusce lorem. Nullam ac dui. Mauris quis risus. Mauris volutpat. Ut sollicitudin magna
                ac arcu. Aliquam velit. Donec commodo tempus urna. Mauris mi purus, rutrum vel, aliquet
                ut, faucibus eget, purus. Phasellus tellus libero, iaculis ut, tempor malesuada,
                elementum et, urna. Proin vehicula viverra sapien. Integer eleifend, tortor et
                hendrerit vulputate, lectus enim pharetra risus, quis blandit nibh dui sed neque....

CSS

body{
    font:100% arial, trebuchet, tahoma;
    background:#BBB;
    margin:0;
    padding:0 0 20px;/*simulate bottom margin on wrapper for IE*/
}
html{overflow-y:scroll;} /*keep scrollbar position present in FF*/

/*==== Begin Layout Structure ===*/
#wrapper{
    width:900px;
    margin:0 auto 0;
    background:#BBB; /*Right Sidebar Color*/
}
#header{
    height:6em;
    text-align:center;
    font-family:georgia,"trebuchet ms";    
    margin-bottom:10px;   

    background: #EEFF99;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-top: 0;
    
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 0 0 10px 10px;
    
    -webkit-box-shadow: #666 0 2px 3px;
    -moz-box-shadow: #666 0 2px 3px;
    box-shadow: #666 0 2px 3px;
    
    background: url(bg-image.png) no-repeat #EBEBEB; /*non-CSS3 browsers will use this*/
    background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#EEFF99) to(#66EE33)); /*old webkit*/
    background: url(bg-image.png) no-repeat, -webkit-linear-gradient(#EEFF99, #66EE33); /*new webkit*/
    background: url(bg-image.png) no-repeat, -moz-linear-gradient(#EEFF99, #66EE33); /*gecko*/
    background: url(bg-image.png) no-repeat, -ms-linear-gradient(#EEFF99, #66EE33); /*IE10 preview*/
    background: url(bg-image.png) no-repeat, -o-linear-gradient(#EEFF99, #66EE33); /*opera 11.10+*/
    background: url(bg-image.png) no-repeat, linear-gradient(#EEFF99, #66EE33); /*future CSS3 browsers*/
    -pie-background: url(bg-image.png) no-repeat, linear-gradient(#EEFF99, #66EE33); /*PIE*/

    position:relative; /*needed for PIE to make CSS render property in IE6-8 (or compatibility mode)*/
    behavior: url(scripts/PIE-1.0.0/PIE.htc);
}
#innerwrap{
    min-height:0;/*IE7 haslayout/contain floats*/
    margin-right:200px;/*space for right column*/
}
* html #innerwrap{height:1%;}/*IE6 haslayout/contain floats*/

#innerwrap:after...