Home
EliteAI Tools
Modal with Tailwind CSS

Modal with Tailwind CSS

This tailwind example is contributed by EliteAI Tools, on 20-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are popup,dialog

Modal

Author EliteAI Tools

541

Fork Fullscreen

<div id="modal" class="fixed inset-0 z-50 flex items-center justify-center">
  <div class="fixed inset-0 bg-black/50"></div>
  <div class="relative w-full max-w-md p-6 bg-white dark:bg-gray-800 rounded-lg shadow-xl">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">About Your Tool</h3>
      <button id="closeModalButton" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
        <svg class="h-4 w-4 inline-block ml-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

<div class="space-y-4">
      <div>
        <label for="website_url" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Website HomePage URL</label>
        <input type="url" id="website_url" class="w-full mt-1 p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500" placeholder="https://example.com" required>
      </div>

<div class="flex justify-end gap-3">
        <button id="cancelButton" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600">
          Cancel
        </button>
        <button id="submitUrlButton" class="flex items-center justify-center px-4 py-2 text-sm font-medium text-white rounded-md bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700 dark:from-indigo-500 dark:to-violet-500 dark:hover:from-indigo-600 dark:hover:to-violet-600">
          Continue to Payment
          <svg class="h-4 w-4 inline-block ml-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Related Examples

Confirmation Dialog Box

Author:
Anonymous

1 year ago

14k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript

Author:
Ti To

1 year ago

6.6k
bardui.com feedback modal
feedback form will be engaging and user-friendly. Ideal for collecting valuable user opinions and improving your website’s interaction. Explore practical examples and templates for seamless integration.

Author:
Muhammad Imran

4 months ago

1k
Otp-code template
This is an OTP code template that contains the one-time password, which can be sent to the user's email either when they are signing up for the first time or for multi-factor authentication (MFA) during the login process.

Author:
anandu ap

4 months ago

577
Responsive modal popup

Author:
I.P. Leroy

2 years ago

12.3k
Blurred Background Modal

Author:
Prem..

1 year ago

12.2k
Confirmation modal with blurred background

Author:
Orion.c

1 year ago

12k
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

2 days ago

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

Author:
R Thapa

1 year ago

14.9k
Modal multiple window

Author:
Maxim

10 months ago

1.2k
Confirmation model

Author:
Mr Robot

2 years ago

12.3k
Incentives
tailwind css Incentives

Author:
Anonymous

1 year ago

4.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components