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

1.9k

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

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

7 months ago

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

8 months ago

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

Author:
R Thapa

1 year ago

15.9k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Author:
Abhiraj

4 months ago

492
Error popup modal

Author:
Jindřich Stoklasa

7 months ago

1.1k
GALLERY

Author:
ORGIN_DREAMS

1 week ago

38
FacePass: Animated Image Authentication
"Where your image becomes your key" "Biometric meets beautiful animations" "A login experience that recognizes you – literally" "Security through personalized visual authentication" "Your face, animated, authenticated"

Author:
Acode Master(Mfuranziza Dusabe Hamza)

1 week ago

95
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

7.3k
Confirmation modal with blurred background

Author:
Orion.c

2 years ago

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

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

3 months ago

569
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

1 week ago

31
Error popup modal

Author:
Odessa Young

2 years ago

15.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components