Home
Michael Andreuzza
Animated modal with Tailwind Css and alpinejs

Animated modal with Tailwind Css and alpinejs

This tailwind example is contributed by Michael Andreuzza, on 27-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are popup,dialog

Form Modal

Author Michael Andreuzza

3.6k

3

Fork Fullscreen

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<section class="bg-white">
 <div class="max-w-screen-xl 2xl:max-w-screen-2xl px-8 md:px-12 mx-auto py-12 lg:py-24 space-y-24 flex flex-col justify-center lg:h-screen">
  
  <div class="flex justify-center" x-data="{ open: false }">
    <span x-on:click="open = true"> <button type="button" class="flex items-center 2xl:text-xl 2xl:h-12 justify-center h-10 px-4 py-2 text-base font-semibold text-white transition-all duration-200 rounded-full bg-gradient-to-b from-blue-500 to-indigo-600 hover:to-indigo-700 shadow-button shadow-blue-600/50 focus:ring-2 focus:ring-blue-950 focus:ring-offset-2 ring-offset-gray-200 hover:shadow-none">
     Log in
    </button> </span> 
   <div x-show="open" role="dialog" aria-modal="true" x-id="['modal-title']" aria-labelledby="modal-title-1" :aria-labelledby="$id('modal-title')" x-on:keydown.escape.prevent.stop="open = false" class="fixed inset-0 z-50 w-screen overflow-y-hidden" style="display: none;">
    
    <div x-show="open" x-transition.opacity="" class="fixed inset-0 bg-gray-500 bg-opacity-50" style="display: none;"></div> 
    <div x-show="open" x-on:click="open = false" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="transform opacity-0 translate-y-full" x-transition:enter-end="transform opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="transform opacity-100 translate-y-0" x-transition:leave-end="transform opacity-0 translate-y-full" class="relative flex min-h-screen items-center justify-center p-4" style="display: none;">
     <div x-on:click.stop="" x-trap.noscroll.inert="open" class="relative w-full max-w-sm overflow-y-auto shadow-2xl bg-white ring-1 ring-gray-200 rounded-3xl p-10">
      <div class="relative">
       <div class="flex flex-col text-center">
        <p class="text-lg font-medium text-gray-500 lg:text-xl">
         Log in to your account
        </p>
       </div>
       <form class="mt-12"> <input name="hidden" autocomplete="false" style="display:none"> <input name="_redirect" type="hidden" value="#">
        <div class="space-y-3">
         <div class=""> <label for="name" class="block mb-3 text-sm font-medium text-black sr-only">
           First name
          </label> <input id="name" name="text" type="text" placeholder="Your name" aria-placeholder="Your name" class="block w-full h-12 px-4 py-3 placeholder-gray-500 bg-gray-100 border-0 rounded-lg appearance-none text-blue-500 focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-blue-500 focus:ring-inset text-xs"> </div>
         <div class="col-span-full"> <label for="password" class="block mb-3 text-sm font-medium text-black sr-only">Password</label> <input id="password" name="password" type="password" placeholder="Type password here..." aria-placeholder="Type password here..." class="block w-full h-12 px-4 py-3 placeholder-gray-500 bg-gray-100 border-0 rounded-lg appearance-none text-blue-500 focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-blue-500 focus:ring-inset text-xs"> </div>
         <div class="flex items-center justify-between py-4">
          <div class="flex items-center"> <input id="remember-me" type="checkbox" name="remember-me" class="w-4 h-4 text-indigo-600 bg-vulcan-900 rounded focus:ring-white focus:border-white"> <label class="block ml-2 text-sm font-medium leading-tight text-gray-500" for="remember-me">Remember me</label> </div>
          <div class="text-sm"> <a class="font-medium text-gray-500 hover:text-indigo-500" href="#">Forgot your password?</a> </div>
         </div>
         <div class="col-span-full"> <a class="flex items-center justify-center h-10 px-4 py-2 text-base font-semibold text-white transition-all duration-200 rounded-full bg-gradient-to-b from-blue-500 to-indigo-600 hover:to-indigo-700 shadow-button shadow-blue-600/50 focus:ring-2 focus:ring-blue-950 focus:ring-offset-2 ring-offset-gray-200 hover:shadow-none" href="#">Log in
          </a> </div>
        </div>
        <div class="mt-3">
         <p class="mx-auto text-sm font-medium leading-tight text-center text-black">
          Not a have a password yet? <a class="ml-3 text-indigo-600 hover:text-black" href="/signup">Sign up now</a> </p>
        </div>
       </form>
      </div>
     </div>
    </div>
   </div>
  </div> 
  
  <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center sm:px-6 sm:pb-5 lg:px-8">
   <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
    <div class="flex w-0 flex-1 items-center p-4">
     <div class="w-full">
      <p class="text-sm font-medium text-neutral-900">Tutorial</p>
      <p class="mt-1 text-sm text-neutral-500">
       How to create an animated log in modal with Tailwind CSS and
       Alpine.js
      </p>
      <p class="mt-2 text-xs text-orange-500 underline"> <a href="https://lexingtonthemes.com">
        by © Lexington Themes</a> </p>
     </div>
    </div>
    <div class="flex">
     <div class="flex flex-col divide-y divide-neutral-200">
      <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-an-animated-log-in-modal-with-tailwind-css-and-alpine-js" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500">Tutorial</a> </div>
      <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/alpine-modal/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500">Get the code</a> </div>
     </div>
    </div>
   </div>
  </div> 
 </div>
</section>

Related Examples

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

Author:
R Thapa

2 years ago

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

Author:
Ti To

2 years ago

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

2 years ago

7.1k
Incentives
tailwind css Incentives

Author:
Anonymous

2 years ago

5.3k
File Upload

Author:
Rajesh Maheshwari

11 months ago

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

Author:
Anonymous

10 months ago

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

Author:
ORGIN_DREAMS

8 months ago

848
OTPverification

Author:
Ratikanta Pradhan

7 months ago

533
Simple login form

Author:
R Thapa

2 years ago

24.9k
damatebis forma

Author:
Tamaz gogitidze

1 year ago

2.1k
Simple Form

Author:
Mr Robot

3 years ago

10k
Book appointment form

Author:
Lukas Müller

3 years ago

28.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12