Themes
Choose your theme
rubick
icewall
tinker
enigma
Layouts
Choose your layout
side menu
simple menu
top menu
Accent Colors
Choose your accent color
Appearance
Choose your appearance
Light
Dark
Enigma
Pages
Mail Settings
Users & Permissions
Transactions Report
Users
Al Pacino
alpacino@left4code.com
Tom Cruise
tomcruise@left4code.com
Johnny Depp
johnnydepp@left4code.com
John Travolta
johntravolta@left4code.com
Products
Nikon Z6
Photography
Sony A7 III
Photography
Nikon Z6
Photography
Nikon Z6
Photography

## Alert

## Basic Alerts

Show example code
Awesome simple alert
Awesome simple alert
Awesome simple alert
Awesome simple alert
Awesome simple alert
Awesome simple alert
Awesome simple alert

                    HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-primary border-primary text-white dark:border-primary mb-2"
    HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 mb-2"
    HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-success border-success text-slate-900 dark:border-success mb-2"
    HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-warning border-warning text-slate-900 dark:border-warning mb-2"
    HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-pending border-pending text-white dark:border-pending mb-2"
    HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-danger border-danger text-white dark:border-danger mb-2"
    HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300 mb-2"
    HTMLCloseTagAwesome simple alertHTMLOpenTag/divHTMLCloseTag

## Icon Alerts

Show example code
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon

                    HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-primary border-primary text-white dark:border-primary mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-circle"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with iconHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-octagon"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with iconHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-success border-success text-slate-900 dark:border-success mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-triangle"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with iconHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-warning border-warning text-slate-900 dark:border-warning mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-circle"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with iconHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-pending border-pending text-white dark:border-pending mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-triangle"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with iconHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-danger border-danger text-white dark:border-danger mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-octagon"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with iconHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300 mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-triangle"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with iconHTMLOpenTag/divHTMLCloseTag

## Additional Content Alerts

Show example code
Awesome alert with additional info
New
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Awesome alert with additional info
New
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Awesome alert with additional info
New
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Awesome alert with additional info
New
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Awesome alert with additional info
New
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Awesome alert with additional info
New
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
Awesome alert with additional info
New
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

                    HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-primary border-primary text-white dark:border-primary mb-2"
    HTMLCloseTagHTMLOpenTagdiv class="flex items-center"HTMLCloseTag
                                        HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                            Awesome alert with additional info
                                        HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv class="ml-auto rounded-md bg-white px-1 text-xs text-slate-700"HTMLCloseTag
                                            New
                                        HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                        Lorem Ipsum is simply dummy text of the printing and
                                        typesetting industry. Lorem Ipsum has been the
                                        industry's standard dummy text ever since the 1500s.
                                    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 mb-2"
    HTMLCloseTagHTMLOpenTagdiv class="flex items-center"HTMLCloseTag
                                        HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                            Awesome alert with additional info
                                        HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv class="ml-auto rounded-md bg-slate-500 px-1 text-xs text-white"HTMLCloseTag
                                            New
                                        HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                        Lorem Ipsum is simply dummy text of the printing and
                                        typesetting industry. Lorem Ipsum has been the
                                        industry's standard dummy text ever since the 1500s.
                                    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-success border-success text-slate-900 dark:border-success mb-2"
    HTMLCloseTagHTMLOpenTagdiv class="flex items-center"HTMLCloseTag
                                        HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                            Awesome alert with additional info
                                        HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv class="ml-auto rounded-md bg-white px-1 text-xs text-slate-700"HTMLCloseTag
                                            New
                                        HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                        Lorem Ipsum is simply dummy text of the printing and
                                        typesetting industry. Lorem Ipsum has been the
                                        industry's standard dummy text ever since the 1500s.
                                    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-warning border-warning text-slate-900 dark:border-warning mb-2"
    HTMLCloseTagHTMLOpenTagdiv class="flex items-center"HTMLCloseTag
                                        HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                            Awesome alert with additional info
                                        HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv class="ml-auto rounded-md bg-white px-1 text-xs text-slate-700"HTMLCloseTag
                                            New
                                        HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                        Lorem Ipsum is simply dummy text of the printing and
                                        typesetting industry. Lorem Ipsum has been the
                                        industry's standard dummy text ever since the 1500s.
                                    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-pending border-pending text-white dark:border-pending mb-2"
    HTMLCloseTagHTMLOpenTagdiv class="flex items-center"HTMLCloseTag
                                        HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                            Awesome alert with additional info
                                        HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv class="ml-auto rounded-md bg-white px-1 text-xs text-slate-700"HTMLCloseTag
                                            New
                                        HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                        Lorem Ipsum is simply dummy text of the printing and
                                        typesetting industry. Lorem Ipsum has been the
                                        industry's standard dummy text ever since the 1500s.
                                    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-danger border-danger text-white dark:border-danger mb-2"
    HTMLCloseTagHTMLOpenTagdiv class="flex items-center"HTMLCloseTag
                                        HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                            Awesome alert with additional info
                                        HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv class="ml-auto rounded-md bg-white px-1 text-xs text-slate-700"HTMLCloseTag
                                            New
                                        HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                        Lorem Ipsum is simply dummy text of the printing and
                                        typesetting industry. Lorem Ipsum has been the
                                        industry's standard dummy text ever since the 1500s.
                                    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300 mb-2"
    HTMLCloseTagHTMLOpenTagdiv class="flex items-center"HTMLCloseTag
                                        HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
                                            Awesome alert with additional info
                                        HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv class="ml-auto rounded-md bg-slate-500 px-1 text-xs text-white"HTMLCloseTag
                                            New
                                        HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTagdiv class="mt-3"HTMLCloseTag
                                        Lorem Ipsum is simply dummy text of the printing and
                                        typesetting industry. Lorem Ipsum has been the
                                        industry's standard dummy text ever since the 1500s.
                                    HTMLOpenTag/divHTMLCloseTagHTMLOpenTag/divHTMLCloseTag

