Home
Omer fils ELENGA
iOS 16 Popup

iOS 16 Popup

iOS 16 Popup — Alpine.js

This tailwind example is contributed by Omer fils ELENGA, on 27-Nov-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are popup,dialog

Modal

Author Omer fils ELENGA

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>iOS 16 Popup — Alpine.js</title>
  <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>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          fontFamily: {
            sans: ['SF Pro Text', '-apple-system', 'BlinkMacSystemFont', 'Inter', 'sans-serif']
          }
        }
      }
    }
  </script>
  <style>
    body {
      background: #000;
      color: white;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

/* Fond animé subtil (optionnel) */
    .bg-pattern {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.03), transparent 40%),
        radial-gradient(circle at 75% 70%, rgba(139, 92, 246, 0.03), transparent 40%);
      z-index: -1;
    }

/* Popup iOS 26 */
    .ios-popup {
      background: rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(40px);
      -webkit-backdrop-filter: blur(40px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 24px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
      max-width: 380px;
      width: 90vw;
      transform: translateY(10px);
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

.ios-popup.pop-in {
      transform: translateY(0);
      opacity: 1;
    }

.ios-popup.pop-out {
      transform: translateY(20px);
      opacity: 0;
    }

/* Boutons */
    .popup-btn {
      padding: 16px;
      font-weight: 500;
      font-size: 17px;
      text-align: center;
      transition: background 0.2s;
    }

.popup-btn:not(:last-child) {
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

.popup-btn.action {
      color: #4f46e5;
    }

.popup-btn.destructive {
      color: #f87171;
    }

.popup-btn.cancel {
      color: #94a3b8;
    }

.popup-btn:hover, .popup-btn:focus {
      background: rgba(255, 255, 255, 0.08);
      outline: none;
    }
  </style>
</head>
<body x-data="{ open: false }" @keydown.escape.window="open = false">
  <div class="bg-pattern"></div>

<button 
    @click="open = true"
    class="px-6 py-3 bg-indigo-600 hover:bg-indigo-500 rounded-xl text-white font-medium text-lg shadow-lg"
  >
    Open iOS 26 Popup
  </button>

<div 
    x-show="open"
    x-transition:enter="transition"
    x-transition:enter-start="opacity-0 scale-95"
    x-transition:enter-end="opacity-100 scale-100"
    x-transition:leave="transition"
    x-transition:leave-start="opacity-100 scale-100"
    x-transition:leave-end="opacity-0 scale-95"
    class="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4"
    role="dialog"
    aria-modal="true"
    aria-labelledby="popup-title"
  >
    <div 
      @click.away="open = false"
      class="ios-popup pop-in w-full"
    >
      <div class="p-5">
        <h2 id="popup-title" class="text-xl font-semibold text-center text-white">Are you sure?</h2>
        <p class="mt-2 text-center text-gray-400 text-sm">
          This action cannot be undone.
        </p>
      </div>

<div class="divide-y divide-gray-800">
        <button 
          @click="open = false"
          class="popup-btn action w-full"
        >
          Confirm Action
        </button>
        <button 
          @click="open = false"
          class="popup-btn destructive w-full"
        >
          Delete Permanently
        </button>
        <button 
          @click="open = false"
          class="popup-btn cancel w-full"
        >
          Cancel
        </button>
      </div>
    </div>
  </div>
</body>
</html>

Related Examples

Incentives
tailwind css Incentives

Author:
Anonymous

1 year ago

5.2k
Responsive Class List Table using Tailwind CSS
A responsive and customizable class list table built with Tailwind CSS, featuring actions for editing and deleting classes.

Author:
Anum Shahana

1 year ago

1.9k
Blurred Background Modal

Author:
Prem..

2 years ago

13.5k
Minimalistic Modal with Native Functionality
This modal is built using HTML and Tailwind CSS without requiring JavaScript for basic functionality. It leverages the native <dialog> element, allowing users to open the modal by clicking a button and close it by clicking the ❌ button or clicking outside the modal. The design is clean and responsive, ensuring a smooth user experience with minimal code.

Author:
SHARIFUL ISLAM

10 months ago

2k
LoginModal-1
Popup modal with close

Author:
Rohan Babu

1 year ago

3.5k
Login screen
Reward login screen

Author:
ehmasuk

3 months ago

170
Animated modal with Tailwind Css and alpinejs

Author:
Michael Andreuzza

1 year ago

3.4k
Donate Hero section
Best New tailwindcss,help save the children

Author:
ORGIN_DREAMS

7 months ago

596
Confirmation modal/card

Author:
Sophia Baker

2 years ago

15.5k
Confirmation model

Author:
Mr Robot

3 years ago

13.1k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
R Thapa

2 years ago

17.1k
GALLERY

Author:
ORGIN_DREAMS

7 months ago

952

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components