Animated modal with Tailwind Css and alpinejs

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

Author Michael Andreuzza

Tailwind v3.4 3.8k 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.

R Thapa

2 years ago

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

Ti To

2 years ago

7.8k
Incentives
tailwind css Incentives

Anonymous

2 years ago

5.9k
File Upload

Rajesh Maheshwari

1 year ago

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

Anonymous

1 year ago

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

ORGIN_DREAMS

1 year ago

1.6k
OTPverification

Ratikanta Pradhan

1 year ago

1.1k
Appointment booking form

Ho O

1 year ago

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

Alla Telegina

1 year ago

1.4k
Profile Form
Enhanced User Profile Form with Stunning Profile and Cover Image Fields

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

10.4k
login
Dark mode login

Hacker Development

1 year ago

2k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.