## Icon & Dismiss Alerts

Show example code
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon

                    HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-primary border-primary text-white dark:border-primary mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-circle"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with icon
                                    HTMLOpenTagbutton
        data-tw-merge
        data-tw-dismiss="alert"
        type="button"
        aria-label="Close"
        type="button" aria-label="Close" class="text-slate-800 py-2 px-3 absolute right-0 my-auto mr-2 text-white"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="x"
        class="stroke-1.5 w-5 h-5 h-4 w-4 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-secondary/70 border-secondary/70 text-slate-500 dark:border-darkmode-400 dark:bg-darkmode-400 dark:text-slate-300 mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-octagon"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with icon
                                    HTMLOpenTagbutton
        data-tw-merge
        data-tw-dismiss="alert"
        type="button"
        aria-label="Close"
        type="button" aria-label="Close" class="text-slate-800 py-2 px-3 absolute right-0 my-auto mr-2 btn-close"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="x"
        class="stroke-1.5 w-5 h-5 h-4 w-4 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-success border-success text-slate-900 dark:border-success mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-triangle"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with icon
                                    HTMLOpenTagbutton
        data-tw-merge
        data-tw-dismiss="alert"
        type="button"
        aria-label="Close"
        type="button" aria-label="Close" class="text-slate-800 py-2 px-3 absolute right-0 my-auto mr-2 btn-close"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="x"
        class="stroke-1.5 w-5 h-5 h-4 w-4 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-warning border-warning text-slate-900 dark:border-warning mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-circle"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with icon
                                    HTMLOpenTagbutton
        data-tw-merge
        data-tw-dismiss="alert"
        type="button"
        aria-label="Close"
        type="button" aria-label="Close" class="text-slate-800 py-2 px-3 absolute right-0 my-auto mr-2 btn-close"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="x"
        class="stroke-1.5 w-5 h-5 h-4 w-4 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-pending border-pending text-white dark:border-pending mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-triangle"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with icon
                                    HTMLOpenTagbutton
        data-tw-merge
        data-tw-dismiss="alert"
        type="button"
        aria-label="Close"
        type="button" aria-label="Close" class="text-slate-800 py-2 px-3 absolute right-0 my-auto mr-2 btn-close"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="x"
        class="stroke-1.5 w-5 h-5 h-4 w-4 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-danger border-danger text-white dark:border-danger mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-octagon"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with icon
                                    HTMLOpenTagbutton
        data-tw-merge
        data-tw-dismiss="alert"
        type="button"
        aria-label="Close"
        type="button" aria-label="Close" class="text-slate-800 py-2 px-3 absolute right-0 my-auto mr-2 text-white"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="x"
        class="stroke-1.5 w-5 h-5 h-4 w-4 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300 mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-triangle"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with icon
                                    HTMLOpenTagbutton
        data-tw-merge
        data-tw-dismiss="alert"
        type="button"
        aria-label="Close"
        type="button" aria-label="Close" class="text-slate-800 py-2 px-3 absolute right-0 my-auto mr-2 text-white"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="x"
        class="stroke-1.5 w-5 h-5 h-4 w-4 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag

## Outline Alerts

