Back to Discover

Tailwind CSS Modal Popup Example

Amelia

Created Nov 03, 2025

0 views

0 likes

0 comments

0 forks

Export Fork Like

<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

<body class="bg-gray-50 min-h-screen flex items-center justify-center p-4">

  <div x-data="{ open: false }" class="w-full max-w-4xl">

    <!-- Trigger Button -->
    <div class="text-center">
      <button 
              @click="open = true"
              class="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors duration-200 shadow-md">
        <ion-icon name="add-circle-outline" class="text-xl"></ion-icon>
        Open Modal
      </button>
    </div>

    <!-- Modal Overlay -->
    <div 
         x-show="open"
         x-transition.opacity.duration.300ms
         @click="open = false"
         class="fixed inset-0 bg-black bg-opacity-50 z-40"
         style="display: none;">
    </div>

    <!-- Modal Content -->
    <div 
         x-show="open"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 transform scale-90"
         x-transition:enter-end="opacity-100 transform scale-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100 transform scale-100"
         x-transition:leave-end="opacity-0 transform scale-90"
         @click.away="open = false"
         class="fixed inset-0 z-50 flex items-center justify-center p-4"
         style="display: none;">

      <div class="bg-white rounded-xl shadow-2xl w-full max-w-lg overflow-hidden">

        <!-- Modal Header -->
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200">
          <h3 class="text-xl font-semibold text-gray-900">Modal Title</h3>
          <button 
                  @click="open = false"
                  class="text-gray-400 hover:text-gray-600 transition-colors duration-200">
            <ion-icon name="close-outline" class="text-2xl"></ion-icon>
          </button>
        </div>

        <!-- Modal Body -->
        <div class="px-6 py-6">
          <p class="text-gray-600 leading-relaxed mb-4">
            This is a professional modal popup built with Tailwind CSS, Alpine.js, and Ionicons. 
            It features smooth transitions, a backdrop overlay, and click-outside-to-close functionality.
          </p>
          <p class="text-gray-600 leading-relaxed">
            You can customize the content, styling, and behavior to match your specific needs.
          </p>
        </div>

        <!-- Modal Footer -->
        <div class="flex items-center justify-end gap-3 px-6 py-4 bg-gray-50 border-t border-gray-200">
          <button 
                  @click="open = false"
                  class="px-4 py-2 text-gray-700 font-medium rounded-lg hover:bg-gray-200 transition-colors duration-200">
            Cancel
          </button>
          <button 
                  @click="open = false"
                  class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors duration-200">
            <ion-icon name="checkmark-circle-outline" class="text-lg"></ion-icon>
            Confirm
          </button>
        </div>

      </div>
    </div>

  </div>

body {
  margin: 0;
  padding: 20px;
  font-family: system-ui, -apple-system, sans-serif;
  background: #f5f5f5;
}

.container {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  max-width: 600px;
  margin: 0 auto;
}

h1 {
  color: #333;
  margin-top: 0;
}

button {
  background: #000;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

console.log('Editor loaded!');

let clickCount = 0;

function handleClick() {
  clickCount++;
  const output = document.getElementById('output');
  output.innerHTML = `
    <h3>Clicked ${clickCount} time(s)!</h3>
    <p>Time: ${new Date().toLocaleTimeString()}</p>
  `;
  console.log(`Button clicked ${clickCount} times`);
}

Comments (0)

No comments yet. Be the first!