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

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

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

2 months ago

437
Tailwind CSS Modal

Author:
Krishna Gudpalle

2 years ago

10k
Error popup modal

Author:
Odessa Young

1 year ago

14k
bardui.com badge

Author:
Muhammad Imran

2 months ago

371
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

2 months ago

450
Social media login modal
Popup model for social media login. i.e. google and GitHub. you can add more buttons according to your need

Author:
Sameer Sultana

1 year ago

13.4k
Incentives
tailwind css Incentives

Author:
Anonymous

11 months ago

3.8k
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.3k
Animated modal with Tailwind Css and alpinejs

Author:
Michael Andreuzza

7 months ago

1.7k
Modal with background overlay
Reduce the opacity of the page content to bring the focus to the modal.

Author:
Abigail

1 year ago

10.5k
Confirmation modal with blurred background

Author:
Orion.c

1 year ago

11.2k
Modal multiple window

Author:
Maxim

8 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components