JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <div class="font-size-setting">
            <div class="font-size-normalize">
                <ul>
                    <li>Lorem ipsum dolor sit amet.</li>
                    <li>Consectetur adipiscing elit.</li> 
                    <li>Quisque tincidunt sapien volutpat.</li>
                    <li>Dolor sagittis eu sagittis.</li>
                    <li>Nulla fermentum adipiscing dapibus.</li>
                </ul>
                <div class="square">
                    just square
                </div>
            </div>
        </div>
    </body>
</html>

CSS

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: "Times New Roman", Times, Baskerville, Georgia, serif;
    font-size: 62.5%;
    margin: 0;
}

.font-size-setting {
    font-size: 1.4em;
}

.font-size-normalize {
    font-size: 1em; /* normal desktops */
 /* font-size: 1.7em;  iphone3 */
 /* font-size: 2.2em;  ps vita */
}

ul, .square { background: #eee; }
.square { width: 6em; height: 6em; }