JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div id="content">
    <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>
    </aside>
</div>

CSS

body {
    margin: 0;
    padding: 0;
    background: #aaa;
}
#content {
    margin: 50px auto;
    position: relative;
    width: 960px;
    background: rgb(255,255,255);
    background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 65%, rgba(225,225,225,1) 60%, rgba(246,246,246,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(60%,rgba(241,241,241,1)), color-stop(60%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 60%,rgba(225,225,225,1) 60%,rgba(246,246,246,1) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 60%,rgba(225,225,225,1) 60%,rgba(246,246,246,1) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 60%,rgba(225,225,225,1) 60%,rgba(246,246,246,1) 100%);
    background: linear-gradient(left, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 60%,rgba(225,225,225,1) 60%,rgba(246,246,246,1) 100%);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.35);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.35);
    -ms-box-shadow: 0 0 10px rgba(0,0,0,.35);
    -o-box-shadow: 0 0 10px rgba(0,0,0,.35);
    box-shadow: 0 0 10px rgba(0,0,0,.35);
}

section {
    padding: 2.5%;
    width: 55%;
}
aside {
    bottom: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 35%;
}
p {
    line-height: 24px;
    margin-bottom: 24px;
}

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