centering div in the middle using grid in tailwindcss

Question

I am having some hard time understanding grid layout, i guess. I want to place the content of the div in the middle of the page vertically using grid like as the figure shown. Centering the div in middle of any device

Based on my knowledge, i made two columns and a single row, and for the div containing the content, i added justify-content-center and align-items-center but it is not working. What am i doing wrong here? Could someone help me out?

function Home() {
    return (
        <div class={"grid grid-cols-2 grid-rows-1"}>
            <div class={" justify-content-center align-items-center"}>
                <h2 class={"text-4xl text-white "}>Hi, I'm</h2>
                <h1 class={"text-blue text-5xl font-semibold"}>Mr. XYZ</h1>
            </div>
        </div>
    );
}