Alert

Basic Alerts

            
                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

            
                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

            
                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

            
                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

            
                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

            
                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