<pre style="word-wrap: break-word; white-space: pre-wrap;">&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Alpine Examples&lt;/title&gt;

    &lt;script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"
            defer
    &gt;&lt;/script&gt;

    &lt;link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet"
    &gt;
&lt;/head&gt;

&lt;body class="p-12"&gt;
    &lt;!-- Flash --&gt;
    &lt;div
        x-data="{ show: false, message: '' }"
        x-show.transition.opacity.scale.75.duration="show"
        @flash.window="
            show = true;
            message = $event.detail;
            setTimeout(() =&gt; show = false, 3000);
        "
        x-text="message"
        class="fixed bottom-0 right-0 mb-4 mr-4 bg-blue-500 text-white p-4 rounded"
    &gt;

    &lt;/div&gt;

    &lt;script&gt;
        // Additionally, any component can call $dispatch('flash', 'A flash message');

        window.flash = message =&gt; window.dispatchEvent(new CustomEvent('flash', {detail: message}));
    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</pre>