Notifications

Notification Container and Panel

<div class="notifications-container">
            <div class="notifications-panel">
                <!--Notifications in here -->
            </div>
        </div>

Global notification live region, render this permanently at the end of the document
Notification panel, dynamically insert this into the live region when it needs to be displayed

Notifications at the bottom

<div class="notifications-container notifications-bottom">
            <div class="notifications-panel">
                <!--Notifications in here -->
            </div>
        </div>

Add notifications to the bottom of the page

Notification

<div class="notification">
                    <div class="p-4">
                        <div class="flex items-start">
                            <div class="flex-shrink-0">
                                <i class="fa-light fa-circle-check text-md items-center text-success-400"></i>
                            </div>
                            <div class="ml-3 w-0 flex-1 pt-0.5">
                                <p class="text-sm font-medium text-header">Successfully saved!</p>
                                <p class="mt-1 text-sm text-body">Anyone with a link can now view this file.</p>
                            </div>
                            <div class="ml-4 flex flex-shrink-0">
                                <button type="button" class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                                    <i class="fa-light fa-times text-md items-center text-body/50"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

Notification with a button group

<div class="notification">
                    <div class="p-4">
                        <div class="flex items-start">
                            <div class="flex-shrink-0">
                                <i class="fa-light fa-spider text-md items-center text-danger-400"></i>
                            </div>
                            <div class="ml-3 w-0 flex-1 pt-0.5">
                                <p class="text-sm font-medium text-header">Crawl failed!</p>
                                <p class="mt-1 text-sm text-body">Your crawl has errored.</p>
                                <div class="button-group inline-flex mt-4">
                                    <button class="btn-default text-xs"><i class="fa-solid fa-repeat text-xs items-center opacity-40"></i> Restart</button>
                                    <button class="btn-default whitespace-nowrap  text-xs"><i class="fa-solid fa-gear text-xs items-center opacity-40"></i>Change Settings</button>
                                </div>
                            </div>
                            <div class="ml-4 flex flex-shrink-0">
                                <button type="button" class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                                    <i class="fa-light fa-times text-md items-center text-body/50"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>