Snackbar
This is a snackbar
<!-- test snackbar -->
<button data-type="snackbar" data-target="#snackbar_xa" class="py-3 px-4 relative inline-flex flex-row items-center justify-center gap-x-2 rounded text-sm tracking-[.00714em] font-medium bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 shadow-outset text-primary-700 dark:text-primary-200">Show Snackbar</button>
<!-- snackbar -->
<div id="snackbar_xa" class="[&.show]:opacity-100 [&.show]:!bottom-4 -bottom-full z-[60] fixed opacity-0 duration-[400ms] ease-[cubic-bezier(0, 0, 0, 1)] flex flex-row items-center justify-between w-5/6 sm:w-60 gap-4 py-3 px-4 shadow-md rounded bg-primary-900 text-white dark:text-black dark:bg-primary-200 left-4">
<p class="flex flex-grow text-sm tracking-[0.25px]">This is a snackbar</p>
<button data-close="#snackbar_xa">x</button>
</div>