php-flasher/docs/_includes/themes/amazon.html

<!-- Flasher Theme Notifications -->
<div class="p-3 grid grid-cols-1 md:grid-cols-2 gap-3">
    <!-- Success -->
    <div class="fl-amazon fl-success fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
        <div class="fl-amazon-alert">
            <div class="fl-alert-content">
                <div class="fl-icon-container">
                    <svg viewBox="0 0 24 24" width="24" height="24">
                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
                    </svg>
                </div>
                <div class="fl-text-content">
                    <div class="fl-alert-title">Success!</div>
                    <div class="fl-alert-message">Data has been saved successfully!</div>
                </div>
            </div>
            <div class="fl-alert-actions">
                <button class="fl-close" aria-label="Close notification">
                    <svg viewBox="0 0 24 24" width="16" height="16">
                        <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Error -->
    <div class="fl-amazon fl-error fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="fl-amazon-alert">
            <div class="fl-alert-content">
                <div class="fl-icon-container">
                    <svg viewBox="0 0 24 24" width="24" height="24">
                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
                    </svg>
                </div>
                <div class="fl-text-content">
                    <div class="fl-alert-title">Problem</div>
                    <div class="fl-alert-message">Oops! Something went wrong!</div>
                </div>
            </div>
            <div class="fl-alert-actions">
                <button class="fl-close" aria-label="Close notification">
                    <svg viewBox="0 0 24 24" width="16" height="16">
                        <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Warning -->
    <div class="fl-amazon fl-warning fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="fl-amazon-alert">
            <div class="fl-alert-content">
                <div class="fl-icon-container">
                    <svg viewBox="0 0 24 24" width="24" height="24">
                        <path fill="currentColor" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path>
                    </svg>
                </div>
                <div class="fl-text-content">
                    <div class="fl-alert-title">Warning</div>
                    <div class="fl-alert-message">Are you sure you want to proceed?</div>
                </div>
            </div>
            <div class="fl-alert-actions">
                <button class="fl-close" aria-label="Close notification">
                    <svg viewBox="0 0 24 24" width="16" height="16">
                        <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Info -->
    <div class="fl-amazon fl-info fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
        <div class="fl-amazon-alert">
            <div class="fl-alert-content">
                <div class="fl-icon-container">
                    <svg viewBox="0 0 24 24" width="24" height="24">
                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path>
                    </svg>
                </div>
                <div class="fl-text-content">
                    <div class="fl-alert-title">Information</div>
                    <div class="fl-alert-message">Welcome back!</div>
                </div>
            </div>
            <div class="fl-alert-actions">
                <button class="fl-close" aria-label="Close notification">
                    <svg viewBox="0 0 24 24" width="16" height="16">
                        <path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>
</div>