<!-- Offcanvas right -->
<div x-data="{ open: false }">
<!-- Trigger Buttons -->
<div class="flex ghsnkalieksml mb-4">
<button @click="open = true" class="frame-corner inline-flex olwuyhsbcnmdj thsjkalsueijm qaksleiuryhnv yujamnshjekwn py-2 uppercase font-medium border border-primary-600 text-primary-600 hover:border-primary-300 hover:text-black focus:text-black focus:border-primary-300 hover:bg-primary-300 focus:bg-primary-300 focus:outline-none focus:ring-0">Open Right</button>
</div>
<!-- Offcanvas Background -->
<div x-show="open" @click="open = false" style="display:none;" class="fixed inset-0 bg-black bg-opacity-80 z-40"></div>
<!-- Offcanvas Panel -->
<div class="bg-black border-s border-primary-600 z-50 transform translate-x-0 transition-transform duration-300 fixed top-0 end-0 h-full w-80"
x-show="open"
style="display:none"
x-transition:enter="transition-transform duration-[400ms]"
x-transition:enter-start="ltr:translate-x-full rtl:-translate-x-full"
x-transition:enter-end="translate-x-0"
x-transition:leave="transition-transform duration-[400ms]"
x-transition:leave-start="translate-x-0"
x-transition:leave-end="ltr:translate-x-full rtl:-translate-x-full"
@click.away="open = false">
<div class="relative frame-corner h-screen">
<div class="frame2 absolute inset-[1px]"></div>
<!-- Offcanvas Header -->
<div class="relative bg-black p-4 border-b border-primary-600 flex olwuyhsbcnmdj thsjkalsueijm bnshkajshwjio">
<h2 class="text-lg font-semibold text-primary-300">Offcanvas Title</h2>
<button @click="open = false" class="hover:text-primary-300">
<i class="bi bi-x-lg"></i>
</button>
</div>
<!-- Offcanvas Body -->
<div class="relative p-4 h-[90vh] overflow-auto scrollbars">
<p>This is an example of an offcanvas component with Tailwind CSS and Alpine.js.</p>
</div>
</div>
</div>
</div>
<!-- Offcanvas left -->
<div x-data="{ open: false }">
<!-- Trigger Buttons -->
<div class="flex ghsnkalieksml mb-4">
<button @click="open = true" class="frame-corner inline-flex olwuyhsbcnmdj thsjkalsueijm qaksleiuryhnv yujamnshjekwn py-2 uppercase font-medium border border-primary-600 text-primary-600 hover:border-primary-300 hover:text-black focus:text-black focus:border-primary-300 hover:bg-primary-300 focus:bg-primary-300 focus:outline-none focus:ring-0">Open Left</button>
</div>
<!-- Offcanvas Background -->
<div x-show="open" @click="open = false" style="display:none;" class="fixed inset-0 bg-black bg-opacity-80 z-40"></div>
<!-- Offcanvas Panel -->
<div class="bg-black border-e border-primary-600 z-50 transform translate-x-0 transition-transform duration-300 fixed top-0 start-0 h-full w-80"
x-show="open"
style="display:none"
x-transition:enter="transition-transform duration-[400ms]"
x-transition:enter-start="ltr:-translate-x-full rtl:translate-x-full"
x-transition:enter-end="translate-x-0"
x-transition:leave="transition-transform duration-[400ms]"
x-transition:leave-start="translate-x-0"
x-transition:leave-end="ltr:-translate-x-full rtl:translate-x-full"
@click.away="open = false">
<div class="relative frame-corner h-screen">
<div class="frame2 absolute inset-[1px]"></div>
<!-- Offcanvas Header -->
<div class="relative bg-black p-4 border-b border-primary-600 flex olwuyhsbcnmdj thsjkalsueijm bnshkajshwjio">
<h2 class="text-lg font-semibold text-primary-300">Offcanvas Title</h2>
<button @click="open = false" class="hover:text-primary-300">
<i class="bi bi-x-lg"></i>
</button>
</div>
<!-- Offcanvas Body -->
<div class="relative p-4 h-[90vh] overflow-auto scrollbars">
<p>This is an example of an offcanvas component with Tailwind CSS and Alpine.js.</p>
</div>
</div>
</div>
</div>
<!-- Offcanvas bottom -->
<div x-data="{ open: false }">
<!-- Trigger Buttons -->
<div class="flex ghsnkalieksml mb-4">
<button @click="open = true" class="frame-corner inline-flex olwuyhsbcnmdj thsjkalsueijm qaksleiuryhnv yujamnshjekwn py-2 uppercase font-medium border border-primary-600 text-primary-600 hover:border-primary-300 hover:text-black focus:text-black focus:border-primary-300 hover:bg-primary-300 focus:bg-primary-300 focus:outline-none focus:ring-0">Open Bottom</button>
</div>
<!-- Offcanvas Background -->
<div x-show="open" @click="open = false" style="display:none;" class="fixed inset-0 bg-black bg-opacity-80 z-40"></div>
<!-- Offcanvas Panel -->
<div class="bg-black border-t border-primary-600 z-50 transform translate-x-0 transition-transform duration-300 fixed bottom-0 inset-x-0 w-full h-64"
x-show="open"
style="display:none"
x-transition:enter="transition-transform duration-[400ms]"
x-transition:enter-start="translate-y-full"
x-transition:enter-end="translate-x-0"
x-transition:leave="transition-transform duration-[400ms]"
x-transition:leave-start="translate-x-0"
x-transition:leave-end="translate-y-full"
@click.away="open = false">
<div class="relative frame-corner h-[15.9rem]">
<div class="frame2 absolute inset-[1px]"></div>
<!-- Offcanvas Header -->
<div class="relative bg-black p-4 border-b border-primary-600 flex olwuyhsbcnmdj thsjkalsueijm bnshkajshwjio">
<h2 class="text-lg font-semibold text-primary-300">Offcanvas Title</h2>
<button @click="open = false" class="hover:text-primary-300">
<i class="bi bi-x-lg"></i>
</button>
</div>
<!-- Offcanvas Body -->
<div class="relative p-4 h-[90vh] overflow-auto scrollbars">
<p>This is an example of an offcanvas component with Tailwind CSS and Alpine.js.</p>
</div>
</div>
</div>
</div>