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

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

User list
User list

Author:
Anonymous

2 weeks ago

68
Modal multiple window

Author:
Maxim

1 year ago

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

Author:
Anonymous

2 months ago

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

Author:
ORGIN_DREAMS

4 weeks ago

42
Animated modal with Tailwind Css and alpinejs

Author:
Michael Andreuzza

1 year ago

2.7k
Incentives
tailwind css Incentives

Author:
Anonymous

1 year ago

4.8k
Confirmation modal with blurred background

Author:
Orion.c

2 years ago

12.9k
File Upload

Author:
Rajesh Maheshwari

3 months ago

544
Confirmation modal/card

Author:
Sophia Baker

2 years ago

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

Author:
Lukas Müller

2 years ago

41.2k
bardui.com badge

Author:
Muhammad Imran

8 months ago

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

5 months ago

523

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components