JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div class="wrap">
    
    <div class="section-wrap">
        
        <section>
            <h3>Last of the Time Lords</h3>
            <p>You hit me with a cricket bat. 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. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong?</p>
            <p>You hit me with a cricket bat. 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. All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong?</p>
            <h4>The Rebel Flesh</h4>
            <p>All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? Heh-haa! Super squeaky bum time! You hit me with a cricket bat. *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You've swallowed a planet! I hate yogurt. It's just stuff with bits in.</p>
        </section><!-- /section -->
        
    </div><!-- /section-wrap -->
    
        <aside>
            <h3>Fear Her</h3>
            <p>You hit me with a cricket bat. I am the Doctor, and you are the Daleks! 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. Aw, you're all Mr. Grumpy Face today.</p>
            <h4>The Rebel Flesh</h4>
            <p>All I've got to do is pass as an ordinary human being. Simple. What could possibly go wrong? Heh-haa! Super squeaky bum time! You hit me with a cricket bat. *Insistently* Bow ties...

CSS

/* unrelated */
* { 
    margin: 0; 
    padding: 0; 
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
        -ms-box-sizing:border-box;
         -o-box-sizing:border-box;
            box-sizing:border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section { display: block; }

body { 
    font: 87.5%/1.5em sans-serif;
    color: #fff;
    background: #b2b0a6;
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}

p { 
    margin-bottom: 1.5em;
}

p:last-child { 
    margin-bottom: 0;
}

h3 {
    font-size: 1.5em;
    line-height: 1em;
    margin-bottom: 1em;
}

h4 {
    font-size: 1.25em;
    line-height: 1.2em;
    margin-bottom: 1.2em;
}

body {
    margin: 0 auto;
    max-width: 60em;
    padding: 0;
    width: 90%;
}

.wrap {
    background: #ee381d;
    overflow: hidden;
    margin: 3em auto;
    outline: 1px solid white;
}

.section-wrap {
    float: left;
    margin-right: -300px;
    width: 100%;
}

section {
    border-right: 300px solid #1d80ee;
    padding:1.5em;
}

aside {
    background: #1d80ee;
    float: right;
    padding: 1.5em;
    width: 300px;
}

@media all and (max-width: 40em) { 
    

    .section-wrap { 
        width: 100%;
        margin-right: 0;
        float: none;
    }
    
    section { 
        border-right: none;
        padding: 1.5em;
        /* this width: isn't strictly necessary */
        width: 100%;
    }
    
    aside { 
        width: 100%;
        max-width: 100%;
        padding: 1.5em;
    }
}