JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div id="wrap">
<h1>Kif Gets Knocked Up A Notch</h1>
<p>When the lights go out, it's nobody's business what goes on between two consenting adults. No! I want to live! There are still too many things I don't own! Is the Space Pope reptilian!? What are you hacking off? Is it my torso?! 'It is!' My precious torso!</p>
<h2>Space Pilot 3000</h2>
<p>Daddy Bender, we're hungry. They're like sex, except I'm having them! The key to victory is discipline, and that means a well made bed. You will practice until you can make your bed in your sleep.</p>
<h3>Put Your Head on my Shoulder</h3>
<p>We don't have a brig. You don't know how to do any of those. Ah, computer dating. It's like pimping, but you rarely have to use the phrase "upside your head."</p>
<h4>Leela's Homeworld</h4>
<p>Well, then good news! It's a suppository. Why not indeed! Meh. That's right, baby. I ain't your loverboy Flexo, the guy you love so much. You even love anyone pretending to be him! Large bet on myself in round one. Are you crazy? I can't swallow that.</p>
<h5>The Luck of the Fryrish</h5>
<p>Alright, let's mafia things up a bit. Joey, burn down the ship. Clamps, burn down the crew. I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense. File not found. It's just like the story of the grasshopper and the octopus. All year long, the grasshopper kept burying acorns for winter, while the octopus mooched off his girlfriend and watched TV. But then the winter came, and the grasshopper died, and the octopus ate all his acorns. Also he got a race car. Is any of this getting through to you?</p>
<h6>The Birdbot of Ice-Catraz</h6>
<p>Belligerent and numerous. Kif, I have mated with a woman. Inform the men. Leela's gonna kill me.</p>
<h1>Kif Gets Knocked Up A Notch</h1>
<p>When the lights go out, it's nobody's business what goes on between two consenting adults. No! I want to live! There are still too many things I don't own! Is the Space Pope reptilian!? What are you hacking off?...

CSS

/* unrelated */
* { margin: 0; padding: 0; }

html { 
    font-size: 100%; }

body { 
    font: 100%/1.5 sans-serif;
}
 
h1, h2 { font-size: 1.5em; line-height: 1em; margin-bottom: 2em; } 
h3, h4 { font-size: 1.25em; line-height: 1.2em; margin-bottom: 2.4em; } 
h4, h6 { font-size: 1em; line-height: 1.5em; margin-bottom: 1.5em; } 

p { margin-bottom: 1.5em; }

#wrap { 
    max-width: 600px; 
    width: 90%;
    margin: 3em auto;
}

/* depth code */
html::before { /* top */
    content: "";
    height: 10px;
    width: 100%;
    position: fixed;
    top: -10px;
    left: 0; 
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.65);
       -moz-box-shadow: 0 0 10px rgba(0,0,0,.65);
        -ms-box-shadow: 0 0 10px rgba(0,0,0,.65);
         -o-box-shadow: 0 0 10px rgba(0,0,0,.65);
            box-shadow: 0 0 10px rgba(0,0,0,.65);
}

html::after { /* bottom */ 
    content: "";
    height: 10px;
    width: 100%;
    position: fixed;
    bottom: -10px;
    left: 0; 
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.65);
       -moz-box-shadow: 0 0 10px rgba(0,0,0,.65);
        -ms-box-shadow: 0 0 10px rgba(0,0,0,.65);
         -o-box-shadow: 0 0 10px rgba(0,0,0,.65);
            box-shadow: 0 0 10px rgba(0,0,0,.65);
}

body::before {  /* left */
    content: "";
    height: 100%;
    width: 10px;
    position: fixed;
    top: 0px;
    left: -10px; 
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.65);
       -moz-box-shadow: 0 0 10px rgba(0,0,0,.65);
        -ms-box-shadow: 0 0 10px rgba(0,0,0,.65);
         -o-box-shadow: 0 0 10px rgba(0,0,0,.65);
            box-shadow: 0 0 10px rgba(0,0,0,.65);
}

body::after { 
    content: "";
    height: 100%;
    width: 10px;
    position: fixed;
    bottom: 0;
    right: -10px; 
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.65);
       -moz-box-shadow: 0 0 10px rgba(0,0,0,.65);
        -ms-box-shadow: 0 0 10px rgba(0,0,0,.65);
         -o-box-shadow: 0 0 10px rgba(0,0,0,.65);
            box-shadow: 0 0 10px rgba(0,0,0,.65);
}

JavaScript

// http://genelocklin.com/428-add-depth-to-your-webpage/