JSFiddle - React, Tailwind, and code Playground

by Dean_Wilson

HTML

<body>

<div id="header"><!-- begin header -->
    <h1>This is the header</h1>
</div><!-- end header -->

<div id="wrapper1"><!-- sets background to white and creates full length leftcol-->
    
    <div id="wrapper2"><!-- sets background to white and creates full length rightcol-->
    
        <div id="maincol"><!-- begin main content area -->
                
            <div id="leftcol"><!-- begin leftcol -->
                <p>This is the left column</p>
            </div><!-- end leftcol -->
                
            <div id="rightcol"><!-- begin rightcol -->
                <p>This is the right column</p>
            </div><!-- end righttcol -->
            
            <div id="centercol"><!-- begin centercol -->
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan  </p>
            </div><!-- end centercol -->
                
        </div><!-- end main content area -->
                
        <div id="footer"><!-- begin footer -->
            <p>This is the footer</p>
        </div><!-- end footer -->
    
    </div><!-- end wrapper1 -->

</div><!-- end wrapper2 -->
    
</body>
</html>

CSS

/* CSS Document */

body {
    background:#9343B9;
    text-align:center;
    margin:20px;
    padding:0;
    font:normal 0.8em/1.2em verdana,aria,sans-serif;
    color:#666;
    }
a {
    color:#FFF;
    text-decoration:none;
    border-bottom:1px dotted;
    }
a:hover {
    border-bottom:1px solid;
    color:#9343B9;
    }
#wrapper1 {
    position:relative;
    text-align:left;
    width:100%;
    background:#FFF url("../images/rightcolor_bg.gif") repeat-y top right;
    }
#wrapper2 {
    position:relative;
    text-align:left;
    width:100%;
    background:url("../images/leftcolor_bg.gif") repeat-y top left;
    }
#header {
    background:#BB62AB;
    padding:10px;
    margin:0;
    text-align:center;
    color:#FFF;
    }
#header h1 {
    font-size:200%;
    }
#header a:hover {
    color:#7A2875;
    }
#maincol {
    position:relative;
    margin:0;
    padding:10px;
    }
#leftcol { 
    position:relative;
    top:-10px;
    left:-10px;
    float:left;
    width:220px;  /* for IE5/WIN */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:200px; /* actual value */
    margin:0 0 -10px 0;
    padding:10px;
    background:#ECB9E8;
    z-index:100;
    }
#rightcol {
    position:relative;
    top:-10px;
    right:-10px;
    float:right;
    width:220px;  /* for IE5/WIN */
    voice-family: "\"}\"";
    voice-family:inherit;
    width:200px; /* actual value */
    margin:0 0 -10px 0;
    padding:10px;
    background:#D7C4FA;
    z-index:99;
    }
#centercol {
    position:relative;
    padding:0 240px;
    }
#centercol a {
    color:#666;
    }
#centercol a:hover {
    border-bottom:1px solid;
    color:#9343B9;
    }
#footer {
    position:relative;
    top:1px;
    background:#7A2875;
    width:100%;
    clear:both;
    margin:0;
    padding:1% 0;
    text-align:center;
    color:#CCC;
    }