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

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

call-to-action button

Author:
Elijah Davis

3 years ago

9.3k
Cookie Policy Alert
Notify users about the use of cookies and tracking technologies. It offers choices to accept or decline cookies and modify preferences.

Author:
Mereani Waqa

2 years ago

7.5k
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Author:
Abdul Baset Bappy

11 months ago

1.1k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

8 months ago

1.5k
Call to action
slightly tilted call to action section

Author:
Simon Scheffer

3 years ago

11.4k
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

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

Author:
Abhiraj

1 year ago

2k
SliceHeaven
delivering pizza

Author:
INGRIDE MUZIRANENGE

9 months ago

808
Geaux Code CTA Section
CTA with background patterns

Author:
Andrew Weisbeck

1 year ago

2k
Boost Your Business with a Stunning Website!
Take your online presence to the next level with a high-performing, visually captivating website. Let’s build something amazing together!

Author:
Vikas Kushwah

11 months ago

905
Waitlist signup form

Author:
Anonymous

2 years ago

5k
Beautiful CTA w/ large buttons
This CTA card also has a features list

Author:
Carla Hoffman

2 years ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components