JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display:-webkit-flex; display: flex; height: 100%; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items:center; -webkit-justify-content: center; justify-content: center;">
    <div style="text-align: center;">
        <h1>Hello world</h1>
        The following green square should be centered:<br />
        <div style="display: inline-block; width: 30px; height: 30px; background: green;"></div>
    </div>
</div>

CSS

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}