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.5k

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

Free Responsive Hero Section
Get this professional hero section for your website. Includes a gradient text effect, stylish background blurs, and a perfectly aligned image section. Easy to integrate and fully customizable for any project.

Author:
Homayoun

2 months ago

87
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

8 months ago

1.3k
Modern CTA section
CTA with background patterns

Author:
Nomthandazo Mhlongo

1 year ago

2.4k
Call-to-Action Card
Early Access Signup Card

Author:
Santiago Hernandez

1 year ago

1.9k
Cookie Consent bottom banner
Ask for cookie consent

Author:
Pixel Perfect

1 year ago

2.5k
Floating Action Button
This component displays a fixed, floating contact button panel positioned at the bottom-right corner of the screen. It provides users with quick access to key communication channels including WhatsApp, Email, and Instagram. Each icon is styled with vibrant, platform-specific colors and includes subtle hover animations for an interactive user experience. Ideal for improving accessibility and encouraging user engagement, especially on mobile devices.

Author:
Arturo Lizana

7 months ago

1.1k
CTA block
with user avatars and 2 buttons

Author:
Carla Hoffman

1 year ago

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

Author:
Abhiraj

10 months ago

1.7k
Cookie consent banner

Author:
Leif99

2 years ago

16.8k
Boimator welcoming back
Boimator welcoming back

Author:
Bonimater

3 months ago

256
Get Started ,Membership section - responsive - darkMode

Author:
ABDO-SY

8 months ago

820
Solo leveling
Animation & movie field,videos,games.

Author:
ORGIN_DREAMS

6 months ago

767

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components