Modal, Dropdown, and Overlay Patterns

Modals, dropdowns, and overlays require coordinating z-index, position, background opacity, and animation classes — all areas where Tailwind's utilities shine. A modal overlay uses fixed inset-0 z-50 bg-black/50 backdrop-blur-sm to cover the viewport, and the modal panel uses relative or absolute positioning with specific width and padding classes to appear centred on screen. The flex items-center justify-center on the backdrop handles vertical and horizontal centering. Dropdown menus use absolute positioning relative to a trigger button, with z-10 or higher to ensure they float above sibling content. The standard pattern is a relative container wrapping the button and an absolute-positioned panel below it. Width utilities (w-48, w-64, min-w-full) control the dropdown width, and translate-y and opacity classes combined with transitions create smooth open/close animations. Focus trapping and keyboard navigation need to be handled in JavaScript. The group modifier is essential for dropdowns and hover menus. By placing group on the container and group-hover: on the panel, the panel appears when the user hovers anywhere within the container — not just the button. Combined with pointer-events-none on the closed state and pointer-events-auto on the open state, you can build CSS-only hover menus without JavaScript for simple cases, though JavaScript-controlled menus are recommended for accessibility.

Example

<!-- Modal (Alpine.js for open/close state) -->
<div x-data="{ open: false }">

  <button @click="open = true"
          class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
    Open Modal
  </button>

  <!-- Backdrop + modal container -->
  <div x-show="open"
       x-transition:enter="transition ease-out duration-200"
       x-transition:enter-start="opacity-0"
       x-transition:enter-end="opacity-100"
       x-transition:leave="transition ease-in duration-150"
       x-transition:leave-start="opacity-100"
       x-transition:leave-end="opacity-0"
       class="fixed inset-0 z-50 flex items-center justify-center p-4"
       @click.self="open = false">

    <!-- Backdrop -->
    <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>

    <!-- Panel -->
    <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-md p-6 z-10"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100">

      <h2 class="text-xl font-bold text-gray-900 mb-2">Confirm Action</h2>
      <p class="text-gray-500 mb-6">Are you sure you want to delete this item?</p>

      <div class="flex justify-end gap-3">
        <button @click="open = false"
                class="px-4 py-2 text-gray-600 border rounded-lg hover:bg-gray-50">
          Cancel
        </button>
        <button @click="open = false"
                class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700">
          Delete
        </button>
      </div>
    </div>
  </div>
</div>

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned