JSFiddle - React, Tailwind, and code Playground

by Vladimir Novitsky

HTML

<!DOCTYPE html>

<html lang="ru-RU">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

        <title>Тест</title>
    </head>
    <body>
        <div id="middle">
            <section id="content">
                <h1>Content</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

                <h3>Browser Compatibility</h3>
<p>This Layout has been tested on the following browsers:</p>
<ul>
    <li>Firefox</li>
    <li>Safari</li>
    <li>Opera</li>
    <li>Chrome</li>
    <li>Explorer 5.5, 6, 7, 8, 9 &amp; 10</li>
</ul>
            </section>

            <aside id="sidebar">
                <h2>Sidebar</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
            </aside>

            <div id="stretcher"></div>
        </div>
    </body>
</html>

CSS

html,
body {
    height:100%;
    }
body {
    margin:0;
    padding:0;
    background-color:#e9e9e9;
    color:#000;
    }

#stretcher {
    position:absolute;
    right:0;
    bottom:0;
    z-index:0;
    width:35%;
    background-color:#e9e9e9;
    color:inherit;
}
html>body #stretcher {
    top:0;
    }
* html #stretcher {
    height:1000em;
    }

#middle {
    position:relative;
    z-index:4;
    overflow:hidden;
    width:100%;
    min-width:640px;
    min-height:100%;
    background-color:#fff;
    color:inherit;
    }
*html #middle {
    overflow:visible;
    height:100%;
    }

    #content {
        position:relative;
        z-index:1;
        float:left;
        padding:1.5em 2%;
        width:61%;
        }
    * html #content {
        width:60.8%;
        }
    *+html #content {
        width:60.8%;
        }

    #sidebar {
        position:relative;
        z-index:1;
        float:right;
        padding:1.5em 2%;
        width:31%;
        background-color:#e9e9e9;
        color:inherit;
        }

JavaScript

// html5shiv MIT @rem remysharp.com/html5-enabling-script
// iepp v1.6.2 MIT @jon_neal iecss.com/print-protector
/*@cc_on(function(m,c){var z="abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video";function n(d){for(var a=-1;++a<o;)d.createElement(i[a])}function p(d,a){for(var e=-1,b=d.length,j,q=[];++e<b;){j=d[e];if((a=j.media||a)!="screen")q.push(p(j.imports,a),j.cssText)}return q.join("")}var g=c.createElement("div");g.innerHTML="<z>i</z>";if(g.childNodes.length!==1){var i=z.split("|"),o=i.length,s=RegExp("(^|\\s)("+z+")",
"gi"),t=RegExp("<(/*)("+z+")","gi"),u=RegExp("(^|[^\\n]*?\\s)("+z+")([^\\n]*)({[\\n\\w\\W]*?})","gi"),r=c.createDocumentFragment(),k=c.documentElement;g=k.firstChild;var h=c.createElement("body"),l=c.createElement("style"),f;n(c);n(r);g.insertBefore(l,
g.firstChild);l.media="print";m.attachEvent("onbeforeprint",function(){var d=-1,a=p(c.styleSheets,"all"),e=[],b;for(f=f||c.body;(b=u.exec(a))!=null;)e.push((b[1]+b[2]+b[3]).replace(s,"$1.iepp_$2")+b[4]);for(l.styleSheet.cssText=e.join("\n");++d<o;){a=c.getElementsByTagName(i[d]);e=a.length;for(b=-1;++b<e;)if(a[b].className.indexOf("iepp_")<0)a[b].className+=" iepp_"+i[d]}r.appendChild(f);k.appendChild(h);h.className=f.className;h.innerHTML=f.innerHTML.replace(t,"<$1font")});m.attachEvent("onafterprint",
function(){h.innerHTML="";k.removeChild(h);k.appendChild(f);l.styleSheet.cssText=""})}})(this,document);@*/