Home
Michael Andreuzza
bottom drawer with Tailwind CSS and Alpinejs

bottom drawer 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 CTA,banner

Call to Action Cookie consent

Author Michael Andreuzza

2.2k

Fork Fullscreen

<section class="bg-white relative overflow-hidden" x-data="{ isOpen: false }">
 <div class="w-full mx-auto 2xl:max-w-7xl flex flex-col justify-center py-24 relative p-8">
  <div class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl mx-auto max-w-sm w-full">
   <div>
    <h1>Bottom drawer</h1>
    <p class="text-balance">
     Click on the button to open the bottom drawer.
    </p>
   </div>
  </div>
  <div class="mt-6 border-t pt-12 max-w-sm mx-auto w-full">
    <button @click="isOpen = !isOpen" aria-expanded="false" class="rounded-full bg-orange-600 px-8 py-2 h-12 text-sm font-semibold
          text-white hover:bg-orange-500 focus:outline-none focus:ring-2
          focus:ring-orange-500 focus:ring-offset-2 w-full">
    Toggle Cookie Settings
   </button> 
   
   <div x-show="isOpen" @click.away="isOpen = false" class="fixed inset-x-0 bottom-0 flex flex-col justify-between gap-x-8 gap-y-4 bg-white p-8 ring-1 ring-gray-900/10 md:flex-row md:items-center lg:p-20" style="display: none;">
    <div 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="flex flex-col lg:flex-row gap-12 justify-between w-full">
     
     <p class="max-w-4xl text-sm leading-6 text-gray-500">
      Our website employs cookies to enhance a well-rounded diet,
      serving as a delightful treat for your senses following the intake
      of wholesome yet unexciting meals. Opting in to enjoy our cookies
      is not mandatory but is advised for a tasteful experience.
      <span class="block mt-2">
       See our <a href="#" class="font-semibold text-indigo-600">cookie policy</a>.
      </span>
     </p>
     <div class="flex flex-none items-center gap-x-5"> <button type="button" class="rounded-full bg-orange-600 px-8 py-2 h-12 text-sm font-semibold text-white hover:bg-orange-500 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2">Accept all</button> <button type="button" class="text-sm font-semibold leading-6 text-gray-900" @click="isOpen = false">Reject all</button> </div>
    </div>
   </div> 
  </div> 
  <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2">
   <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
    <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 a bottom drawer with Tailwind CSS and Alpinejs
      </p>
      <p class="mt-2 text-xs text-orange-600 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-a-bottom-drawer-tailwind-css-and-alpinejs/" 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-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-600">Tutorial</a> </div>
      <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/drawer/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-600">Get the code</a> </div>
     </div>
    </div>
   </div>
  </div> 
 </div>
</section>

Related Examples

Banner for app download
Show App Download Buttons for the App Store and Play Store

Author:
Pixel Perfect

1 year ago

1.5k
REGISTER - CTA - SECTION animation

Author:
ABDO-SY

5 months ago

420
Responsive About Section with Tailwind CSS
Built a sleek and fully responsive About Section for my portfolio using Tailwind CSS! 🚀 Designed for smooth adaptability across all screen sizes with a modern and minimal aesthetic. Perfect for showcasing skills, experience, and a personal touch!

Author:
Abdul Baset Bappy

5 months ago

1k
Tailwind CTA section

Author:
Moriba Traore

2 years ago

12.8k
Call to action

Author:
Leon Bachmann

2 years ago

8.4k
Very simple hero

Author:
Laurits

2 years ago

8.6k
Cookie consent
Sticky Bottom Cookie Consent Notification

Author:
Sophia Baker

2 years ago

10.6k
Buy Me a Coffee CTA section

Author:
Sienna

2 years ago

9.6k
CTA card with gradient border

Author:
Sameer Sultana

2 years ago

13.6k
Login page
Login and register page, you can reuse both

Author:
Abhiraj

7 months ago

1.4k
E-Commerce Delivery Truck Animation
This responsive CSS animation showcases a delivery bus transporting a package to its destination, created entirely with Tailwind CSS and pure HTML. The animation features

Author:
Bonimater

3 months ago

600
Hero Section
Full width hero section for landing pages

Author:
Manon Daniel

3 years ago

13.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components