<button type="button" class="btn-md text-sm font-medium rounded-md border border-transparent bg-primary text-white hover:bg-primaryemphasis disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#hs-overlay-example">
Open offcanvas
</button>
<div id="hs-overlay-example" class="hs-overlay hs-overlay-open:translate-x-0 hidden -translate-x-full fixed top-0 start-0 transition-all duration-300 transform h-full max-w-xs w-full z-[80] bg-white border-e dark:bg-gray-800 dark:border-gray-700" tabindex="-1">
   <div class="flex justify-between items-center py-3 px-4 border-b dark:border-gray-700">
      <h3 class="font-bold text-base text-gray-800 dark:text-white">
         Offcanvas title
      </h3>
      <button type="button" class="flex justify-center items-center size-7 text-sm font-medium rounded-full border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#hs-overlay-example">
      <span class="sr-only">Close modal</span>
      <i class="ti ti-x text-lg leading-tight font-medium"></i>
      </button>
   </div>
   <div class="p-4">
      <p class="text-gray-800 dark:text-gray-400 text-base">
         Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
      </p>
   </div>
</div>
            
                                                    

   
<button type="button" class="btn-md text-sm font-medium rounded-md border border-transparent bg-primary text-white hover:bg-primaryemphasis disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#hs-overlay-top">
Toggle top offcanvas
</button>
<div id="hs-overlay-top" class="hs-overlay hs-overlay-open:translate-y-0 -translate-y-full fixed top-0 inset-x-0 transition-all duration-300 transform max-h-40 size-full z-[80] bg-white border-b dark:bg-gray-800 dark:border-gray-700 hidden" tabindex="-1">
   <div class="flex justify-between items-center py-3 px-4 border-b dark:border-gray-700">
      <h3 class="font-bold text-gray-800 text-base dark:text-white">
         Offcanvas title
      </h3>
      <button type="button" class="flex justify-center items-center size-7 text-sm font-medium rounded-full border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#hs-overlay-top">
      <span class="sr-only">Close modal</span>
      <i class="ti ti-x text-lg leading-tight font-medium"></i>
      </button>
   </div>
   <div class="p-4">
      <p class="text-gray-800 text-base dark:text-gray-400">
         Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
      </p>
   </div>
</div>
<button type="button" class="btn-md text-sm font-medium rounded-md border border-transparent bg-secondary text-white hover:bg-secondaryemphasis disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#hs-overlay-right">
Toggle right offcanvas
</button>
<div id="hs-overlay-right" class="hs-overlay hs-overlay-open:translate-x-0 hidden translate-x-full fixed top-0 end-0 transition-all duration-300 transform h-full max-w-xs w-full z-[80] bg-white border-s dark:bg-gray-800 dark:border-gray-700" tabindex="-1">
   <div class="flex justify-between items-center py-3 px-4 border-b dark:border-gray-700">
      <h3 class="font-bold text-base text-gray-800 dark:text-white">
         Offcanvas title
      </h3>
      <button type="button" class="flex justify-center items-center size-7 text-sm font-medium rounded-full border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#hs-overlay-right">
      <span class="sr-only">Close modal</span>
      <i class="ti ti-x text-lg leading-tight font-medium"></i>
      </button>
   </div>
   <div class="p-4">
      <p class="text-gray-800 text-base dark:text-gray-400">
         Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
      </p>
   </div>
</div>
<button type="button" class="btn-md text-sm font-medium rounded-md border border-transparent bg-error text-white hover:bg-erroremphasis disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#hs-overlay-bottom">
Toggle bottom offcanvas
</button>
<div id="hs-overlay-bottom" class="hs-overlay hs-overlay-open:translate-y-0 translate-y-full fixed bottom-0 inset-x-0 transition-all duration-300 transform max-h-40 size-full z-[80] bg-white border-b dark:bg-gray-800 dark:border-gray-700 hidden" tabindex="-1">
   <div class="flex justify-between items-center py-3 px-4 border-b dark:border-gray-700">
      <h3 class="font-bold text-base text-gray-800 dark:text-white">
         Offcanvas title
      </h3>
      <button type="button" class="flex justify-center items-center size-7 text-sm font-medium rounded-full border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#hs-overlay-bottom">
      <span class="sr-only">Close modal</span>
      <i class="ti ti-x text-lg leading-tight font-medium"></i>
      </button>
   </div>
   <div class="p-4">
      <p class="text-gray-800 text-base dark:text-gray-400">
         Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
      </p>
   </div>
