Home
Michael Andreuzza
Bottom drawer with Tailwind CSS and alpinejs

Bottom drawer with Tailwind CSS and alpinejs

How to create a bottom drawer with Tailwind CSS and Alpinejs

This tailwind example is contributed by Michael Andreuzza, on 09-May-2024. Component is made with Tailwind CSS v3. It is responsive.

Cookie consent

Author Michael Andreuzza

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