Snackbar

                  
<!-- snackbar bottom -->
<div x-data="{ show: false }"  x-init="function() {  setTimeout(() => {  this.show = false;  }, 5000);}">
  <!-- trigger snackbar -->
  <button @click="show = 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">Show snackbar</button>

  <!-- Snackbar -->
  <div  x-show="show" style="display:none"
    x-transition:enter="transition-transform duration-[400ms]"
    x-transition:enter-start="translate-y-full"
    x-transition:enter-end="translate-y-0"
    x-transition:leave="transition-transform duration-[400ms]"
    x-transition:leave-start="translate-y-0"
    x-transition:leave-end="translate-y-full"
    class="z-[60] fixed bottom-4 end-4 flex klsuaonrmcha layhetgsjdcb w-5/6 sm:w-96 spoathnmkles py-4 dkslaoeyhnmj shadow-md rounded backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40">
    <p class="flex flex-grow text-sm tracking-[0.25px]">Single-line snackbar</p>
    <button @click="show = false" class="flex layhetgsjdcb">
      <span class="bi bi-x-lg"></span>
    </button>
  </div>
</div>


<!-- snackbar right -->
<div x-data="{ show: false }"  x-init="function() {  setTimeout(() => {  this.show = false;  }, 5000);}">
  <!-- trigger snackbar -->
  <button @click="show = 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">Show snackbar</button>

  <!-- Snackbar -->
  <div  x-show="show" style="display:none"
    x-transition:enter="transition-transform duration-[400ms]"
    x-transition:enter-start="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="translate-x-full"
    class="z-[60] fixed bottom-4 end-4 flex klsuaonrmcha layhetgsjdcb w-5/6 sm:w-96 spoathnmkles py-4 dkslaoeyhnmj shadow-md rounded backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40">
    <p class="flex flex-grow text-sm tracking-[0.25px]">Single-line snackbar</p>
    <button @click="show = false" class="flex layhetgsjdcb">
      <span class="bi bi-x-lg"></span>
    </button>
  </div>
</div>