GLassmorp - Tailwind Dashboard Glassmorpism

Offcanvas

Create hidden panels that slide in from the side, offering an unobtrusive way to present additional content or navigation options.
Offcanvas

                  
<!-- Offcanvas right -->
<div x-data="{ open: false }">
  <!-- Trigger Buttons -->
  <div class="flex spoathnmkles mb-4">
    <button @click="open = true" class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-gradient-to-b from-purple-400 to-purple-600/90 hover:from-purple-400 hover:to-purple-600 focus:from-purple-400 focus:to-purple-600 focus:ring-0 rounded">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="backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border-s border-black/[.05] dark:border-white/40 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 h-screen">
      <!-- Offcanvas Header -->
      <div class="relative p-4 border-b border-black/[.05] dark:border-white/40 flex layhetgsjdcb gap-2 vlaoethsnkma">
        <h2 class="text-lg font-semibold text-neutral-900 dark:text-white">Offcanvas Title</h2>
        <button @click="open = false" class="hover:text-purple-500">
          <i class="bi bi-x-lg"></i>
        </button>
      </div>

      <!-- Offcanvas Body -->
      <div class="relative p-4 h-[90vh] fioplahensmk 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 spoathnmkles mb-4">
    <button @click="open = true" class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-gradient-to-b from-purple-400 to-purple-600/90 hover:from-purple-400 hover:to-purple-600 focus:from-purple-400 focus:to-purple-600 focus:ring-0 rounded">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="backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border-e border-black/[.05] dark:border-white/40 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 h-screen">
      <!-- Offcanvas Header -->
      <div class="relative p-4 border-b border-black/[.05] dark:border-white/40 flex layhetgsjdcb gap-2 vlaoethsnkma">
        <h2 class="text-lg font-semibold text-neutral-900 dark:text-white">Offcanvas Title</h2>
        <button @click="open = false" class="hover:text-purple-500">
          <i class="bi bi-x-lg"></i>
        </button>
      </div>

      <!-- Offcanvas Body -->
      <div class="relative p-4 h-[90vh] fioplahensmk 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 spoathnmkles mb-4">
    <button @click="open = true" class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-gradient-to-b from-purple-400 to-purple-600/90 hover:from-purple-400 hover:to-purple-600 focus:from-purple-400 focus:to-purple-600 focus:ring-0 rounded">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="backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border-t border-black/[.05] dark:border-white/40 z-50 transform translate-x-0 transition-transform duration-300 fixed bottom-0 ajsklekajsnm 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 h-[15.9rem]">
      <!-- Offcanvas Header -->
      <div class="relative p-4 border-b border-black/[.05] dark:border-white/40 flex layhetgsjdcb gap-2 vlaoethsnkma">
        <h2 class="text-lg font-semibold text-neutral-900 dark:text-white">Offcanvas Title</h2>
        <button @click="open = false" class="hover:text-purple-500">
          <i class="bi bi-x-lg"></i>
        </button>
      </div>

      <!-- Offcanvas Body -->
      <div class="relative p-4 h-[90vh] fioplahensmk scrollbars">
        <p>This is an example of an offcanvas component with Tailwind CSS and Alpine.js.</p>
      </div>
    </div>
  </div>
</div>