JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<section>
    
<h1>Happy Birthday!</h1>

<h2>Mama<wbr/>/Blendo<wbr/>/Blando<wbr/>/Flandy<wbr/>/Flanders</h2>

<p>Hey there, Mama/Blendo/Blando/Flandy/Flanders and all other manner of bizarre-o things we, your beloved children, have nicknamed you over the years!</p>

<h4>HAPPY FRICKING BIRTHDAY!</h4>

<p>You are one day older. This whole "year" things seems so arbitrary. But still...it's an occasion to be celebrated.</h4>

<p>We love you more than words can say. And while email is a pathetic means to communicate the depth of our love, respect, and admiration for you, with all of us in three different time zones, it is the best we can do for now. So since we can't tell you face-to-face, we'll take a minute to tell you, in zeros and ones, why you mean so much to us...in a few silly sentences composed jointly from Cambridge and Los Angeles. So without further ado, here is a list of:</p>

<h3>The Top Ten Reasons Blandy is The Best Mom in The World, and Perhaps The Universe!</h3>

<h4>Number 10a</h4>

<p>Home cooked food—SERIOUSLY—'nuff said.</p>

<h4>Number 10b</h4>

<p>No, really. Have you tried this stuff? It's like the food equivalent of a soft blanket or warm hug—comforting, delightful to the senses, and nourishes the body and spirit. So basically, Best Food EVER. And no one even taught her how to cook. WTF? This woman's key lime pies are like crack cocaine. If word got out on the streets about these things, gang wars would ensue. The Bloods and Crips would be slinging this stuff so fast the price of limes would surely skyrocket due to increased demand. Ok, I think we've covered the "food" category quite thoroughly.</p>

<h4>Number 9</h4>

<p>She used to dress us for school in our beds under the covers, while we blissfully remained in some sort of fugue state, just so we could get a few extra minutes of rest. Maybe we got to school and had no clue what we were wearing, but still—pretty awesome.</p>

<h4>Number 8</h4>

<p>She supports our dreams and always...

CSS

</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url(http://fonts.googleapis.com/css?family=Lobster|Open+Sans:400italic,400,300,600);

::-webkit-scrollbar {
    width: .7rem;
}

::-webkit-scrollbar-thumb {
    background: #D93C82;
}

::-webkit-scrollbar-track {
    background: rgba(255,255,255,.1);
}
::-webkit-scrollbar-corner {
    background: #D93C82;
}

* {
    margin: 0;
}


/*
@media (min-width: 20px) { html { font-size: 1.5625% } }
@media (min-width: 40px) { html { font-size: 3.125% } }
@media (min-width: 60px) { html { font-size: 4.6875% } }
@media (min-width: 80px) { html { font-size: 6.25% } }
@media (min-width: 100px) { html { font-size: 7.8125% } }
@media (min-width: 120px) { html { font-size: 9.375% } }
@media (min-width: 140px) { html { font-size: 10.9375% } }
@media (min-width: 160px) { html { font-size: 12.5% } }
@media (min-width: 180px) { html { font-size: 14.0625% } }
@media (min-width: 200px) { html { font-size: 15.625% } }
@media (min-width: 220px) { html { font-size: 17.1875% } }
@media (min-width: 240px) { html { font-size: 18.75% } }
@media (min-width: 260px) { html { font-size: 20.3125% } }
@media (min-width: 280px) { html { font-size: 21.875% } }
@media (min-width: 300px) { html { font-size: 23.4375% } }
@media (min-width: 320px) { html { font-size: 25% } }
@media (min-width: 340px) { html { font-size: 26.5625% } }
@media (min-width: 360px) { html { font-size: 28.125% } }
@media (min-width: 380px) { html { font-size: 29.6875% } }
@media (min-width: 400px) { html { font-size: 31.25% } }
@media (min-width: 420px) { html { font-size: 32.8125% } }
@media (min-width: 440px) { html { font-size: 34.375% } }
@media (min-width: 460px) { html { font-size: 35.9375% } }
@media (min-width: 480px) { html { font-size: 37.5% } }
@media (min-width: 500px) { html { font-size: 39.0625% } }
@media (min-width: 520px) { html { font-size: 40.625% } }
@media (min-width: 540px) { html { font-size: 42.1875% } }
@media...