</div>
            
                                                    

   
<div class="flex flex-wrap gap-4">
   <button type="button" class="m-1 ms-0 btn-md text-sm font-medium rounded-md border border-transparent bg-primary text-white hover:bg-primaryemphasis disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#hs-overlay-body-scrolling">
   Body scrolling & no backdrop
   </button>
   <div id="hs-overlay-body-scrolling" class="hs-overlay hs-overlay-open:translate-x-0 hidden -translate-x-full fixed top-0 start-0 transition-all duration-300 transform h-full max-w-xs w-full z-[80] bg-white border-e dark:bg-gray-800 dark:border-gray-700 [--body-scroll:true] [--overlay-backdrop:false]" tabindex="-1">
      <div class="flex justify-between items-center py-3 px-4 border-b dark:border-gray-700">
         <h3 class="font-bold text-base text-gray-800 dark:text-white">
            Colored with scrolling
         </h3>
         <button type="button" class="flex justify-center items-center size-7 text-sm font-medium rounded-full border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#hs-overlay-body-scrolling">
         <span class="sr-only">Close modal</span>
         <i class="ti ti-x text-lg leading-tight font-medium"></i>
         </button>
      </div>
      <div class="p-4">
         <p class="text-gray-800 text-base dark:text-gray-400">
            Try scrolling the rest of the page to see this option in action.
         </p>
      </div>
   </div>
   <button type="button" class="m-1 ms-0 btn-md text-sm font-medium rounded-md border border-transparent bg-success text-white hover:bg-successemphasis disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#hs-overlay-backdrop-with-scrolling">
   Both scrolling & backdrop
   </button>
   <div id="hs-overlay-backdrop-with-scrolling" class="hs-overlay hs-overlay-open:translate-x-0 hidden -translate-x-full fixed top-0 start-0 transition-all duration-300 transform h-full max-w-xs w-full z-[80] bg-white border-e dark:bg-gray-800 dark:border-gray-700" tabindex="-1" data-hs-overlay-scroll="true">
      <div class="flex justify-between items-center py-3 px-4 border-b dark:border-gray-700">
         <h3 class="font-bold text-base text-gray-800 dark:text-white">
            Backdrop with scrolling
         </h3>
         <button type="button" class="flex justify-center items-center size-7 text-sm font-medium rounded-full border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#hs-overlay-backdrop-with-scrolling">
         <span class="sr-only">Close modal</span>
         <i class="ti ti-x text-lg leading-tight font-medium"></i>
         </button>
      </div>
      <div class="p-4">
         <p class="text-gray-800 dark:text-gray-400 text-base">
            Try scrolling the rest of the page to see this option in action.
         </p>
      </div>
   </div>
</div>
            
                                                    

   
<div class="flex flex-wrap gap-4">
   <button type="button" class="m-1 ms-0 btn-md text-sm font-medium rounded-md border border-transparent bg-primary text-white hover:bg-primaryemphasis disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#hs-overlay-body-scrolling">
   Body scrolling & no backdrop
   </button>
   <div id="hs-overlay-body-scrolling" class="hs-overlay hs-overlay-open:translate-x-0 hidden -translate-x-full fixed top-0 start-0 transition-all duration-300 transform h-full max-w-xs w-full z-[80] bg-white border-e dark:bg-gray-800 dark:border-gray-700 [--body-scroll:true] [--overlay-backdrop:false]" tabindex="-1">
      <div class="flex justify-between items-center py-3 px-4 border-b dark:border-gray-700">
         <h3 class="font-bold text-base text-gray-800 dark:text-white">
            Colored with scrolling
         </h3>
         <button type="button" class="flex justify-center items-center size-7 text-sm font-medium rounded-full border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#hs-overlay-body-scrolling">
         <span class="sr-only">Close modal</span>
         <i class="ti ti-x text-lg leading-tight font-medium"></i>
         </button>
      </div>
      <div class="p-4">
         <p class="text-gray-800 text-base dark:text-gray-400">
            Try scrolling the rest of the page to see this option in action.
         </p>
      </div>
   </div>
   <button type="button" class="m-1 ms-0 btn-md text-sm font-medium rounded-md border border-transparent bg-success text-white hover:bg-successemphasis disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#hs-overlay-backdrop-with-scrolling">
   Both scrolling & backdrop
   </button>
   <div id="hs-overlay-backdrop-with-scrolling" class="hs-overlay hs-overlay-open:translate-x-0 hidden -translate-x-full fixed top-0 start-0 transition-all duration-300 transform h-full max-w-xs w-full z-[80] bg-white border-e dark:bg-gray-800 dark:border-gray-700" tabindex="-1" data-hs-overlay-scroll="true">
      <div class="flex justify-between items-center py-3 px-4 border-b dark:border-gray-700">
         <h3 class="font-bold text-base text-gray-800 dark:text-white">
            Backdrop with scrolling
         </h3>
         <button type="button" class="flex justify-center items-center size-7 text-sm font-medium rounded-full border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600" data-hs-overlay="#hs-overlay-backdrop-with-scrolling">
         <span class="sr-only">Close modal</span>
         <i class="ti ti-x text-lg leading-tight font-medium"></i>
         </button>
      </div>
      <div class="p-4">
         <p class="text-gray-800 dark:text-gray-400 text-base">
            Try scrolling the rest of the page to see this option in action.
         </p>
      </div>
   </div>
</div>