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

2k

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

1 year ago

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

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

1 year ago

5.8k
Incentives
tailwind css Incentives

Author:
Anonymous

1 year ago

4.1k
Confirmation model

Author:
Mr Robot

2 years ago

12.3k
Upload file input field

Author:
Gopi Yadav

2 years ago

12.8k
Sign in form
simple full-height login form

Author:
Lukas Müller

2 years ago

8.5k
Contact us page template
full page fancy contact us page

Author:
Lukas Müller

2 years ago

15.3k
Contact us section
Minimal contact us form

Author:
Leon Bachmann

2 years ago

10.8k
Simple Form 2

Author:
Mr Robot

2 years ago

9.6k
Book appointment form

Author:
Lukas Müller

2 years ago

23.4k
progress-bar with Tailwind CSS and Alpinejs

Author:
Quêmia

6 months ago

888

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ 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

© 2025 TailwindFlex. All Rights Reserved.

v1.1