I am testing out some tailwind features. As you can see I have successfully centered a div horizontally and vertically.
Centered Div

    <div class="flex items-center justify-center h-screen">
      <div>
        <h1 class="text-6xl font-medium">sample</h1>
        <div class="greeting2 text-[100px]">
          <h2 class="text-gradient font-semibold">Lorem Ipsum</h2>
        </div>
        <a
          href="#"
          class="animate-fade transition-colors bg-primary hover:bg-primary/90 h-10 inline-flex items-center justify-center px-6 py-2 border-0 rounded-full text-sm font-medium text-white bg-gradient-to-l from-blue-500 to-purple-600 shadow-lg hover:from-purple-500 hover:to-blue-600 mt-0"
        >
          See More
        </a>
      </div>
      <div>
        <img src="../Humaaans/sitting-4.svg" class="animate-fade" alt="" />
      </div>
    </div>

This is my code for that.

The problem is, i tried adding a div right beneath the first div

    <div class="flex items-center justify-center h-screen">
      <div>
        <h1 class="text-6xl font-medium">sample</h1>
        <div class="greeting2 text-[100px]">
          <h2 class="text-gradient font-semibold">Lorem Ipsum</h2>
        </div>
        <a
          href="#"
          class="animate-fade transition-colors bg-primary hover:bg-primary/90 h-10 inline-flex items-center justify-center px-6 py-2 border-0 rounded-full text-sm font-medium text-white bg-gradient-to-l from-blue-500 to-purple-600 shadow-lg hover:from-purple-500 hover:to-blue-600 mt-0"
        >
          See More
        </a>
      </div>
      <div>
        <img src="../Humaaans/sitting-4.svg" class="animate-fade" alt="" />
      </div>
    </div>
    <!-- this is not being displayed -->
    <div>
        test
    </div>

I know for sure that the problem is the h-screen.

I am new to tailwind CSS and would like to be able to add a div below the first one while maintaining its horizontal and vertical centered state.