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
Al Pacino
alpacino@left4code.com
Denzel Washington
denzelwashington@left4code.com
Denzel Washington
denzelwashington@left4code.com
Products
Nike Tanjun
Sport & Outdoor
Dell XPS 13
PC & Laptop
Samsung Galaxy S20 Ultra
Smartphone & Tablet
Samsung Q90 QLED TV
Electronic

## Notification

## Basic Notification

Show example code
Yay! Updates Published!
Review Changes

                    HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                    HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag
                                    HTMLOpenTagdiv
        id="basic-non-sticky-notification-content" class="py-5 pl-5 pr-14 bg-white border border-slate-200/60 rounded-lg shadow-xl dark:bg-darkmode-600 dark:text-slate-300 dark:border-darkmode-600 hidden flex flex flex-col sm:flex-row flex flex-col sm:flex-row"HTMLCloseTag
        HTMLOpenTagdiv class="font-medium"HTMLCloseTag
                                            Yay! Updates Published!
                                        HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTaga
                                            class="mt-1 font-medium text-primary dark:text-slate-400 sm:ml-40 sm:mt-0"
                                            href=""
                                        HTMLCloseTag
                                            Review Changes
                                        HTMLOpenTag/aHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTag!-- END: Notification Content --HTMLCloseTag
                                    HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag
                                    HTMLOpenTagbutton
        data-tw-merge
        id="basic-non-sticky-notification-toggle" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mr-1 mr-1"
    HTMLCloseTagShow Non Sticky NotificationHTMLOpenTag/buttonHTMLCloseTag
                                    HTMLOpenTagbutton
        data-tw-merge
        id="basic-sticky-notification-toggle" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mt-2 sm:mt-0 mt-2 sm:mt-0"
    HTMLCloseTagShow Sticky NotificationHTMLOpenTag/buttonHTMLCloseTag
                                    HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag

                    // Basic non sticky notification
                                $("#basic-non-sticky-notification-toggle").on("click", function () {
                                Toastify({
                                node: $("#basic-non-sticky-notification-content")
                                .clone()
                                .removeClass("hidden")[0],
                                duration: 3000,
                                newWindow: true,
                                close: true,
                                gravity: "top",
                                position: "right",
                                backgroundColor: "white",
                                stopOnFocus: true,
                                }).showToast();
                                });
                                // Basic sticky notification
                                $("#basic-sticky-notification-toggle").on("click", function () {
                                Toastify({
                                node: $("#basic-non-sticky-notification-content")
                                .clone()
                                .removeClass("hidden")[0],
                                duration: -1,
                                newWindow: true,
                                close: true,
                                gravity: "top",
                                position: "right",
                                backgroundColor: "white",
                                stopOnFocus: true,
                                }).showToast();
                                });

## Success Notification

Show example code
Message Saved!
The message will be sent in 5 minutes.

                    HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                    HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag
                                    HTMLOpenTagdiv
        id="success-notification-content" class="py-5 pl-5 pr-14 bg-white border border-slate-200/60 rounded-lg shadow-xl dark:bg-darkmode-600 dark:text-slate-300 dark:border-darkmode-600 hidden flex flex flex"HTMLCloseTag
        HTMLOpenTagi
        data-tw-merge
        data-lucide="check-circle"
        class="stroke-1.5 w-5 h-5 text-success text-success"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                        HTMLOpenTagdiv class="ml-4 mr-4"HTMLCloseTag
                                            HTMLOpenTagdiv class="font-medium"HTMLCloseTagMessage Saved!HTMLOpenTag/divHTMLCloseTag
                                            HTMLOpenTagdiv class="mt-1 text-slate-500"HTMLCloseTag
                                                The message will be sent in 5 minutes.
                                            HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTag!-- END: Notification Content --HTMLCloseTag
                                    HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag
                                    HTMLOpenTagbutton
        data-tw-merge
        id="success-notification-toggle" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
    HTMLCloseTagShow NotificationHTMLOpenTag/buttonHTMLCloseTag
                                    HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag

                    // Success notification
                                $("#success-notification-toggle").on("click", function () {
                                Toastify({
                                node: $("#success-notification-content")
                                .clone()
                                .removeClass("hidden")[0],
                                duration: -1,
                                newWindow: true,
                                close: true,
                                gravity: "top",
                                position: "right",
                                stopOnFocus: true,
                                }).showToast();
                                });

## Notification With Actions

