JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">

<header role="banner">
    <h1>Hide the sidebar!</h1>
    <a href="http://twitter.com/genelocklin" title="follow me for more awesome shit">by @genelocklin</a>
</header>   

    <nav role="navigation"></nav>
    
    <input type="checkbox" id="width_sidebar" role="button">
    <label for="width_sidebar" onclick=""><span>hide the sidebar</span><span>&raquo;</span><span>&laquo;</span></label>    

    <div role="main">    
        <article class="post">
            <h1 itemprop="headline">Hide the Sidebar!</h1>
            <p>Toggle the button to the right, to hide the sidebar.</p>
            <h2>The Pandorica Opens</h2>
            <p>Father Christmas. Santa Claus. Or as I've always known him: Jeff. I'm the Doctor. Well, they call me the Doctor. I don't know why. I call me the Doctor too. I still don't know why. I hate yogurt. It's just stuff with bits in. It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! I am the Doctor, and you are the Daleks!</p>
            <h3>Planet of the Dead</h3>
            <p>Aw, you're all Mr. Grumpy Face today. You've swallowed a planet! The way I see it, every life is a pile of good things and bad things.&hellip;hey.&hellip;the good things don't always soften the bad things; but vice-versa the bad things don't necessarily spoil the good things and make them unimportant. You hate me; you want to kill me! Well, go on! Kill me! KILL ME! Annihilate? No. No violence. I won't stand for it. Not now, not ever, do you understand me?! I'm the Doctor, the Oncoming Storm - and you basically meant beat them in a football match, didn't you? It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'!</p>
            <h4>The Waters of Mars</h4>
            <p>The way I see it, every life is a pile of good things and bad things.&hellip;hey.&hellip;the good things don't always soften the bad things; but vice-versa the bad things don't necessarily spoil the good things and make them unimportant....

SCSS

/*-------------------------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Bitter:400,700);

$dark:              #252525;
$blue:              #263347;
$white:             #f6f6f6;
$green:             #7db067;
$blueWhite:         #edeff4;
$backgroundImage:   url(http://f.cl.ly/items/0G3l1S3d0K39232G0p1W/generated.png) 0 0 repeat;

@mixin hidden         { display: none; visibility: hidden; }  
@mixin visible        { display: block; visibility: visible; }  
@mixin visuallyhidden { border: 0; 
                        clip: rect(0 0 0 0); 
                        height: 1px; width: 1px; 
                        margin: -1px; 
                        overflow: hidden; 
                        padding: 0; 
                        position: absolute; }
/*-------------------------------------------------------*/

* { 
    margin: 0; padding: 0; border: 0;
    -webkit-box-sizing: border-box; 
       -moz-box-sizing: border-box; 
            box-sizing: border-box; }

body { 
    font: { 
        family: 'Bitter', sans-serif;
        weight: normal;
        size: 100%;
    }
    line-height: 1.5em;    
    color: lighten($dark, 15%);
    background: $dark $backgroundImage;
    text-shadow: 0 -1px 0 rgba(255,255,255,.5);
}

h1, h2, h3, h4, h5, h6 { 
    font: {  
        family: 'Bitter', serif;
        weight: normal; 
    }
    color: darken($dark, 7.5%);
}
h1 { 
    font-size: 1.5em;
    line-height: 1em;
    margin: 1em 0;
}
h2, h3 { 
    font-size: 1.25em;
    line-height: 1.2em;
    margin: 1.2em 0;
}
h4, h5, h6 { 
    font-size: 1em;
    line-height: 1.5em;
    margin: 1.5em 0;
}
p { 
     margin: 0 0 1.5em 0;
     color: lighten($dark, 30%);
     -webkit-hyphens: auto;
        -moz-hyphens: auto;
         -ms-hyphens: auto;
          -o-hyphens: auto;
             hyphens: auto;
}

a { text-decoration: none; color: #fff; text-shadow: none; 
    &:hover { border-bottom: 2px solid; }
}

#wrap { 
    max-width: 960px;
    width:...

JavaScript

/*  

Simulating the default http://octopress.org/ theme. 

Empty onclick via: http://j.mp/yTrfqb
Github repo: http://j.mp/zargOi

Follow @genelocklin for more awesome shit. 

*/































// twitter
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");