JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display: flex; height: 100%; flex-direction: column; align-items: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;
}