Show example code
Storage Removed!
The server will restart in 30 seconds, don't make
changes during the update process!
Restart Now Cancel

                    HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                    HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag
                                    HTMLOpenTagdiv
        id="notification-with-actions-content" class="py-5 pl-5 pr-14 bg-white border border-slate-200/60 rounded-lg shadow-xl dark:bg-darkmode-600 dark:text-slate-300 dark:border-darkmode-600 hidden flex flex flex"HTMLCloseTag
        HTMLOpenTagi
        data-tw-merge
        data-lucide="hard-drive"
        class="stroke-1.5 w-5 h-5"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                        HTMLOpenTagdiv class="ml-4 mr-4"HTMLCloseTag
                                            HTMLOpenTagdiv class="font-medium"HTMLCloseTagStorage Removed!HTMLOpenTag/divHTMLCloseTag
                                            HTMLOpenTagdiv class="mt-1 text-slate-500"HTMLCloseTag
                                                The server will restart in 30 seconds, don't make
                                                HTMLOpenTagbr /HTMLCloseTag
                                                changes during the update process!
                                            HTMLOpenTag/divHTMLCloseTag
                                            HTMLOpenTagdiv class="mt-1.5 flex font-medium"HTMLCloseTag
                                                HTMLOpenTaga
                                                    class="text-primary dark:text-slate-400"
                                                    href=""
                                                HTMLCloseTag
                                                    Restart Now
                                                HTMLOpenTag/aHTMLCloseTag
                                                HTMLOpenTaga
                                                    class="ml-3 text-slate-500"
                                                    href=""
                                                HTMLCloseTag
                                                    Cancel
                                                HTMLOpenTag/aHTMLCloseTag
                                            HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTag!-- END: Notification Content --HTMLCloseTag
                                    HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag
                                    HTMLOpenTagbutton
        data-tw-merge
        id="notification-with-actions-toggle" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
    HTMLCloseTagShow NotificationHTMLOpenTag/buttonHTMLCloseTag
                                    HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag

                    // Notification with actions
                                $("#notification-with-actions-toggle").on("click", function () {
                                Toastify({
                                node: $("#notification-with-actions-content")
                                .clone()
                                .removeClass("hidden")[0],
                                duration: -1,
                                newWindow: true,
                                close: true,
                                gravity: "top",
                                position: "right",
                                stopOnFocus: true,
                                }).showToast();
                                });

## Notification With Avatar

