modal

This tailwind example is contributed by aditya_sharma, on 01-Sep-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are popup,dialog

Modal

Author aditya_sharma

Tailwind v3.4 172

Fork Fullscreen

<form class="flex flex-col gap-5">
      <div>
        <label class="block mb-2 font-medium"> field1 </label>

<div>
        <label class="block mb-2 font-medium"> field2 </label>

<div class="flex gap-5">
        <div class="flex-1">
          <label class="block mb-2 font-medium"> field3 </label>

<select class="w-full border rounded-lg px-4 py-3">
            <option value="" disabled>Select field3</option>

<div class="flex-1">
          <label class="block mb-2 font-medium"> field4 </label>

<div class="flex gap-5">
        <div class="flex-1">
          <label class="block mb-2 font-medium"> field5 </label>

<div class="flex-1">
          <label class="block mb-2 font-medium"> field6 </label>

<div class="flex justify-end gap-3 pt-3">
        <button
          type="button"
          class="px-5 py-2 border border-gray-300 rounded-lg hover:bg-gray-100"
        >
          Cancel
        </button>

Related Examples

Tailwind CSS Modal

Krishna Gudpalle

4 years ago

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

Abigail

3 years ago

12.6k
iOS 16 Popup
iOS 16 Popup — Alpine.js

Omer fils ELENGA

10 months ago

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

Lukas Müller

3 years ago

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

Sameer Sultana

3 years ago

15.8k
Chat UI
The Chat UI is a responsive and interactive component designed for building messaging interfaces. Ideal for applications like customer support, social media, or team collaboration tools, it provides a modern, user-friendly layout for real-time communication.

Abhiraj

1 year ago

4.4k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript

Ti To

2 years ago

8.9k
confirmation modal
confirmation modal

aditya_sharma

1 month ago

175
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"

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

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

Anonymous

1 year ago

865
Confirmation Dialog Box

Anonymous

3 years ago

17.4k
Command Palette with Search & Keyboard Navigation

JUGENDRA GANGWAR

1 month ago

74