JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<h1>Silence in the Library</h1>
<p>Aw, you're all Mr. Grumpy Face today. I am the last of my species, and I know how that weighs on the heart so don't lie to me! You know how I sometimes have really brilliant ideas? Annihilate? No. No violence. I won't stand for it. Not now, not ever, do you understand me?! I'm the Doctor, the Oncoming Storm - and you basically meant beat them in a football match, didn't you? No, I'll fix it. I'm good at fixing rot. Call me the Rotmeister. No, I'm the Doctor. Don't call me the Rotmeister. You hate me; you want to kill me! Well, go on! Kill me! KILL ME!</p>
<h2>The Beast Below</h2>
<p>Annihilate? No. No violence. I won't stand for it. Not now, not ever, do you understand me?! I'm the Doctor, the Oncoming Storm - and you basically meant beat them in a football match, didn't you? Sorry, checking all the water in this area; there's an escaped fish. Sorry, checking all the water in this area; there's an escaped fish. *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! I am the Doctor, and you are the Daleks!</p>
<h3>The Doctor Dances</h3>
<p>You've swallowed a planet! You know when grown-ups tell you 'everything's going to be fine' and you think they're probably lying to make you feel better? *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do!</p>
<h4>The Girl in the Fireplace</h4>
<p>Annihilate? No. No violence. I won't stand for it. Not now, not ever, do you understand me?! I'm the Doctor, the Oncoming Storm - and you basically meant beat them in a football match, didn't you? I'm nobody's taxi service; I'm not gonna be there to catch you every time you feel like jumping out of a spaceship. You know how I sometimes have really brilliant ideas?</p>
<h5>Dalek</h5>
<p>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...

CSS

body { font-size: 100%; line-height: 1.618; }

h6   { font-size: 0.236em; line-height:1.62em; }
h5   { font-size: 0.382em; line-height:1.62em; }
h4   { font-size: 0.618em; line-height:1.62em; }
h3   { font-size: 1.000em; line-height:1.62em; }
h2   { font-size: 1.618em; line-height:1.62em; }
h1   { font-size: 2.618em; line-height:1.62em; }

p    { margin-bottom: 1.618em; }