JSFiddle - React, Tailwind, and code Playground

by Actticus

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="_css/css-mn2.css" type="text/css" media="screen, projection" />
</head>
<body>
<header> </header>
<section id="middle">
  <aside id="sideleft"> </aside>
  <div id="container">
    <div id="content"> </div>
  </div>
</section>
<footer>
  <div id="subfooter">
    <div id="block-1"><a href="#" title="#"></a></div>
    <div id="block-2"><a href="#" title="#"></a></div>
    <div id="block-3"><a href="#" title="#"></a></div>
    <nav  id="footer_menu">
      <ul>
        <li><a href="#" title="Home">Home</a></li>
        <li><a href="#" title="About">About</a></li>
        <li><a href="#" title="Blog">Blog</a></li>
        <li><a href="#" title="Portfolio">Portfolio</a></li>
      </ul>
    </nav>
    <address id="copyright">
    &copy; 2011 <strong>Art-Vik</strong> All Rights Reserved.
    </address>
  </div>
</footer>
</body>
</html>

CSS

/* CSS Document */
@charset "utf-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    margin:0;
    padding:0;
}
html, body {
    width: 100%;
    height: 100%;
}
body {
    font:12px/18px Arial, Tahoma, Verdana, sans-serif;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    position: relative;
}
ol, ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
:focus {
    outline:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
header, nav, section, article, aside, footer {
    display:block;
}
a, a:active, a:hover, a:focus {
    color:blue;
    outline:none;
    text-decoration:none;
}
p {
    margin:0 0 18px;
}
img {
    border:none;
}
input {
    vertical-align:middle;
}
ins, del {
    text-decoration:none;
}
/* Header
-----------------------------------------------------------------------------*/
header {
    height: 3em;
    width: 100%;
    position: absolute;
    z-index:3;
    top:1em;
    background:#000;
    /*background:url(../_images/black-60.png) center;*/
}
/* Footer
-----------------------------------------------------------------------------*/
footer {
    height: 3em;
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index:3;
    bottom:1em;
    background:#000;
    /*background:url(../_images/black-60.png) center;*/
}
#subfooter {
    display:block;
    width:80%;
    height: 3em;
    overflow:hidden;
    margin:0 auto;
}
#footer_menu ul {
    display:block;
    height:auto;
    margin:1px 0 0 0;
    width:50%;
    text-align:righ;
    text-shadow:0 -1px 0 #555;
}
#footer_menu li {
   ...