JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div class="outer">
    <p>This is your normal, em based div. already set to 100 percent, automatically.</p>

<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

<p>Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
</div>

<div class="outer">
<div class="inner-80">
    <p>And this is a div inside your em based div, set to 80 percent width with 10 percent margins on both sides.</p>

<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>

<p>Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
</div>
</div>

<div class="outer">
<div class="inner-100">
    <p>Finally, here is a div inside your em based div, that is set to 100 percent of the em width. Got it?</p>

<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada...

CSS

html { font-size: 62.5% }

body { font: 1.6em/1.5 sans-serif; max-width: 75em; margin: 1.25em auto; }

p { margin-bottom: 1.5em }

div.outer { width: 20em; display: inline-block; float: left; margin: 2.5em;  background: #f1f2f3; }

div.inner-80 { width: 80%; margin-left: 10%; margin-right: 10%; background: red; color: white; } 

div.inner-100 { width: 100%; background: blue; color: white; }