JSFiddle - React, Tailwind, and code Playground

by sallar

HTML

<div class="parent">
    First Text.
    <div class="child">
        Second Text.
        <div class="second-child">
            Third Text
            <div class="third-child">
                Forth Text
            </div>
        </div>
    </div>
</div>

CSS

.parent{
    font-size: 18px;
}
.child{
    font-size: 1.5em; /* 1.5 x 18 = 27px */
}
.second-child{
    font-size: 1.3em; /* 1.3 x 27 = 35.1px */
}
.third-child{
    font-size: 0.5em; /* 0.5 x 35.1 = 17.55px */
}