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

842

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

bardui.com badge

Author:
Muhammad Imran

6 months ago

1.1k
Modal popup
Working modal in tailwind CSS Simple snippet for creating models with tailwind and javascript

Author:
Lukas Müller

2 years ago

40.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

7k
Sign in Modal
Login to continue modal

Author:
Anonymous

9 months ago

1.1k
Home page 2
Отзывчивый логотип по центру. Интерактивные кнопки призыва к действию.

Author:
Алла Телегина

2 months ago

264
Blurred Background Modal

Author:
Prem..

2 years ago

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

14.3k
Confirmation modal with blurred background

Author:
Orion.c

2 years ago

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

6 months ago

996
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript uses fabform.io

Author:
Ti To

1 year ago

6.2k
Error popup modal

Author:
Odessa Young

2 years ago

15k
LoginModal-1
Popup modal with close

Author:
Rohan Babu

1 year ago

3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components