JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<article>
        <section>
            <p>Oh, I always feared he might run off like this. Why, why, why didn’t I break his legs? Meh. Spare me your space age technobabble, Attila the Hun! A true inspiration for the children. Hey, tell me something. You’ve got all this money. How come you always dress like you’re doing your laundry? Does anybody else feel jealous and aroused and worried?</p>
            <p>What are you hacking off? Is it my torso?! ‘It is!’ My precious torso! You won’t have time for sleeping, soldier, not with all the bed making you’ll be doing. I’ll tell them you went down prying the wedding ring off his cold, dead finger.</p>
            <p>Kif might! Oh dear! She’s stuck in an infinite loop, and he’s an idiot! Well, that’s love for you. It’s toe-tappingly tragic! Now, now. Perfectly symmetrical violence never solved anything. That’s not soon enough! I feel like I was mauled by Jesus.</p>
            <p>So I really am important? How I feel when I’m drunk is correct? Is that a cooking show? Shut up and take my money!</p>
            <p>Stop! Don’t shoot fire stick in space canoe! Cause explosive decompression! Uh, is the puppy mechanical in any way? A sexy mistake. Yes! In your face, Gandhi! Eeeee! Now say “nuclear wessels”! Kif, I have mated with a woman. Inform the men.</p>
        </section>

        <aside>
            <p>Oh, I always feared he might run off like this. Why, why, why didn’t I break his legs? Meh. Spare me your space age technobabble, Attila the Hun! A true inspiration for the children. Hey, tell me something. You’ve got all this money. How come you always dress like you’re doing your laundry? Does anybody else feel jealous and aroused and worried?</p>
            <p>What are you hacking off? Is it my torso?! ‘It is!’ My precious torso! You won’t have time for sleeping, soldier, not with all the bed making you’ll be doing. I’ll tell them you went down prying the wedding ring off his cold, dead finger.</p>
            <p>Kif...

CSS

* { 
    margin: 0; 
    padding: 0; 
    /* without box-sizing, 
       the section and aside ( in the media query ) would have to be set to width: 90%; 
       try removing this to see what happens */
    -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; }

html { font-size: 100%; }

body {
    font: 100%/1.5 Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans serif;
    color: #fff;
    margin: 0 auto;  
    background: #fff;
}

p {
    font-size: 75%;
    margin-bottom: 1.25em;
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
}

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

/* split code */
article {
    margin: 2em auto;
    position: relative;
    max-width: 60em;
    width: 90%;
    background: #a90329;
    /* use a gradient to create the illusion of a split layout */
    background: -moz-linear-gradient(left, #a90329 0%, #a90329 60%, #6d0019 60%, #6d0019 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a90329), color-stop(60%,#a90329), color-stop(60%,#6d0019), color-stop(100%,#6d0019));
    background: -webkit-linear-gradient(left, #a90329 0%,#a90329 60%,#6d0019 60%,#6d0019 100%);
    background: -o-linear-gradient(left, #a90329 0%,#a90329 60%,#6d0019 60%,#6d0019 100%);
    background: -ms-linear-gradient(left, #a90329 0%,#a90329 60%,#6d0019 60%,#6d0019 100%);
    background: linear-gradient(left, #a90329 0%,#a90329 60%,#6d0019 60%,#6d0019 100%);
    /* unrelated styling */
    -webkit-box-shadow: 2px 8px 10px rgba(0,0,0,.35);
       -moz-box-shadow: 2px 8px 10px rgba(0,0,0,.35);
        -ms-box-shadow: 2px 8px 10px rgba(0,0,0,.35);
         -o-box-shadow: 2px 8px 10px rgba(0,0,0,.35);
            box-shadow: 2px...