Tailwind center text layout

The following code snippets can be used to achieve a result similar to the screenshot below:

To preview this, visit stamos.xyz

#HTML

<div className="flex min-h-screen items-center justify-center bg-white dark:bg-black">
    <div className="mx-auto max-w-2xl text-center">
        <p className="text-black dark:text-white">
            This text will be in the center of the screen
        </p>
    </div>
</div>

#React

export default function Layout() {
    return (
        <div className="flex min-h-screen items-center justify-center bg-white dark:bg-black">
            <div className="mx-auto max-w-2xl text-center">
                <p className="text-black dark:text-white">
                    This text will be in the center of the screen
                </p>
            </div>
        </div>
    )
}