JSFiddle - React, Tailwind, and code Playground

by WilsonPage

HTML

<p>
    I am 12px tall. I am 12px tall. I am 12px tall. I am 12px tall. I am 12px tall. I am 12px tall. I am 12px tall. I am 12px tall. I am 12px tall. I am 12px tall. I am 12px tall. I am 12px tall. <span>I am 24px tall (twice he height of my parent)</span> I am 12px tall. I am 12px tall. I am 12px tall. I am 12px tall. I am 12px tall. I am 12px tall. I am 12px tall. I am 12px tall. I am 12px tall.
</p>

<p>
I am 24px tall. I am 24px tall. I am 24px tall. I am 24px tall. I am 24px tall. I am 24px tall. I am 24px tall. I am 24px tall. I am 24px tall. I am 24px tall. <span>I am 48px tall (twice the height of my parent's font size)</span>
</p>

<p>
I am 36px tall.I am 36px tall.I am 36px tall.I am 36px tall.I am 36px tall.I am 36px tall.I am 36px tall.I am 36px tall.
</p>

CSS

body { 
    font-size: 100%;   
}

p:nth-child(1) {
    font-size: 1em;
}

p:nth-child(2) {
    font-size: 2em;
}


p:nth-child(3) {
    font-size: 3em;
}

span { 
    font-size: 2em;
}