Show example code
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon

                    HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 border-primary text-primary dark:border-primary mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-circle"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with icon
                                    HTMLOpenTagbutton
        data-tw-merge
        data-tw-dismiss="alert"
        type="button"
        aria-label="Close"
        type="button" aria-label="Close" class="text-slate-800 py-2 px-3 absolute right-0 my-auto mr-2 btn-close"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="x"
        class="stroke-1.5 w-5 h-5 h-4 w-4 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-octagon"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with icon
                                    HTMLOpenTagbutton
        data-tw-merge
        data-tw-dismiss="alert"
        type="button"
        aria-label="Close"
        type="button" aria-label="Close" class="text-slate-800 py-2 px-3 absolute right-0 my-auto mr-2 btn-close"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="x"
        class="stroke-1.5 w-5 h-5 h-4 w-4 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 border-success text-success dark:border-success dark:border-success mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-triangle"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with icon
                                    HTMLOpenTagbutton
        data-tw-merge
        data-tw-dismiss="alert"
        type="button"
        aria-label="Close"
        type="button" aria-label="Close" class="text-slate-800 py-2 px-3 absolute right-0 my-auto mr-2 btn-close"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="x"
        class="stroke-1.5 w-5 h-5 h-4 w-4 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 border-warning text-warning dark:border-warning mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-circle"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with icon
                                    HTMLOpenTagbutton
        data-tw-merge
        data-tw-dismiss="alert"
        type="button"
        aria-label="Close"
        type="button" aria-label="Close" class="text-slate-800 py-2 px-3 absolute right-0 my-auto mr-2 btn-close"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="x"
        class="stroke-1.5 w-5 h-5 h-4 w-4 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 border-pending text-pending dark:border-pending mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-circle"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with icon
                                    HTMLOpenTagbutton
        data-tw-merge
        data-tw-dismiss="alert"
        type="button"
        aria-label="Close"
        type="button" aria-label="Close" class="text-slate-800 py-2 px-3 absolute right-0 my-auto mr-2 btn-close"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="x"
        class="stroke-1.5 w-5 h-5 h-4 w-4 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 border-danger text-danger dark:border-danger mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-octagon"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with icon
                                    HTMLOpenTagbutton
        data-tw-merge
        data-tw-dismiss="alert"
        type="button"
        aria-label="Close"
        type="button" aria-label="Close" class="text-slate-800 py-2 px-3 absolute right-0 my-auto mr-2 btn-close"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="x"
        class="stroke-1.5 w-5 h-5 h-4 w-4 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 border-dark text-dark dark:border-darkmode-800 dark:text-slate-300 mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-triangle"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with icon
                                    HTMLOpenTagbutton
        data-tw-merge
        data-tw-dismiss="alert"
        type="button"
        aria-label="Close"
        type="button" aria-label="Close" class="text-slate-800 py-2 px-3 absolute right-0 my-auto mr-2 btn-close"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="x"
        class="stroke-1.5 w-5 h-5 h-4 w-4 h-4 w-4"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTagHTMLOpenTag/buttonHTMLCloseTagHTMLOpenTag/divHTMLCloseTag

## Soft Color Alerts

Show example code
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon
Awesome alert with icon

                    HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-primary border-primary bg-opacity-20 border-opacity-5 text-primary dark:border-opacity-100 dark:bg-opacity-20 dark:border-primary mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-circle"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with iconHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-slate-300 border-secondary bg-opacity-10 text-slate-500 dark:bg-darkmode-100/20 dark:border-darkmode-100/30 dark:text-slate-300 mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-octagon"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with iconHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-success border-success bg-opacity-20 border-opacity-5 text-success dark:border-success dark:border-opacity-20 mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-triangle"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with iconHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-warning border-warning bg-opacity-20 border-opacity-5 text-warning dark:border-warning dark:border-opacity-20 mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-circle"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with iconHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-pending border-pending bg-opacity-20 border-opacity-5 text-pending dark:border-pending dark:border-opacity-20 mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-triangle"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with iconHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-danger border-danger bg-opacity-20 border-opacity-5 text-danger dark:border-danger dark:border-opacity-20 mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-octagon"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with iconHTMLOpenTag/divHTMLCloseTag
                                HTMLOpenTagdiv
        role="alert"
        class="alert relative border rounded-md px-5 py-4 bg-dark border-dark bg-opacity-20 border-opacity-5 text-dark dark:bg-darkmode-800/30 dark:border-darkmode-800/60 dark:text-slate-300 mb-2 flex items-center"
    HTMLCloseTagHTMLOpenTagi
        data-tw-merge
        data-lucide="alert-triangle"
        class="stroke-1.5 w-5 h-5 mr-2 h-6 w-6 mr-2 h-6 w-6"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                    Awesome alert with iconHTMLOpenTag/divHTMLCloseTag