Height

<div class="flex gap-4 items-end h-40 bg-gray-100 p-4">
  <div class="h-full bg-blue-100 p-2">h-full (100% of parent)</div>
  <div class="h-1/2 bg-blue-200 p-2">h-1/2 (50% of parent)</div>
  <div class="h-1/4 bg-blue-300 p-2">h-1/4 (25% of parent)</div>
  <div class="h-16 bg-blue-400 p-2 text-white">h-16 (4rem / 64px)</div>
  <div class="h-auto bg-blue-500 p-2 text-white">h-auto (content height)</div>
</div>

<div class="h-screen w-full bg-blue-100 flex items-center justify-center">
  <div class="max-w-md bg-white p-6 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold mb-2">Full Viewport Height</h2>
    <p>This parent div has h-screen, making it the full height of the viewport.</p>
    <p class="mt-4">h-screen is useful for full-page layouts, heroes, and landing sections.</p>
  </div>
</div>

<!-- Equal height cards with different content amounts -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  <div class="h-64 bg-white rounded-lg shadow-md p-4 flex flex-col">
    <h3 class="font-bold text-lg mb-2">Card 1</h3>
    <p>Short content.</p>
    <div class="mt-auto pt-4">
      <button class="px-4 py-2 bg-blue-600 text-white rounded-lg w-full">Action</button>
    </div>
  </div>
  <div class="h-64 bg-white rounded-lg shadow-md p-4 flex flex-col">
    <h3 class="font-bold text-lg mb-2">Card 2</h3>
    <p>This card has more content than the first card, but thanks to the fixed height, all cards remain the same height regardless of content.</p>
    <div class="mt-auto pt-4">
      <button class="px-4 py-2 bg-blue-600 text-white rounded-lg w-full">Action</button>
    </div>
  </div>
  <div class="h-64 bg-white rounded-lg shadow-md p-4 flex flex-col">
    <h3 class="font-bold text-lg mb-2">Card 3</h3>
    <p>Medium amount of content that shows how the button is aligned to the bottom using mt-auto.</p>
    <div class="mt-auto pt-4">
      <button class="px-4 py-2 bg-blue-600 text-white rounded-lg w-full">Action</button>
    </div>
  </div>
</div>

<!-- Responsive height -->
<div class="h-40 sm:h-48 md:h-56 lg:h-64 xl:h-72 bg-gradient-to-r from-blue-400 to-purple-500 rounded-lg flex items-center justify-center text-white font-bold text-xl">
  <div class="text-center">
    <p>Responsive Height Element</p>
    <p class="text-sm font-normal mt-2">Height increases at each breakpoint</p>
  </div>
</div>

<!-- Fixed height container with scrollable content -->
<div class="h-64 overflow-auto bg-white rounded-lg shadow-md">
  <div class="sticky top-0 bg-white border-b px-4 py-2 font-bold">Scrollable Container</div>
  <div class="p-4">
    <p class="mb-4">This container has a fixed height of 16rem (64px) with scrollable content.</p>
    <p class="mb-4">When content exceeds the container height, it becomes scrollable.</p>
    <p class="mb-4">This is useful for areas like chat messages, feeds, or long lists where you want to constrain the height.</p>
    <p class="mb-4">Notice how the header stays sticky at the top when scrolling.</p>
    <p class="mb-4">More content to demonstrate scrolling...</p>
    <p class="mb-4">Even more content to ensure scrolling is necessary.</p>
    <p class="mb-4">Fixed height containers like this are common in dashboards and admin interfaces.</p>
    <p>The end of the scrollable content.</p>
  </div>
</div>