Modal

Responsive model

This tailwind example is contributed by inbarajan P, on 02-Oct-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 inbarajan P

676

Fork Fullscreen

<div class="relative w-full cursor-pointer pointer-events-none transition my-auto p-4">
    <div
      class="w-full py-2 bg-white cursor-default pointer-events-auto dark:bg-gray-800 relative rounded-xl mx-auto max-w-sm">

<button type="button" class="absolute top-2 right-2 rtl:right-auto rtl:left-2">
                <svg xlinkTitle="Close" class="h-4 w-4 hover:rotate-180 transition-all ease-in-out duration-500 cursor-pointer text-gray-400"
                  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                  <path fillRule="evenodd"
                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                    clipRule="evenodd"></path>
                </svg>
                <span class="sr-only">
                  Close
                </span>
              </button>

<div class="space-y-2 p-2">
        <div class="p-2 space-y-2 text-center dark:text-white">
          <h2 class="text-xl font-bold tracking-tight" id="page-action.heading">
            Let me reach you
          </h2>
          <p class="text-gray-500">
            Are you sure you would like to do this?
          </p>
        </div>
      </div>

<div class="grid grid-cols-1 place-items-center px-4 py-2">
          <form noValidate class="space-y-4">
            <div>
              <label htmlFor="Full Name" class="mb-2 text-gray-400 text-lg">Full Name<span class="text-red-600 inline-block p-1 text-sm">*</span></label>
              <input
                        id="Full Name"
                        class="border p-3 shadow-md  border-gray-700 placeholder:text-base focus:outline-none ease-in-out duration-300 rounded-lg w-full"
                        type="text"
                        placeholder="Full Name"
                        required
                      />
            </div>
            <div>
              <label htmlFor="email" class="mb-2 text-gray-400 text-lg">Email<span class="text-red-600 inline-block p-1 text-sm">*</span></label>
              <input
                        id="email"
                        class="border p-3  border-gray-700 shadow-md placeholder:text-base focus:outline-none ease-in-out duration-300 rounded-lg w-full"
                        type="email"
                        placeholder="Email"
                        required
                      />
            </div>
            <div>
              <label htmlFor="subject" class="mb-2 text-gray-400 text-lg">Subject<span class="text-red-600 inline-block p-1 text-sm">*</span></label>
              <input
                        id="subject"
                        class="border p-3  border-gray-700 shadow-md placeholder:text-base focus:outline-none ease-in-out duration-300 rounded-lg w-full"
                        type="text"
                        placeholder="subject"
                        required
                      />
            </div>
            <div>
              <label htmlFor="Message" class="mb-2 text-gray-400 text-lg">Message<span class="text-red-600 st inline-block p-1 text-sm">*</span></label>
              <textarea
                        id="Message"
                        class="border p-3  border-gray-700 shadow-md placeholder:text-base focus:outline-none ease-in-out duration-300 rounded-lg w-full"
                        placeholder="Message"
                        required
                      ></textarea>
            </div>
          </form>
        </div>

<div aria-hidden="true" class="border-b border-gray-700 px-2"></div>
        <div class="px-6 py-2">
          <div class="grid gap-2 grid-cols-[repeat(auto-fit,minmax(0,1fr))]">
            <button type="button"
                      class="inline-flex items-center justify-center py-1 gap-1 font-medium rounded-lg border transition-colors outline-none focus:ring-offset-2 focus:ring-2 focus:ring-inset dark:focus:ring-offset-0 min-h-[2.25rem] px-4 text-sm text-gray-800 bg-white border-gray-300 hover:bg-gray-50 focus:ring-primary-600 focus:text-primary-600 focus:bg-primary-50 focus:border-primary-600 dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-600 dark:hover:border-gray-500 dark:text-gray-200 dark:focus:text-primary-400 dark:focus:border-primary-400 dark:focus:bg-gray-800">
                      Cancel
                    </button>

Related Examples

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

Author:
Lukas Müller

1 year ago

37.9k
Modal multiple window

Author:
Maxim

8 months ago

1.1k
Confirmation modal/card

Author:
Sophia Baker

1 year ago

13.2k
bardui.com badge

Author:
Muhammad Imran

2 months ago

371
Incentives
tailwind css Incentives

Author:
Anonymous

11 months ago

3.8k
Login popup
with social media login buttons

Author:
Nikolai

9 months ago

2k
Modal with Tailwind CSS

Author:
EliteAI Tools

2 days ago

12
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
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
Error popup modal

Author:
Odessa Young

1 year ago

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

2 months ago

296
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

453

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components