Alerts

            <div
    x-data="{ ...globalAlert() }"
    x-init="init()"
    x-show="show"
    x-transition:enter="transition duration-300"
    x-transition:leave="transition duration-300"
    class="absolute bottom-0 inset-x-0 py-4 overflow-y-hidden"
>
    <div
        x-show="show"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="transform translate-y-full"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-end="transform translate-y-full"
        class="container"
    >
        <div
            role="alert"
            class="flex items-center justify-between px-8 py-4 text-black bg-yellow-400 rounded-md shadow-sm"
        >
            <p>Questions about campus opening and COVID-19 testing? Go here to get the latest...</p>
            <button
                class="ml-4 p-1 rounded-full transition-colors hover:text-gray-800 focus:outline-none focus:ring focus:ring-blue-500"
                x-on:click="close"
            >
                <i data-feather="x-circle" class="w-5 h-5"></i>
            </button>
        </div>
    </div>
</div>

<script>
    const globalAlert = () => {
        return {
            show: false,

            alertName: 'alert-name', // Update this to be unique on your site

            init() {
                // Uncomment this conditional to make the alert stay hidden after being closed
                // if (localStorage && ! localStorage.getItem('hide-' + this.alertName)) {
                this.show = true;
                // }
            },

            close() {
                this.show = false;

                // Uncomment the lines below to make the alert stay hidden after being closed
                // if (localStorage) {
                //     localStorage.setItem('hide-' + this.alertName, true)
                // }
            }
        }
    }
</script>

        

            <div
    x-data="{ ...globalAlert() }"
    x-init="init()"
    x-show="show"
    x-transition:enter="transition duration-300"
    x-transition:leave="transition duration-300"
    class="absolute bottom-0 inset-x-0 overflow-y-hidden"
>
    <div
        x-show="show"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="transform translate-y-full"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-end="transform translate-y-full"
        class="transform bg-yellow-400"
    >
        <div
            role="alert"
            class="flex items-center justify-between px-4 py-4 text-black lg:px-16"
        >
            <p>Questions about campus opening and COVID-19 testing? Go here to get the latest...</p>
            <button
                class="ml-4 p-1 rounded-full transition-colors hover:text-gray-800 focus:outline-none focus:ring focus:ring-blue-500"
                x-on:click="close"
            >
                <i data-feather="x-circle" class="w-5 h-5"></i>
            </button>
        </div>
    </div>
</div>

<script>
    const globalAlert = () => {
        return {
            show: false,

            alertName: 'alert-name', // Update this to be unique on your site

            init() {
                // Uncomment this conditional to make the alert stay hidden after being closed
                // if (localStorage && ! localStorage.getItem('hide-' + this.alertName)) {
                this.show = true;
                // }
            },

            close() {
                this.show = false;

                // Uncomment the lines below to make the alert stay hidden after being closed
                // if (localStorage) {
                //     localStorage.setItem('hide-' + this.alertName, true)
                // }
            }
        }
    }
</script>