JSFiddle - React, Tailwind, and code Playground

by lupos

HTML

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css">
<div class="header">
    <div class="logo"></div>
</div>
<div class="content">
    <div class="column leftColumn">
        <div class="posts">
            <article class="post">
                <h1>Example headline here. Make sure it's long enough to go at least 2 lines so we know how it looks.</h1>
                <div class="meta">
                    <a class="date" href="#">5/5/2014 10:39 AM ET</a>
                    <span class="divide">|</span>
                    File under:
                    <a class="tag" href="#">Zportz</a>
                    &#8226;
                    <a class="tag" href="#">Food</a>
                    &#8226;
                    <a class="tag" href="#">GIFs</a>
                </div>
                <div class="hero">
                    <iframe src="//embed.gettyimages.com/embed/488248287?et=lXIMcaVcSqFO3txdc8k0aw&SeoLinks=on&sig=SF6Z0JLf2ZePIksZJXdGNQyPbLn4u2uGN9u3fR1TpAI=" width="398" height="657" scrolling="no" frameborder="0" style="display:inline-block;"></iframe>
                </div>
                <div class="body">
                    <p>Lorizzle ipsum dolor sit i saw beyonces tizzles and my pizzle went crizzle, consectetizzle adipiscing elit. Mofo owned velizzle, you son of a bizzle volutpat, suscipizzle quis, shut the shizzle up vizzle, arcu. Phat pizzle dawg. Sed break yo neck, yall. Bling bling shizznit its fo rizzle dapibus bizzle gangster for sure. Mauris pellentesque nibh izzle for sure.</p><p>Ass in tortor. Rizzle eleifend rhoncizzle nisi. Sheezy rizzle habitasse platea dictumst. Sizzle dapibizzle. Curabitizzle stuff urna, break it down eu, mattizzle ac, gangsta vitae, crackalackin. Gangster suscipizzle. Integizzle shizzle my nizzle crocodizzle break it down sizzle purus.</p>
                </div>
            </article>
            <article class="post">
                <h1>Another shorter headline.</h1>
               ...

SCSS

$siteMaxWidth: 960px;
$headerBackgroundColor: #000000;
$headerHeight: 200px;
$headerOverflow: 75px;
$leftColumn: 60%;
$rightColumn: 100% - $leftColumn;
$rightColumnInnerLeft: 40%;
$rightColumnInnerRight: 60;
$linkColor: #5f5f5f;
$tagColor: #ad275e;
$postBackgroundColor: #fff;
$imageBorderColor: gray;
$centerModuleHeaderBackgroundColor: #000;
$centerModuleHeaderColor: wheat;
$centerModuleBorderColor: black;

* {
    box-sizing: border-box;
}
%repeated {
    margin-top: 5px;
    margin-bottom: 0;
    &:first-child{
        margin-top: 0;
    }
}
p{
    @extend %repeated; 
}
body{
    padding:0;
    margin:0;
    background: wheat;
}
a{
    text-decoration: none;
    color: $linkColor;
    &:hover{
        text-decoration: underline;
    }
}
.header{
    width: 100%;
    height: $headerHeight + $headerOverflow;
    background-color: $headerBackgroundColor;
    .logo{
        width: 100%;
        height: $headerHeight;
        max-width: $siteMaxWidth;
        line-height: $headerHeight;
        text-align: center;
        vertical-align: middle;
        color: white;
        margin: 0 auto;
        //background-image: url('http://drive.google.com/uc?export=view&id=0Bwjrt1NxP690dHF0R2hFaXhVWXM');
        //background-image: url('http://drive.google.com/uc?export=view&id=0Bwjrt1NxP690RHFrUERaeU9CMjQ');
        //background-image: url('http://drive.google.com/uc?export=view&id=0Bwjrt1NxP690RVhjQkhMd0ZERWs');
        background-image: url('http://drive.google.com/uc?export=view&id=0Bwjrt1NxP690T19UQmNxbUpEMEk');
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
    }
}
.content {
    width: 100%;
    max-width: $siteMaxWidth;
    background: white;
    margin: -($headerOverflow) auto 0 auto;
    overflow: hidden;
    box-shadow: 0px 0 10px black;
}
.column{
    float: left;
}
.leftColumn {
    padding: 10px;
    width: $leftColumn;
}
.rightColumn {
    padding: 10px 10px 10px 0px;
    width:...