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();
});
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();
});
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();
});
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-2.jpg"
alt="Midone - Tailwind Admin Dashboard Template"
/HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="ml-4 sm:mr-28"HTMLCloseTag
HTMLOpenTagdiv class="font-medium"HTMLCloseTag
Al Pacino
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();
});
});
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();
});
});
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
Al Pacino
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();
});