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

<!-- Flasher Theme Notifications -->
<div class="p-3 grid grid-cols-1 md:grid-cols-2 gap-3">
    <!-- Success -->
    <div class="fl-ruby fl-success fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
        <div class="fl-shine"></div>
        <div class="fl-content">
            <div class="fl-icon-circle">
                <div class="fl-icon"></div>
            </div>
            <div class="fl-text">
                <div class="fl-message">Data has been saved successfully!</div>
            </div>
            <button class="fl-close" aria-label="Close success message">×</button>
        </div>
        <div class="fl-progress-bar">
            <div class="fl-progress" style="width: 40%;"></div>
        </div>
    </div>

    <!-- Error -->
    <div class="fl-ruby fl-error fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="fl-shine"></div>
        <div class="fl-content">
            <div class="fl-icon-circle">
                <div class="fl-icon"></div>
            </div>
            <div class="fl-text">
                <div class="fl-message">Oops! Something went wrong!</div>
            </div>
            <button class="fl-close" aria-label="Close error message">×</button>
        </div>
        <div class="fl-progress-bar">
            <div class="fl-progress" style="width: 30%;"></div>
        </div>
    </div>

    <!-- Warning -->
    <div class="fl-ruby fl-warning fl-container fl-show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="fl-shine"></div>
        <div class="fl-content">
            <div class="fl-icon-circle">
                <div class="fl-icon"></div>
            </div>
            <div class="fl-text">
                <div class="fl-message">Are you sure you want to proceed?</div>
            </div>
            <button class="fl-close" aria-label="Close warning message">×</button>
        </div>
        <div class="fl-progress-bar">
            <div class="fl-progress" style="width: 20%;"></div>
        </div>
    </div>

    <!-- Info -->
    <div class="fl-ruby fl-info fl-container fl-show" role="status" aria-live="polite" aria-atomic="true">
        <div class="fl-shine"></div>
        <div class="fl-content">
            <div class="fl-icon-circle">
                <div class="fl-icon"></div>
            </div>
            <div class="fl-text">
                <div class="fl-message">Welcome back!</div>
            </div>
            <button class="fl-close" aria-label="Close info message">×</button>
        </div>
        <div class="fl-progress-bar">
            <div class="fl-progress" style="width: 10%;"></div>
        </div>
    </div>
</div>