Show example code
Robert De Niro
See you later! 😃😃😃
Reply

                    HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                    HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag
                                    HTMLOpenTagdiv
        id="notification-with-avatar-content" class="py-5 pl-5 pr-14 bg-white border border-slate-200/60 rounded-lg shadow-xl dark:bg-darkmode-600 dark:text-slate-300 dark:border-darkmode-600 hidden flex flex flex"HTMLCloseTag
        HTMLOpenTagdiv class="image-fit h-10 w-10 flex-none overflow-hidden rounded-full"HTMLCloseTag
                                            HTMLOpenTagimg
                                                src="dist/images/fakers/profile-13.jpg"
                                                alt="Midone - Tailwind Admin Dashboard Template"
                                            /HTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv class="ml-4 sm:mr-28"HTMLCloseTag
                                            HTMLOpenTagdiv class="font-medium"HTMLCloseTag
                                                Robert De Niro
                                            HTMLOpenTag/divHTMLCloseTag
                                            HTMLOpenTagdiv class="mt-1 text-slate-500"HTMLCloseTag
                                                See you later! 😃😃😃
                                            HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTaga
                                            class="absolute bottom-0 right-0 top-0 flex items-center border-l border-slate-200/60 px-6 font-medium text-primary dark:border-darkmode-400 dark:text-slate-400"
                                            data-dismiss="notification"
                                            href="#"
                                        HTMLCloseTag
                                            Reply
                                        HTMLOpenTag/aHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTag!-- END: Notification Content --HTMLCloseTag
                                    HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag
                                    HTMLOpenTagbutton
        data-tw-merge
        id="notification-with-avatar-toggle" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
    HTMLCloseTagShow NotificationHTMLOpenTag/buttonHTMLCloseTag
                                    HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag

                    // Notification with avatar
                                $("#notification-with-avatar-toggle").on("click", function () {
                                // Init toastify
                                let avatarNotification = Toastify({
                                node: $("#notification-with-avatar-content")
                                .clone()
                                .removeClass("hidden")[0],
                                duration: -1,
                                newWindow: true,
                                close: false,
                                gravity: "top",
                                position: "right",
                                stopOnFocus: true,
                                }).showToast();
                                // Close notification event
                                $(avatarNotification.toastElement)
                                .find(\'[data-dismiss="notification"]\')
                                .on("click", function () {
                                avatarNotification.hideToast();
                                });
                                });

## Notification With Split Buttons

Show example code
Introducing new theme
Release version 2.3.3
View Details Dismiss

                    HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                    HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag
                                    HTMLOpenTagdiv
        id="notification-with-split-buttons-content" class="py-5 pl-5 pr-14 bg-white border border-slate-200/60 rounded-lg shadow-xl dark:bg-darkmode-600 dark:text-slate-300 dark:border-darkmode-600 hidden flex flex flex"HTMLCloseTag
        HTMLOpenTagdiv class="sm:mr-40"HTMLCloseTag
                                            HTMLOpenTagdiv class="font-medium"HTMLCloseTag
                                                Introducing new theme
                                            HTMLOpenTag/divHTMLCloseTag
                                            HTMLOpenTagdiv class="mt-1 text-slate-500"HTMLCloseTag
                                                Release version 2.3.3
                                            HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTagdiv
                                            class="absolute bottom-0 right-0 top-0 flex flex-col border-l border-slate-200/60 dark:border-darkmode-400"HTMLCloseTag
                                            HTMLOpenTaga
                                                class="flex flex-1 items-center justify-center border-b border-slate-200/60 px-6 font-medium text-primary dark:border-darkmode-400 dark:text-slate-400"
                                                href="#"
                                            HTMLCloseTag
                                                View Details
                                            HTMLOpenTag/aHTMLCloseTag
                                            HTMLOpenTaga
                                                class="flex flex-1 items-center justify-center px-6 font-medium text-slate-500"
                                                data-dismiss="notification"
                                                href="#"
                                            HTMLCloseTag
                                                Dismiss
                                            HTMLOpenTag/aHTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTag!-- END: Notification Content --HTMLCloseTag
                                    HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag
                                    HTMLOpenTagbutton
        data-tw-merge
        id="notification-with-split-buttons-toggle" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
    HTMLCloseTagShow NotificationHTMLOpenTag/buttonHTMLCloseTag
                                    HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag

                    // Notification with split buttons
                                $("#notification-with-split-buttons-toggle").on("click", function () {
                                // Init toastify
                                let splitButtonsNotification = Toastify({
                                node: $("#notification-with-split-buttons-content")
                                .clone()
                                .removeClass("hidden")[0],
                                duration: -1,
                                newWindow: true,
                                close: false,
                                gravity: "top",
                                position: "right",
                                stopOnFocus: true,
                                }).showToast();
                                // Close notification event
                                $(splitButtonsNotification.toastElement)
                                .find(\'[data-dismiss="notification"]\')
                                .on("click", function () {
                                splitButtonsNotification.hideToast();
                                });
                                });

## Notification With Buttons Below

Show example code
Robert De Niro
Sent you new documents.
Preview Download

                    HTMLOpenTagdiv class="text-center"HTMLCloseTag
                                    HTMLOpenTag!-- BEGIN: Notification Content --HTMLCloseTag
                                    HTMLOpenTagdiv
        id="notification-with-buttons-below-content" class="py-5 pl-5 pr-14 bg-white border border-slate-200/60 rounded-lg shadow-xl dark:bg-darkmode-600 dark:text-slate-300 dark:border-darkmode-600 hidden flex flex flex"HTMLCloseTag
        HTMLOpenTagi
        data-tw-merge
        data-lucide="file-text"
        class="stroke-1.5 w-5 h-5"
    HTMLCloseTagHTMLOpenTag/iHTMLCloseTag
                                        HTMLOpenTagdiv class="ml-4 mr-5 sm:mr-20"HTMLCloseTag
                                            HTMLOpenTagdiv class="font-medium"HTMLCloseTag
                                                Robert De Niro
                                            HTMLOpenTag/divHTMLCloseTag
                                            HTMLOpenTagdiv class="mt-1 text-slate-500"HTMLCloseTag
                                                Sent you new documents.
                                            HTMLOpenTag/divHTMLCloseTag
                                            HTMLOpenTagdiv class="mt-2.5"HTMLCloseTag
                                                HTMLOpenTaga
        data-tw-merge
        href="" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary mr-2 px-2 py-1 mr-2 px-2 py-1"
    HTMLCloseTagPreviewHTMLOpenTag/aHTMLCloseTag
                                                HTMLOpenTaga
        data-tw-merge
        href="" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 px-2 py-1 px-2 py-1"
    HTMLCloseTagDownloadHTMLOpenTag/aHTMLCloseTag
                                            HTMLOpenTag/divHTMLCloseTag
                                        HTMLOpenTag/divHTMLCloseTag
    HTMLOpenTag/divHTMLCloseTag
                                    HTMLOpenTag!-- END: Notification Content --HTMLCloseTag
                                    HTMLOpenTag!-- BEGIN: Notification Toggle --HTMLCloseTag
                                    HTMLOpenTagbutton
        data-tw-merge
        id="notification-with-buttons-below-toggle" class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-primary border-primary text-white dark:border-primary"
    HTMLCloseTagShow NotificationHTMLOpenTag/buttonHTMLCloseTag
                                    HTMLOpenTag!-- END: Notification Toggle --HTMLCloseTag
                                HTMLOpenTag/divHTMLCloseTag

                    // Notification with buttons below
                                $("#notification-with-buttons-below-toggle").on("click", function () {
                                // Init toastify
                                Toastify({
                                node: $("#notification-with-buttons-below-content")
                                .clone()
                                .removeClass("hidden")[0],
                                duration: -1,
                                newWindow: true,
                                close: true,
                                gravity: "top",
                                position: "right",
                                stopOnFocus: true,
                                }).showToast();
                                });