tailwind-alpine-alert

<div class="relative flex justify-center" x-data="snackBarData()" x-init="hideAlert()">
    <div class="fixed bottom-10 transition duration-300" x-show="isOpen" x-transition:leave="ease-in" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
        <div class="bg-red-500 text-white flex items-center space-x-5 text-sm font-bold px-4 py-3 rounded shadow" role="alert">
            <span class="flex">alertMessage</span>
            <button class="focus:outline-none" @click="isOpen = false">
                <x-icons.x />
            </button>
        </div>
    </div>
</div>

<script>
    window.snackBarData = function () {
        return {
            isOpen: true,
            openAlert: function () {
                this.isOpen = true
            },
            hideAlert: function () {
                setTimeout(() => {
                    this.isOpen = false
                }, 3000);
            }
        }
    };
</script>