JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <h3>em と rem の比較</h3>
    BODYの基本的なフォントサイズを10px(62.5%)にした場合、
    <br>htmlも同じく10px設定した
        <p>こちらはbodyの中のPで 1.5<b>em</b> (body:10px * 1.5 で 15px)</p>
        <p>こちらはbodyの中のPで 1.5<b>rem</b>(html:10px * 1.5 で 15px)</p>
    <ul>
        <li>(←ここで1.5emが効いてサイズが15px)
            <ul>
                <li>1.5emの場合
                    <br />(10px * 親のliの 1.5 * 更にこのliの 1.5 で 23px)</li>
                <li>1.5remの場合
                    <br />(htmlの10px * このliで15px)</li>
            </ul>
        </li>
    </ul>
</body>

CSS

html {
    font-size:62.5%;
    /* 16px = 100% */
}
body {
    font-size: 62.5%;
}
p {
    font-size: 1.5em;
}
p:last-child {
    font-size: 1.5rem;
}
li {
    font-size: 1.5em;
}
li:last-child {
    font-size: 1.5rem;
}

h3{
    font-size: 3em;
}