JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div class="rem-outer outer">
    <div class="rem-inner inner"></div>
</div>

<div class="em-outer outer">
    <div class="em-inner inner"></div>
</div>

CSS

html {
    font-size: 28px;
}
.outer {
    font-size: 10px;
    background-color: lightblue;
    outline: 1px solid brown;
    float: left;
}
.inner {
    background-color: brown;
}
.rem-outer {
    height: 10rem;
    width: 10rem;
}
.rem-inner {
    height: 4rem;
    width: 4rem;
}
.em-outer {
    height: 10em;
    width: 10em; 
}
.em-inner {
    height: 4em;
    width: 4em;
}