2024-09-02 05:28:06 +00:00
<!--
=========================================================
* Soft UI Dashboard Pro Tailwind - v1.1.0
=========================================================
* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-tailwind
* Copyright 2024 Creative Tim (https://www.creative-tim.com)
* Coded by Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-->
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" / >
< meta content = "width=device-width, initial-scale=1, shrink-to-fit=no" name = "viewport" / >
< link href = "/static/img/apple-icon.png" rel = "apple-touch-icon" sizes = "76x76" / >
< link href = "/static/img/apple-icon.png" rel = "icon" type = "image/png" / >
< title >
Soft UI Dashboard PRO Tailwind by Creative Tim
< / title >
<!-- Fonts and icons -->
2024-09-09 03:56:44 +00:00
< link href = "https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel = "stylesheet" / >
2024-09-02 05:28:06 +00:00
<!-- Nucleo Icons -->
< link href = "/static/css/nucleo-icons.css" rel = "stylesheet" / >
< link href = "/static/css/nucleo-svg.css" rel = "stylesheet" / >
<!-- Font Awesome Icons -->
< script crossorigin = "anonymous" src = "/static/js/42d5adcbca.js" >
< / script >
<!-- Main Styling -->
< link href = "/static/css/soft-ui-dashboard-tailwind_2.css" rel = "stylesheet" / >
<!-- Nepcha Analytics (nepcha.com) -->
<!-- Nepcha is a easy - to - use web analytics. No cookies and fully compliant with GDPR, CCPA and PECR. -->
< script data-site = "YOUR_DOMAIN_HERE" defer = "" src = "/static/js/nepcha-analytics.js" >
< / script >
< / head >
< body class = "m-0 font-sans antialiased font-normal text-left leading-default text-base dark:bg-slate-950 bg-gray-50 text-slate-500 dark:text-white" >
<!-- sidenav -->
< aside class = "fixed inset-y-0 left-0 flex-wrap items-center justify-between block w-full p-0 my-4 overflow-y-auto transition-all duration-200 -translate-x-full bg-white border-0 shadow-none xl:ml-4 dark:bg-gray-950 ease-soft-in-out z-990 max-w-64 rounded-2xl xl:translate-x-0 xl:bg-transparent" id = "sidenav-main" mini = "false" >
< div class = "h-20" >
< i aria-hidden = "true" class = "absolute top-0 right-0 p-4 opacity-50 cursor-pointer fas fa-times text-slate-400 dark:text-white xl:hidden" sidenav-close-btn = "" >
< / i >
< a class = "block px-8 py-6 m-0 text-sm whitespace-nowrap text-slate-700 dark:text-white" href = "https://demos.creative-tim.com/soft-ui-dashboard-pro-tailwind/pages/dashboards/default.html" target = "_blank" >
< img alt = "main_logo" class = "inline-block h-full max-w-full transition-all duration-200 ease-soft-in-out max-h-8 dark:hidden" src = "/static/img/logo-ct-dark.png" / >
< img alt = "main_logo" class = "hidden h-full max-w-full transition-all duration-200 ease-soft-in-out max-h-8 dark:inline-block" src = "/static/img/logo-ct.png" / >
< span class = "ml-1 font-semibold transition-all duration-200 ease-soft-in-out" >
Soft UI Dashboard PRO
< / span >
< / a >
< / div >
< hr class = "h-px mt-0 bg-transparent bg-gradient-to-r from-transparent via-black/40 to-transparent dark:bg-gradient-to-r dark:from-transparent dark:via-white dark:to-transparent" / >
< div class = "items-center block w-full h-auto grow basis-full" id = "sidenav-collapse-main" >
< ul class = "flex flex-col pl-0 mb-0 list-none" >
< li class = "mt-0.5 w-full" >
< a active_primary = "" aria-expanded = "true" class = "after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out text-sm py-2.7 xl:shadow-soft-xl my-0 mx-4 flex items-center whitespace-nowrap rounded-lg bg-white px-4 font-semibold text-slate-700 transition-all after:ml-auto after:inline-block after:rotate-180 after:font-bold after:text-slate-800 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80" collapse_trigger = "primary" href = "javascript:;" >
< div class = "stroke-none shadow-soft-sm bg-gradient-to-tl from-purple-700 to-pink-500 mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center p-2.5 text-center text-white" >
2024-09-09 03:56:44 +00:00
{% include 'static/svg/my_15.svg' %}
2024-09-02 05:28:06 +00:00
< / div >
< span class = "ml-1 duration-300 opacity-100 pointer-events-none ease-soft text-slate-700" >
Dashboards
< / span >
< / a >
< div class = "h-auto overflow-hidden transition-all duration-200 ease-soft-in-out" id = "dashboardsExamples" >
< ul class = "flex flex-wrap pl-4 mb-0 ml-6 list-none transition-all duration-200 ease-soft-in-out" >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "../dashboards/default.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
D
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Default
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "../dashboards/automotive.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
A
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Automotive
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-5 relative my-0 mr-4 flex items-center whitespace-nowrap rounded-lg bg-transparent pr-4 font-semibold text-slate-800 shadow-none transition-colors before:absolute before:top-1/2 before:h-2 before:w-2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800 before:content-[''] dark:text-white dark:opacity-100 dark:before:bg-white dark:before:opacity-80" href = "../dashboards/smart-home.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
S
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Smart Home
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer" collapse_trigger = "secondary" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
V
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Virtual Reality
< b class = "caret" >
< / b >
< / span >
< / a >
< div class = "h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id = "vrExamples" >
< ul class = "flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out" >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../dashboards/vr/vr-default.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
V
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
VR Default
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../dashboards/vr/vr-info.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
V
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
VR Info
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "../dashboards/crm.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
C
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
CRM
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "mt-4 w-full" >
< h6 class = "pl-6 ml-2 font-bold leading-tight uppercase text-xs opacity-60 dark:text-white" >
PAGES
< / h6 >
< / li >
< li class = "mt-0.5 w-full" >
< a aria-expanded = "false" class = "ease-soft-in-out text-sm py-2.7 active after:ease-soft-in-out after:font-awesome-5-free my-0 mx-4 flex items-center whitespace-nowrap px-4 font-medium text-slate-500 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger = "primary" href = "javascript:;" >
< div class = "stroke-none shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current p-2.5 text-center text-slate-800" >
2024-09-09 03:56:44 +00:00
{% include 'static/svg/my_16.svg' %}
2024-09-02 05:28:06 +00:00
< / div >
< span class = "ml-1 duration-300 opacity-100 pointer-events-none ease-soft text-slate-700" >
Pages
< / span >
< / a >
< div class = "h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id = "pagesExamples" >
< ul class = "flex flex-wrap pl-4 mb-0 ml-6 list-none transition-all duration-200 ease-soft-in-out" >
< li class = "mt-0.5 w-full" >
< a class = "after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer" collapse_trigger = "secondary" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
P
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Profile
< b class = "caret" >
< / b >
< / span >
< / a >
< div class = "h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id = "profileExample" >
< ul class = "flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out" >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../pages/profile/overview.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
P
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Profile Overview
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../pages/profile/teams.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
T
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Teams
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../pages/profile/projects.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
A
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
All Projects
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer" collapse_trigger = "secondary" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
U
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Users
< b class = "caret" >
< / b >
< / span >
< / a >
< div class = "h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id = "usersExample" >
< ul class = "flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out" >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../pages/users/reports.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
R
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Reports
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../pages/users/new-user.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
N
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
New User
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer" collapse_trigger = "secondary" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
A
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Account
< b class = "caret" >
< / b >
< / span >
< / a >
< div class = "h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id = "accountExample" >
< ul class = "flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out" >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../pages/account/settings.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
S
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Settings
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../pages/account/billing.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
B
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Billing
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../pages/account/invoice.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
I
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Invoice
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../pages/account/security.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
S
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Security
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer" collapse_trigger = "secondary" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
P
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Projects
< b class = "caret" >
< / b >
< / span >
< / a >
< div class = "h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id = "projectsExample" >
< ul class = "flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out" >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../pages/projects/general.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
G
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
General
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../pages/projects/timeline.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
T
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Timeline
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../pages/projects/new-project.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
N
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
New Project
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "../pages/pricing-page.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
P
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Pricing Page
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "../pages/messages.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
M
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Messages
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "../pages/rtl-page.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
R
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
RTL
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "../pages/widgets.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
W
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Widgets
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "../pages/charts.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
C
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Charts
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "../pages/sweet-alerts.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
S
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Sweet Alerts
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "../pages/notifications.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
N
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Notifications
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "mt-0.5 w-full" >
< a aria-expanded = "false" class = "ease-soft-in-out text-sm py-2.7 active after:ease-soft-in-out after:font-awesome-5-free my-0 mx-4 flex items-center whitespace-nowrap px-4 font-medium text-slate-500 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger = "primary" href = "javascript:;" >
< div class = "stroke-none shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current p-2.5 text-center text-slate-800" >
2024-09-09 03:56:44 +00:00
{% include 'static/svg/my_17.svg' %}
2024-09-02 05:28:06 +00:00
< / div >
< span class = "ml-1 duration-300 opacity-100 pointer-events-none ease-soft text-slate-700" >
Applications
< / span >
< / a >
< div class = "h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id = "applicationsExamples" >
< ul class = "flex flex-wrap pl-4 mb-0 ml-6 list-none transition-all duration-200 ease-soft-in-out" >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "../applications/kanban.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
K
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Kanban
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "../applications/wizard.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
W
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Wizard
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "../applications/datatables.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
D
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
DataTables
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "../applications/calendar.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
C
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Calendar
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "../applications/analytics.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
A
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Analytics
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "mt-0.5 w-full" >
< a aria-expanded = "false" class = "ease-soft-in-out text-sm py-2.7 active after:ease-soft-in-out after:font-awesome-5-free my-0 mx-4 flex items-center whitespace-nowrap px-4 font-medium text-slate-500 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger = "primary" href = "javascript:;" >
< div class = "stroke-none shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current p-2.5 text-center text-slate-800" >
2024-09-09 03:56:44 +00:00
{% include 'static/svg/my_18.svg' %}
2024-09-02 05:28:06 +00:00
< / div >
< span class = "ml-1 duration-300 opacity-100 pointer-events-none ease-soft text-slate-700" >
Ecommerce
< / span >
< / a >
< div class = "h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id = "ecommerceExamples" >
< ul class = "flex flex-wrap pl-4 mb-0 ml-6 list-none transition-all duration-200 ease-soft-in-out" >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "../ecommerce/overview.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
O
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Overview
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer" collapse_trigger = "secondary" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
P
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Products
< b class = "caret" >
< / b >
< / span >
< / a >
< div class = "h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id = "productsExample" >
< ul class = "flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out" >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../ecommerce/products/new-product.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
N
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
New Product
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../ecommerce/products/edit-product.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
E
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Edit Product
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../ecommerce/products/product-page.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
P
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Product Page
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../ecommerce/products/products-list.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
P
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Products List
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer" collapse_trigger = "secondary" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
O
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Orders
< b class = "caret" >
< / b >
< / span >
< / a >
< div class = "h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id = "ordersExample" >
< ul class = "flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out" >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../ecommerce/orders/list.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
O
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Order List
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../ecommerce/orders/details.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
O
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Order Details
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "../ecommerce/referral.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
R
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Referral
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "mt-0.5 w-full" >
< a aria-expanded = "false" class = "ease-soft-in-out text-sm py-2.7 active after:ease-soft-in-out after:font-awesome-5-free my-0 mx-4 flex items-center whitespace-nowrap px-4 font-medium text-slate-500 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger = "primary" href = "javascript:;" >
< div class = "stroke-none shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current p-2.5 text-center text-slate-800" >
2024-09-09 03:56:44 +00:00
{% include 'static/svg/my_19.svg' %}
2024-09-02 05:28:06 +00:00
< / div >
< span class = "ml-1 duration-300 opacity-100 pointer-events-none ease-soft text-slate-700" >
Authentication
< / span >
< / a >
< div class = "h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id = "authExamples" >
< ul class = "flex flex-wrap pl-4 mb-0 ml-6 list-none transition-all duration-200 ease-soft-in-out" >
< li class = "mt-0.5 w-full" >
< a class = "after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer" collapse_trigger = "secondary" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
S
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Sign In
< b class = "caret" >
< / b >
< / span >
< / a >
< div class = "h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id = "signinExample" >
< ul class = "flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out" >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../authentication/signin/basic.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
B
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Basic
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../authentication/signin/cover.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
C
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Cover
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../authentication/signin/illustration.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
I
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Illustration
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer" collapse_trigger = "secondary" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
S
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Sign Up
< b class = "caret" >
< / b >
< / span >
< / a >
< div class = "h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id = "signupExample" >
< ul class = "flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out" >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../authentication/signup/basic.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
B
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Basic
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../authentication/signup/cover.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
C
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Cover
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../authentication/signup/illustration.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
I
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Illustration
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer" collapse_trigger = "secondary" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
R
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Reset Password
< b class = "caret" >
< / b >
< / span >
< / a >
< div class = "h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id = "resetExample" >
< ul class = "flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out" >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../authentication/reset/basic.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
B
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Basic
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../authentication/reset/cover.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
C
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Cover
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../authentication/reset/illustration.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
I
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Illustration
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer" collapse_trigger = "secondary" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
L
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Lock
< b class = "caret" >
< / b >
< / span >
< / a >
< div class = "h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id = "lockExample" >
< ul class = "flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out" >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../authentication/lock/basic.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
B
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Basic
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../authentication/lock/cover.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
C
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Cover
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../authentication/lock/illustration.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
I
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Illustration
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer" collapse_trigger = "secondary" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
2
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
2-Step Verification
< b class = "caret" >
< / b >
< / span >
< / a >
< div class = "h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id = "StepExample" >
< ul class = "flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out" >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../authentication/verification/basic.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
B
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Basic
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../authentication/verification/cover.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
C
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Cover
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../authentication/verification/illustration.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
I
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Illustration
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer" collapse_trigger = "secondary" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
E
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Error
< b class = "caret" >
< / b >
< / span >
< / a >
< div class = "h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id = "errorExample" >
< ul class = "flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out" >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../authentication/error/404.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
E
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Error 404
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "../authentication/error/500.html" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
E
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Error 500
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< / ul >
< / div >
< / li >
< li class = "mt-0.5 w-full" >
< hr class = "h-px my-4 bg-transparent bg-gradient-to-r from-transparent via-black/40 to-transparent dark:bg-gradient-to-r dark:from-transparent dark:via-white dark:to-transparent" >
< h6 class = "pl-6 mb-2 ml-2 font-bold leading-tight uppercase text-xs opacity-60 dark:text-white" >
DOCS
< / h6 >
< / hr >
< / li >
< li class = "mt-0.5 w-full" >
< a aria-expanded = "false" class = "ease-soft-in-out text-sm py-2.7 active after:ease-soft-in-out after:font-awesome-5-free my-0 mx-4 flex items-center whitespace-nowrap px-4 font-medium text-slate-500 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger = "primary" href = "javascript:;" >
< div class = "stroke-none shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current p-2.5 text-center text-slate-800" >
2024-09-09 03:56:44 +00:00
{% include 'static/svg/my_20.svg' %}
2024-09-02 05:28:06 +00:00
< / div >
< span class = "ml-1 duration-300 opacity-100 pointer-events-none ease-soft text-slate-700" >
Basic
< / span >
< / a >
< div class = "h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id = "basicExamples" >
< ul class = "flex flex-wrap pl-4 mb-0 ml-6 list-none transition-all duration-200 ease-soft-in-out" >
< li class = "mt-0.5 w-full" >
< a class = "after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer" collapse_trigger = "secondary" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
G
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Getting Started
< b class = "caret" >
< / b >
< / span >
< / a >
< div class = "h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id = "gettingStartedExample" >
< ul class = "flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out" >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "https://www.creative-tim.com/learning-lab/tailwind/html/quick-start/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
Q
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Quick Start
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "https://www.creative-tim.com/learning-lab/tailwind/html/build-tools/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
B
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Build Tools
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "https://www.creative-tim.com/learning-lab/tailwind/html/what-is-tailwind-css/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
W
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
What is Tailwind CSS
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "https://www.creative-tim.com/learning-lab/tailwind/html/license/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
L
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
License
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer" collapse_trigger = "secondary" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
C
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Costumization
< b class = "caret" >
< / b >
< / span >
< / a >
< div class = "h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id = "foundationExample" >
< ul class = "flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out" >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "https://www.creative-tim.com/learning-lab/tailwind/html/colors/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
C
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Colors
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "https://www.creative-tim.com/learning-lab/tailwind/html/shadows/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
S
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Shadows
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "https://www.creative-tim.com/learning-lab/tailwind/html/screens/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
S
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Screens
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href = "https://www.creative-tim.com/learning-lab/tailwind/html/fonts/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs" >
F
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Fonts
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< / ul >
< / div >
< / li >
< li class = "mt-0.5 w-full" >
< a aria-expanded = "false" class = "ease-soft-in-out text-sm py-2.7 active after:ease-soft-in-out after:font-awesome-5-free my-0 mx-4 flex items-center whitespace-nowrap px-4 font-medium text-slate-500 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger = "primary" href = "javascript:;" >
< div class = "stroke-none shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current p-2.5 text-center text-slate-800" >
2024-09-09 03:56:44 +00:00
{% include 'static/svg/my_21.svg' %}
2024-09-02 05:28:06 +00:00
< / div >
< span class = "ml-1 duration-300 opacity-100 pointer-events-none ease-soft text-slate-700" >
Components
< / span >
< / a >
< div class = "h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id = "componentsExamples" >
< ul class = "flex flex-wrap pl-4 mb-0 ml-6 list-none transition-all duration-200 ease-soft-in-out" >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "https://www.creative-tim.com/learning-lab/tailwind/html/alert/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
A
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Alert
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "https://www.creative-tim.com/learning-lab/tailwind/html/avatar/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
A
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Avatar
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "https://www.creative-tim.com/learning-lab/tailwind/html/button/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
B
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Button
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "https://www.creative-tim.com/learning-lab/tailwind/html/card/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
C
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Card
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "https://www.creative-tim.com/learning-lab/tailwind/html/checkbox/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
C
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Checkbox
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "https://www.creative-tim.com/learning-lab/tailwind/html/chip/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
C
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Chip
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "https://www.creative-tim.com/learning-lab/tailwind/html/collapse/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
C
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Collapse
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "https://www.creative-tim.com/learning-lab/tailwind/html/dropdown/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
D
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Dropdown
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "https://www.creative-tim.com/learning-lab/tailwind/html/icon-button/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
I
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Icon Button
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "https://www.creative-tim.com/learning-lab/tailwind/html/input/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
I
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Input
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "https://www.creative-tim.com/learning-lab/tailwind/html/modal/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
M
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Modal
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "https://www.creative-tim.com/learning-lab/tailwind/html/navbar/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
N
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Navbar
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "https://www.creative-tim.com/learning-lab/tailwind/html/progress/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
P
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Progress
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "https://www.creative-tim.com/learning-lab/tailwind/html/switch/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
S
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Switch
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "https://www.creative-tim.com/learning-lab/tailwind/html/table/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
T
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Table
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "https://www.creative-tim.com/learning-lab/tailwind/html/tabs/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
T
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Tabs
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "https://www.creative-tim.com/learning-lab/tailwind/html/textarea/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
T
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Textarea
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "https://www.creative-tim.com/learning-lab/tailwind/html/tooltip/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
T
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Tooltip
< / span >
< / a >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href = "https://www.creative-tim.com/learning-lab/tailwind/html/typography/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
T
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Typography
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out text-sm py-2.7 my-0 mx-4 flex items-center whitespace-nowrap px-4 font-medium text-slate-500 shadow-none transition-colors dark:text-white dark:opacity-80" href = "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro/blob/main/CHANGELOG.md" target = "_blank" >
< div class = "stroke-none shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current p-2.5 text-center text-black" >
2024-09-09 03:56:44 +00:00
{% include 'static/svg/my_22.svg' %}
2024-09-02 05:28:06 +00:00
< / div >
< span class = "ml-1 duration-300 opacity-100 pointer-events-none ease-soft" >
Changelog
< / span >
< / a >
< / li >
< / ul >
< / div >
< div class = "pt-4 mx-4 mt-4" >
<!-- load phantom colors for card after: -->
< p class = "invisible hidden text-red-600 text-orange after:bg-gradient-to-tl after:from-gray-900 after:to-slate-800 after:bg-gradient-to-tl after:from-blue-600 after:to-cyan-400 after:bg-gradient-to-tl after:from-red-500 after:to-yellow-400 after:bg-gradient-to-tl after:from-green-600 after:to-lime-400 after:bg-gradient-to-tl after:from-red-600 after:to-rose-400 after:bg-gradient-to-tl after:from-slate-600 after:to-slate-300 text-lime-500 text-cyan-500" >
< / p >
< div class = "after:opacity-65 after:bg-gradient-to-tl after:from-slate-600 after:to-slate-300 relative flex min-w-0 flex-col items-center break-words rounded-2xl border-0 border-solid border-blue-900 bg-white bg-clip-border shadow-none after:absolute after:top-0 after:bottom-0 after:left-0 after:z-10 after:block after:h-full after:w-full after:rounded-2xl after:content-['']" sidenav-card = "" >
< div class = "absolute w-full h-full bg-center bg-cover mb-7 rounded-2xl" style = "background-image: url('../../assets/img/curved-images/white-curved.jpg')" >
< / div >
< div class = "relative z-20 flex-auto w-full p-4 text-left text-white" >
< div class = "flex items-center justify-center w-8 h-8 mb-4 text-center bg-white bg-center rounded-lg icon shadow-soft-2xl" >
< i aria-hidden = "true" class = "top-0 z-10 text-transparent ni leading-none ni-diamond text-lg bg-gradient-to-tl from-slate-600 to-slate-300 bg-clip-text opacity-80" sidenav-card-icon = "" >
< / i >
< / div >
< div class = "transition-all duration-200 ease-nav-brand" >
< h6 class = "mb-0 text-white" >
Need help?
< / h6 >
< p class = "mt-0 mb-4 font-semibold leading-tight text-xs" >
Please check our docs
< / p >
< a class = "inline-block w-full px-8 py-2 mb-0 font-bold text-center text-black uppercase transition-all ease-in bg-white border-0 border-white rounded-lg shadow-soft-md bg-150 leading-pro text-xs hover:shadow-soft-2xl hover:scale-102" href = "https://www.creative-tim.com/learning-lab/tailwind/html/quick-start/soft-ui-dashboard/" target = "_blank" >
Documentation
< / a >
< / div >
< / div >
< / div >
<!-- pro btn -->
<!-- <a class="inline - block w - full px - 6 py - 3 my - 4 font - bold text - center text - white uppercase align - middle transition - all ease - in border - 0 rounded - lg select - none shadow - soft - md bg - 150 bg - x - 25 leading - pro text - xs bg - gradient - to - tl from - purple - 700 to - pink - 500 hover:shadow - soft - 2xl hover:scale - 102" href="https://www.creative - tim.com/product/soft - ui - dashboard - pro?ref=sidebarfree">Upgrade to pro</a> -->
< / div >
< / aside >
< main class = "relative h-full max-h-screen transition-all duration-200 ease-soft-in-out xl:ml-68 rounded-xl" >
<!-- Navbar -->
< nav class = "relative flex flex-wrap items-center justify-between px-0 py-2 mx-6 mt-6 transition-all shadow-none duration-250 ease-soft-in rounded-2xl lg:flex-nowrap lg:justify-start" navbar-main = "" navbar-scroll = "true" >
< div class = "flex items-center justify-between w-full px-4 py-1 mx-auto flex-wrap-inherit" >
< nav >
<!-- breadcrumb -->
< ol class = "flex flex-wrap pt-1 mr-12 bg-transparent rounded-lg sm:mr-16" >
< li class = "leading-normal text-sm breadcrumb-item" >
< a class = "text-slate-700 opacity-30 dark:text-white" href = "javascript:;" >
2024-09-09 03:56:44 +00:00
{% include 'static/svg/my_9.svg' %}
2024-09-02 05:28:06 +00:00
< / a >
< / li >
< li class = "text-sm pl-2 leading-normal before:float-left before:pr-2 before:text-gray-600 before:content-['/']" >
< a class = "opacity-50 text-slate-700 dark:text-white" href = "javascript:;" >
Pages
< / a >
< / li >
< li aria-current = "page" class = "text-sm pl-2 capitalize leading-normal text-slate-700 before:float-left before:pr-2 before:text-gray-600 before:content-['/'] dark:text-white dark:before:text-white" >
Dashboards
< / li >
< / ol >
< h6 class = "mb-0 font-bold capitalize dark:text-white" >
Smart Home
< / h6 >
< / nav >
< div class = "flex items-center" >
< a aria-expanded = "false" class = "hidden p-0 transition-all ease-nav-brand text-sm text-slate-500 xl:block" href = "javascript:;" mini-sidenav-burger = "" >
< div class = "w-4.5 overflow-hidden" >
< i class = "ease-soft mb-0.75 relative block h-0.5 translate-x-[5px] rounded-sm bg-slate-500 transition-all dark:bg-white" >
< / i >
< i class = "ease-soft mb-0.75 relative block h-0.5 rounded-sm bg-slate-500 transition-all dark:bg-white" >
< / i >
< i class = "ease-soft relative block h-0.5 translate-x-[5px] rounded-sm bg-slate-500 transition-all dark:bg-white" >
< / i >
< / div >
< / a >
< / div >
< div class = "flex items-center mt-2 grow sm:mt-0 sm:mr-6 md:mr-0 lg:flex lg:basis-auto" id = "navbar" >
< div class = "flex items-center md:ml-auto md:pr-4" >
< div class = "relative flex flex-wrap items-stretch w-full transition-all rounded-lg ease-soft" >
< span class = "text-sm ease-soft leading-5.6 absolute z-50 -ml-px flex h-full items-center whitespace-nowrap rounded-lg rounded-tr-none rounded-br-none border border-r-0 border-transparent bg-transparent py-2 px-2.5 text-center font-normal text-slate-500 transition-all" >
< i aria-hidden = "true" class = "fas fa-search" >
< / i >
< / span >
< input class = "pl-9 text-sm focus:shadow-soft-primary-outline dark:bg-gray-950 dark:placeholder:text-white/80 dark:text-white/80 ease-soft w-1/100 leading-5.6 relative -ml-px block min-w-0 flex-auto rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding py-2 pr-3 text-gray-700 transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none focus:transition-shadow" placeholder = "Type here..." type = "text" / >
< / div >
< / div >
< ul class = "flex flex-row justify-end pl-0 mb-0 list-none md-max:w-full" >
<!-- online builder btn -->
<!-- <li class="flex items - center">
< a class = "inline-block px-8 py-2 mb-0 mr-4 font-bold text-center uppercase align-middle transition-all bg-transparent border border-solid rounded-lg shadow-none cursor-pointer leading-pro border-fuchsia-500 ease-soft-in text-xs hover:scale-102 active:shadow-soft-xs text-fuchsia-500 hover:border-fuchsia-500 active:bg-fuchsia-500 active:hover:text-fuchsia-500 hover:text-fuchsia-500 tracking-tight-soft hover:bg-transparent hover:opacity-75 hover:shadow-none active:text-white active:hover:bg-transparent" target = "_blank" href = "https://www.creative-tim.com/builder/soft-ui?ref=navbar-dashboard&_ga=2.76518741.1192788655.1647724933-1242940210.1644448053" > Online Builder< / a >
< / li > -->
< li class = "flex items-center" >
< a class = "block px-0 py-2 font-semibold transition-all ease-nav-brand text-sm text-slate-500 dark:text-white" href = "../../pages/authentication/signin/illustration.html" >
< i aria-hidden = "true" class = "fa fa-user sm:mr-1" >
< / i >
< span class = "hidden sm:inline" >
Sign In
< / span >
< / a >
< / li >
< li class = "flex items-center pl-4 xl:hidden" >
< a aria-expanded = "false" class = "block p-0 transition-all ease-nav-brand text-sm text-slate-500 dark:text-white" href = "javascript:;" sidenav-trigger = "" >
< div class = "w-4.5 overflow-hidden" >
< i class = "ease-soft mb-0.75 relative block h-0.5 rounded-sm bg-slate-500 transition-all dark:bg-white" >
< / i >
< i class = "ease-soft mb-0.75 relative block h-0.5 rounded-sm bg-slate-500 transition-all dark:bg-white" >
< / i >
< i class = "ease-soft relative block h-0.5 rounded-sm bg-slate-500 transition-all dark:bg-white" >
< / i >
< / div >
< / a >
< / li >
< li class = "flex items-center px-4" >
< a class = "p-0 transition-all text-sm ease-nav-brand text-slate-500 dark:text-white" href = "javascript:;" >
< i aria-hidden = "true" class = "cursor-pointer fa fa-cog" fixed-plugin-button-nav = "" >
< / i >
<!-- fixed - plugin - button - nav -->
< / a >
< / li >
<!-- notifications -->
< li class = "relative flex items-center pr-2" >
< p class = "hidden transform-dropdown-show" >
< / p >
< a aria-expanded = "false" class = "block p-0 transition-all text-sm ease-nav-brand text-slate-500 dark:text-white" dropdown-trigger = "" href = "javascript:;" >
< i aria-hidden = "true" class = "cursor-pointer fa fa-bell" >
< / i >
< / a >
< ul class = "text-sm transform-dropdown before:font-awesome before:leading-default before:duration-350 before:ease-soft lg:shadow-soft-3xl duration-250 min-w-44 before:sm:right-7 before:text-5.5 dark:bg-gray-950 pointer-events-none absolute right-0 top-0 z-50 origin-top list-none rounded-lg border-0 border-solid border-transparent bg-white bg-clip-padding px-2 py-4 text-left text-slate-500 opacity-0 transition-all before:absolute before:right-2 before:left-auto before:top-0 before:z-50 before:inline-block before:font-normal before:text-white before:antialiased before:transition-all before:content-['\f0d8'] sm:-mr-6 lg:absolute lg:right-0 lg:left-auto lg:mt-2 lg:block lg:cursor-pointer" dropdown-menu = "" >
<!-- add show class on dropdown open js -->
< li class = "relative mb-2" >
< a class = "group ease-soft py-1.2 clear-both block w-full whitespace-nowrap rounded-lg bg-transparent px-4 duration-300 hover:bg-gray-200 hover:text-slate-700 dark:hover:bg-gray-200/80 lg:transition-colors" href = "javascript:;" >
< div class = "flex py-1" >
< div class = "my-auto" >
< img class = "inline-flex items-center justify-center mr-4 text-white text-sm h-9 w-9 max-w-none rounded-xl" src = "/static/img/team-2.jpg" / >
< / div >
< div class = "flex flex-col justify-center" >
< h6 class = "mb-1 font-normal leading-normal text-sm group-hover:text-slate-700 dark:text-white" >
< span class = "font-semibold" >
New message
< / span >
from Laur
< / h6 >
< p class = "mb-0 leading-tight text-xs text-slate-400 group-hover:text-slate-700 dark:text-white dark:opacity-80" >
< i aria-hidden = "true" class = "mr-1 fa fa-clock" >
< / i >
13 minutes ago
< / p >
< / div >
< / div >
< / a >
< / li >
< li class = "relative mb-2" >
< a class = "group ease-soft py-1.2 clear-both block w-full whitespace-nowrap rounded-lg px-4 transition-colors duration-300 hover:bg-gray-200 hover:text-slate-700 dark:hover:bg-gray-200/80" href = "javascript:;" >
< div class = "flex py-1" >
< div class = "my-auto" >
< img class = "inline-flex items-center justify-center mr-4 text-white text-sm bg-gradient-to-tl from-gray-900 to-slate-800 dark:bg-gradient-to-tl dark:from-slate-850 dark:to-gray-850 h-9 w-9 max-w-none rounded-xl" src = "/static/img/small-logos/logo-spotify.svg" / >
< / div >
< div class = "flex flex-col justify-center" >
< h6 class = "mb-1 font-normal leading-normal text-sm group-hover:text-slate-700 dark:text-white" >
< span class = "font-semibold" >
New album
< / span >
by Travis Scott
< / h6 >
< p class = "mb-0 leading-tight text-xs text-slate-400 group-hover:text-slate-700 dark:text-white dark:opacity-80" >
< i aria-hidden = "true" class = "mr-1 fa fa-clock" >
< / i >
1 day
< / p >
< / div >
< / div >
< / a >
< / li >
< li class = "relative" >
< a class = "group ease-soft py-1.2 clear-both block w-full whitespace-nowrap rounded-lg px-4 transition-colors duration-300 hover:bg-gray-200 hover:text-slate-700 dark:hover:bg-gray-200/80" href = "javascript:;" >
< div class = "flex py-1" >
< div class = "inline-flex items-center justify-center my-auto mr-4 text-white transition-all duration-200 ease-nav-brand text-sm bg-gradient-to-tl from-slate-600 to-slate-300 h-9 w-9 rounded-xl" >
2024-09-09 03:56:44 +00:00
{% include 'static/svg/my_10.svg' %}
2024-09-02 05:28:06 +00:00
< / div >
< div class = "flex flex-col justify-center" >
< h6 class = "mb-1 font-normal leading-normal text-sm group-hover:text-slate-700 dark:text-white" >
Payment successfully completed
< / h6 >
< p class = "mb-0 leading-tight text-xs text-slate-400 group-hover:text-slate-700 dark:text-white dark:opacity-80" >
< i aria-hidden = "true" class = "mr-1 fa fa-clock" >
< / i >
2 days
< / p >
< / div >
< / div >
< / a >
< / li >
< / ul >
< / li >
< / ul >
< / div >
< / div >
< / nav >
<!-- Content -->
< div class = "w-full p-6 mx-auto" >
< div class = "flex flex-wrap -mx-3" >
< div class = "flex-shrink-0 w-full max-w-full px-3 xl:flex-0 xl:w-7/12" >
< div class = "border-black/12.5 dark:shadow-soft-dark-xl shadow-soft-xl dark:bg-gray-950 relative flex min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border" >
< div class = "border-b-black/12.5 flex rounded-t-2xl border-b-0 border-solid p-4 pb-0" >
< h6 class = "my-auto dark:text-white" >
Cameras
< / h6 >
< div class = "relative w-1/2 ml-auto" >
< ul aria-controls = "camera-gallery" class = "relative flex flex-wrap p-1 mb-0 list-none rounded-xl bg-gray-50" nav-pills = "" role = "tablist" >
< li class = "z-30 flex-auto text-center" >
< a active = "" aria-controls = "cam1" aria-selected = "true" class = "block w-full py-1 transition-colors border-0 rounded-lg ease-soft-in-out bg-inherit bg-none dark:text-white" href = "javascript:;" nav-link = "" role = "tab" >
Kitchen
< / a >
< / li >
< li class = "z-30 flex-auto text-center" >
< a aria-controls = "cam2" aria-selected = "false" class = "block w-full py-1 transition-colors border-0 rounded-lg ease-soft-in-out bg-inherit bg-none" href = "javascript:;" nav-link = "" role = "tab" >
Living
< / a >
< / li >
< li class = "z-30 flex-auto text-center" >
< a aria-controls = "cam3" aria-selected = "false" class = "block w-full py-1 transition-colors border-0 rounded-lg ease-soft-in-out bg-inherit bg-none" href = "javascript:;" nav-link = "" role = "tab" >
Attic
< / a >
< / li >
< / ul >
< / div >
< div class = "relative pt-2" >
< a aria-expanded = "false" class = "pl-6 cursor-pointer text-slate-400 dark:text-white dark:opacity-80" dropdown-trigger = "" href = "javascript:;" >
< i class = "fas fa-ellipsis-v" >
< / i >
< / a >
< ul class = "z-100 min-w-44 text-sm shadow-soft-3xl duration-250 transform-dropdown before:duration-350 before:font-awesome before:ease-soft before:text-5.5 dark:bg-gray-950 pointer-events-none absolute top-0 right-0 left-auto m-0 mt-2 block origin-top cursor-pointer list-none rounded-lg border-0 border-solid border-transparent bg-white bg-clip-padding px-2 py-4 text-left text-slate-500 opacity-0 transition-all will-change-transform before:absolute before:top-0 before:right-5 before:left-auto before:z-40 before:text-white before:transition-all before:content-['\f0d8'] sm:-mr-6" dropdown-menu = "" >
< li class = "relative" >
< a class = "py-1.2 lg:ease-soft clear-both block w-full whitespace-nowrap rounded-lg px-4 font-normal text-slate-500 transition-colors hover:bg-gray-200 hover:text-slate-700 focus:bg-gray-200 focus:text-slate-700 dark:text-white dark:hover:bg-gray-200/80 dark:hover:text-slate-700 lg:duration-300" href = "javascript:;" >
Pause
< / a >
< / li >
< li class = "relative" >
< a class = "py-1.2 lg:ease-soft clear-both block w-full whitespace-nowrap rounded-lg px-4 font-normal text-slate-500 transition-colors hover:bg-gray-200 hover:text-slate-700 focus:bg-gray-200 focus:text-slate-700 dark:text-white dark:hover:bg-gray-200/80 dark:hover:text-slate-700 lg:duration-300" href = "javascript:;" >
Stop
< / a >
< / li >
< li class = "relative" >
< a class = "py-1.2 lg:ease-soft clear-both block w-full whitespace-nowrap rounded-lg px-4 font-normal text-slate-500 transition-colors hover:bg-gray-200 hover:text-slate-700 focus:bg-gray-200 focus:text-slate-700 dark:text-white dark:hover:bg-gray-200/80 dark:hover:text-slate-700 lg:duration-300" href = "javascript:;" >
Schedule
< / a >
< / li >
< li class = "relative" >
< hr class = "h-px my-2 bg-gradient-to-r from-transparent via-black/40 to-transparent" / >
< / li >
< li class = "relative" >
< a class = "py-1.2 text-danger lg:ease-soft clear-both block w-full whitespace-nowrap rounded-lg px-4 font-normal text-red-600 transition-colors hover:bg-gray-200 focus:bg-gray-200 dark:hover:bg-gray-200/80 lg:duration-300" href = "javascript:;" >
Remove
< / a >
< / li >
< / ul >
< / div >
< / div >
< div class = "flex-auto p-4 mt-2" >
< div camera-gallery = "" >
< div active = "" class = "h-100 relative block rounded-xl bg-[url('../../assets/img/bg-smart-home-1.jpg')] bg-cover transition-opacity duration-300 ease-linear" id = "cam1" >
< div class = "absolute top-0 flex w-full" >
< p class = "p-4 mb-0 text-white" >
17.05.2021 4:34PM
< / p >
< div class = "p-4 ml-auto" >
< span class = "py-2.2 px-3.6 text-xs rounded-1.8 inline-block whitespace-nowrap bg-slate-200 text-center align-baseline font-bold uppercase leading-none text-slate-650" >
< i class = "text-red-600 fas fa-dot-circle" >
< / i >
Recording
< / span >
< / div >
< / div >
< / div >
< div class = "h-100 relative hidden rounded-xl bg-[url('../../assets/img/bg-smart-home-2.jpg')] bg-cover opacity-0 transition-opacity duration-300 ease-linear" id = "cam2" >
< div class = "absolute top-0 flex w-full" >
< p class = "p-4 mb-0 text-white" >
17.05.2021 4:35PM
< / p >
< div class = "p-4 ml-auto" >
< span class = "py-2.2 px-3.6 text-xs rounded-1.8 inline-block whitespace-nowrap bg-slate-200 text-center align-baseline font-bold uppercase leading-none text-slate-650" >
< i class = "text-red-600 fas fa-dot-circle" >
< / i >
Recording
< / span >
< / div >
< / div >
< / div >
< div class = "h-100 relative hidden rounded-xl bg-[url('../../assets/img/home-decor-3.jpg')] bg-cover opacity-0 transition-opacity duration-300 ease-linear" id = "cam3" >
< div class = "absolute top-0 flex w-full" >
< p class = "p-4 mb-0 text-white" >
17.05.2021 4:57PM
< / p >
< div class = "p-4 ml-auto" >
< span class = "py-2.2 px-3.6 text-xs rounded-1.8 inline-block whitespace-nowrap bg-slate-200 text-center align-baseline font-bold uppercase leading-none text-slate-650" >
< i class = "text-red-600 fas fa-dot-circle" >
< / i >
Recording
< / span >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "w-full max-w-full px-3 mt-6 ml-auto xl:flex-0 shrink-0 xl:mt-0 xl:w-5/12" >
< div class = "flex flex-wrap -mx-3" >
< div class = "w-full max-w-full px-3 flex-0" >
< div class = "border-black/12.5 shadow-soft-xl dark:shadow-soft-dark-xl bg-gradient-to-tl from-purple-700 to-pink-500 dark:bg-gray-950 relative flex min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border dark:bg-none" >
< div class = "flex-auto p-4" >
< div class = "flex flex-wrap -mx-3" >
< div class = "w-8/12 max-w-full px-3 my-auto flex-0" >
< div class = "numbers" >
< p class = "mb-0 text-sm font-semibold leading-normal text-white capitalize opacity-70" >
Wheather today
< / p >
< h5 class = "mb-0 font-bold text-white" >
San Francisco - 29°C
< / h5 >
< / div >
< / div >
< div class = "w-4/12 max-w-full px-3 text-right flex-0" >
< img alt = "image sun" class = "w-1/2" src = "/static/img/small-logos/icon-sun-cloud.png" / >
< h5 class = "mb-0 mr-1 text-right text-white" >
Cloudy
< / h5 >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "flex flex-wrap mt-6 -mx-3" >
< div class = "w-full max-w-full px-3 md:flex-0 shrink-0 md:w-6/12" >
< div class = "border-black/12.5 dark:shadow-soft-dark-xl shadow-soft-xl dark:bg-gray-950 relative flex min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border" >
< div class = "flex-auto p-6 text-center" >
< h1 class = "relative z-10 text-transparent bg-gradient-to-tl from-purple-700 to-pink-500 bg-clip-text" >
< span countto = "21" id = "status1" >
21
< / span >
< span class = "-ml-2 text-lg" >
°C
< / span >
< / h1 >
< h6 class = "mb-0 font-bold dark:text-white" >
Living Room
< / h6 >
< p class = "mb-0 text-sm leading-normal opacity-80" >
Temperature
< / p >
< / div >
< / div >
< / div >
< div class = "w-full max-w-full px-3 mt-6 md:flex-0 shrink-0 md:mt-0 md:w-6/12" >
< div class = "border-black/12.5 dark:shadow-soft-dark-xl shadow-soft-xl dark:bg-gray-950 relative flex min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border" >
< div class = "flex-auto p-6 text-center" >
< h1 class = "relative z-10 text-transparent bg-gradient-to-tl from-purple-700 to-pink-500 bg-clip-text" >
< span countto = "44" id = "status2" >
44
< / span >
< span class = "-ml-1 text-lg" >
%
< / span >
< / h1 >
< h6 class = "mb-0 font-bold dark:text-white" >
Outside
< / h6 >
< p class = "mb-0 text-sm leading-normal opacity-80" >
Humidity
< / p >
< / div >
< / div >
< / div >
< / div >
< div class = "flex flex-wrap mt-6 -mx-3" >
< div class = "w-full max-w-full px-3 md:flex-0 shrink-0 md:w-6/12" >
< div class = "border-black/12.5 dark:shadow-soft-dark-xl shadow-soft-xl dark:bg-gray-950 relative flex min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border" >
< div class = "flex-auto p-6 text-center" >
< h1 class = "relative z-10 text-transparent bg-gradient-to-tl from-purple-700 to-pink-500 bg-clip-text" >
< span countto = "87" id = "status3" >
87
< / span >
< span class = "-ml-2 text-lg" >
m³
< / span >
< / h1 >
< h6 class = "mb-0 font-bold dark:text-white" >
Water
< / h6 >
< p class = "mb-0 text-sm leading-normal opacity-80" >
Consumption
< / p >
< / div >
< / div >
< / div >
< div class = "w-full max-w-full px-3 mt-6 md:flex-0 shrink-0 md:mt-0 md:w-6/12" >
< div class = "border-black/12.5 dark:shadow-soft-dark-xl shadow-soft-xl dark:bg-gray-950 relative flex min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border" >
< div class = "flex-auto p-6 text-center" >
< h1 class = "relative z-10 text-transparent bg-gradient-to-tl from-purple-700 to-pink-500 bg-clip-text" >
< span countto = "417" id = "status4" >
417
< / span >
< span class = "-ml-2 text-lg" >
GB
< / span >
< / h1 >
< h6 class = "mb-0 font-bold dark:text-white" >
Internet
< / h6 >
< p class = "mb-0 text-sm leading-normal opacity-80" >
All devices
< / p >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "flex flex-wrap mt-6 -mx-3" >
< div class = "w-full max-w-full px-3 ml-auto lg:flex-0 shrink-0 lg:w-6/12" >
< div class = "border-black/12.5 dark:bg-gray-950 dark:shadow-soft-dark-xl shadow-soft-xl relative flex min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border" >
< div class = "border-b-black/12.5 rounded-t-2xl border-b-0 border-solid p-4 pb-0" >
< div class = "flex items-center" >
< h6 class = "mb-0 dark:text-white" >
Consumption by room
< / h6 >
< button class = "active:shadow-soft-xs active:opacity-85 ease-soft-in leading-pro text-xs bg-150 bg-x-25 rounded-3.5xl p-1.2 h-6 w-6 mb-0 ml-auto flex cursor-pointer items-center justify-center border border-solid border-slate-400 bg-transparent text-center align-middle font-bold text-slate-400 shadow-none transition-all hover:bg-transparent hover:text-slate-400 hover:opacity-75 hover:shadow-none active:bg-slate-400 active:text-black hover:active:bg-transparent hover:active:text-slate-400 hover:active:opacity-75 hover:active:shadow-none" data-target = "tooltip_trigger" type = "button" >
< i class = "fas fa-info text-3xs" >
< / i >
< / button >
< div class = "z-50 hidden px-2 py-1 text-sm text-center text-white bg-black rounded-lg max-w-46" data-popper-placement = "bottom" id = "tooltip" role = "tooltip" >
See the consumption per room
< div class = "invisible absolute h-2 w-2 bg-inherit before:visible before:absolute before:h-2 before:w-2 before:rotate-45 before:bg-inherit before:content-['']" data-popper-arrow = "" id = "arrow" >
< / div >
< / div >
< / div >
< / div >
< div class = "flex-auto p-4" >
< div class = "flex flex-wrap -mx-3" >
< div class = "w-5/12 max-w-full px-3 text-center flex-0" >
< div class = "chart" >
< canvas class = "chart-canvas" height = "197" id = "chart-consumption" >
< / canvas >
< / div >
< h4 class = "-mt-32 font-semibold dark:text-white" >
< span >
471.3
< / span >
< span class = "block text-sm leading-normal text-slate-500 dark:text-white/80" >
WATTS
< / span >
< / h4 >
< / div >
< div class = "w-7/12 max-w-full px-3 flex-0" >
< div class = "overflow-x-auto" >
< table class = "items-center w-full mb-0 align-top border-gray-200 text-slate-500" >
< tbody class = "align-top" >
< tr >
< td class = "p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent dark:border-white/40" >
< div class = "flex px-2 py-0" >
< span class = "py-2.2 px-2.8 text-xs rounded-1.8 bg-gradient-to-tl from-purple-700 to-pink-500 mr-4 inline-block whitespace-nowrap text-center align-baseline font-bold uppercase leading-none text-white" >
< / span >
< div class = "flex flex-col justify-center" >
< h6 class = "mb-0 text-sm leading-normal dark:text-white" >
Living Room
< / h6 >
< / div >
< / div >
< / td >
< td class = "p-2 text-sm leading-normal text-center align-middle bg-transparent border-b whitespace-nowrap shadow-transparent dark:border-white/40 dark:text-white/60" >
< span class = "text-xs font-semibold leading-tight" >
15%
< / span >
< / td >
< / tr >
< tr >
< td class = "p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent dark:border-white/40" >
< div class = "flex px-2 py-0" >
< span class = "py-2.2 px-2.8 text-xs rounded-1.8 bg-gradient-to-tl from-slate-600 to-slate-300 mr-4 inline-block whitespace-nowrap text-center align-baseline font-bold uppercase leading-none text-white" >
< / span >
< div class = "flex flex-col justify-center" >
< h6 class = "mb-0 text-sm leading-normal dark:text-white" >
Kitchen
< / h6 >
< / div >
< / div >
< / td >
< td class = "p-2 text-sm leading-normal text-center align-middle bg-transparent border-b whitespace-nowrap shadow-transparent dark:border-white/40 dark:text-white/60" >
< span class = "text-xs font-semibold leading-tight" >
20%
< / span >
< / td >
< / tr >
< tr >
< td class = "p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent dark:border-white/40" >
< div class = "flex px-2 py-0" >
< span class = "py-2.2 px-2.8 text-xs rounded-1.8 bg-gradient-to-tl from-blue-600 to-cyan-400 mr-4 inline-block whitespace-nowrap text-center align-baseline font-bold uppercase leading-none text-white" >
< / span >
< div class = "flex flex-col justify-center" >
< h6 class = "mb-0 text-sm leading-normal dark:text-white" >
Attic
< / h6 >
< / div >
< / div >
< / td >
< td class = "p-2 text-sm leading-normal text-center align-middle bg-transparent border-b whitespace-nowrap shadow-transparent dark:border-white/40 dark:text-white/60" >
< span class = "text-xs font-semibold leading-tight" >
13%
< / span >
< / td >
< / tr >
< tr >
< td class = "p-2 align-middle bg-transparent border-b whitespace-nowrap shadow-transparent dark:border-white/40" >
< div class = "flex px-2 py-0" >
< span class = "py-2.2 px-2.8 text-xs rounded-1.8 bg-gradient-to-tl from-green-600 to-lime-400 mr-4 inline-block whitespace-nowrap text-center align-baseline font-bold uppercase leading-none text-white" >
< / span >
< div class = "flex flex-col justify-center" >
< h6 class = "mb-0 text-sm leading-normal dark:text-white" >
Garage
< / h6 >
< / div >
< / div >
< / td >
< td class = "p-2 text-sm leading-normal text-center align-middle bg-transparent border-b whitespace-nowrap shadow-transparent dark:border-white/40 dark:text-white/60" >
< span class = "text-xs font-semibold leading-tight" >
32%
< / span >
< / td >
< / tr >
< tr >
< td class = "p-2 align-middle bg-transparent border-b-0 whitespace-nowrap shadow-transparent dark:border-white/40" >
< div class = "flex px-2 py-0" >
< span class = "py-2.2 px-2.8 text-xs rounded-1.8 bg-gradient-to-tl from-red-500 to-yellow-400 mr-4 inline-block whitespace-nowrap text-center align-baseline font-bold uppercase leading-none text-white" >
< / span >
< div class = "flex flex-col justify-center" >
< h6 class = "mb-0 text-sm leading-normal dark:text-white" >
Basement
< / h6 >
< / div >
< / div >
< / td >
< td class = "p-2 text-sm leading-normal text-center align-middle bg-transparent border-b-0 whitespace-nowrap shadow-transparent dark:border-white/40 dark:text-white/60" >
< span class = "text-xs font-semibold leading-tight" >
20%
< / span >
< / td >
< / tr >
< / tbody >
< / table >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "w-full max-w-full px-3 mt-6 lg:flex-0 shrink-0 sm:w-6/12 lg:mt-0 lg:w-3/12" >
< div class = "border-black/12.5 dark:bg-gray-950 dark:shadow-soft-dark-xl shadow-soft-xl relative flex h-full min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border" >
< div class = "flex-auto p-4" >
< h6 class = "dark:text-white" >
Consumption per day
< / h6 >
< div class = "pt-4 chart" >
< canvas class = "chart-canvas" height = "170" id = "chart-cons-week" >
< / canvas >
< / div >
< / div >
< / div >
< / div >
< div class = "w-full max-w-full px-3 mt-6 lg:flex-0 shrink-0 sm:w-6/12 lg:mt-0 lg:w-3/12" >
< div class = "border-black/12.5 dark:bg-gray-950 dark:shadow-soft-dark-xl shadow-soft-xl relative flex h-full min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border" >
< div class = "flex-auto p-4 text-center" >
< h6 class = "text-left dark:text-white" >
Device limit
< / h6 >
< round-slider class = "transition-all duration-500 ease-soft-out max-w-50" value = "21" valuelabel = "Temperature" >
< / round-slider >
< h4 class = "-mt-24 font-semibold" >
< span class = "text-slate-700 dark:text-white" id = "value" >
21
< / span >
< span class = "text-slate-500 dark:text-white/40" >
°C
< / span >
< / h4 >
< p class = "pl-1 mt-12 mb-0" >
< span class = "text-xs leading-tight dark:text-white" >
16°C
< / span >
< span class = "px-4 dark:text-white" >
Temperature
< / span >
< span class = "text-xs leading-tight dark:text-white" >
38°C
< / span >
< / p >
< / div >
< / div >
< / div >
< / div >
< hr class = "h-px my-12 dark:bg-gradient-to-r dark:from-transparent dark:via-white dark:to-transparent bg-gradient-to-r from-transparent via-black/40 to-transparent" / >
< div class = "flex flex-wrap -mx-3" >
< div class = "w-full max-w-full px-3 sm:flex-0 shrink-0 sm:w-6/12 lg:w-2/12" >
< div class = "border-black/12.5 dark:bg-gray-950 dark:shadow-soft-dark-xl shadow-soft-xl relative flex h-full min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border" >
< div class = "flex-auto p-6" >
< div class = "flex mb-6" >
< p class = "mb-0" >
Off
< / p >
< div class = "min-h-6 mb-0.5 ml-auto block pl-12" >
< input class = "rounded-10 duration-250 mt-0.5 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.3 h-5 relative float-left -ml-12 w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type = "checkbox" / >
< / div >
< / div >
2024-09-09 03:56:44 +00:00
{% include 'static/svg/my_29.svg' %}
2024-09-02 05:28:06 +00:00
< p class = "mt-6 mb-0 font-semibold" >
Humidity
< / p >
< span class = "text-xs leading-tight" >
Inactive since: 2 days
< / span >
< / div >
< / div >
< / div >
< div class = "w-full max-w-full px-3 mt-6 sm:flex-0 shrink-0 sm:w-6/12 lg:w-2/12 sm:mt-0" >
< div class = "border-black/12.5 dark:bg-gray-950 dark:shadow-soft-dark-xl shadow-soft-xl bg-gradient-to-tl from-purple-700 to-pink-500 relative flex h-full min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-clip-border" >
< div class = "flex-auto p-6" >
< div class = "flex mb-4" >
< p class = "mb-0 text-white" >
On
< / p >
< div class = "min-h-6 mb-0.5 ml-auto block pl-12" >
< input checked = "" class = "rounded-10 duration-250 mt-0.5 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.3 h-5 relative float-left -ml-12 w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type = "checkbox" / >
< / div >
< / div >
2024-09-09 03:56:44 +00:00
{% include 'static/svg/my_30.svg' %}
2024-09-02 05:28:06 +00:00
< p class = "mt-2 mb-0 font-semibold text-white" >
Temperature
< / p >
< span class = "text-xs leading-tight text-white" >
Active
< / span >
< / div >
< / div >
< / div >
< div class = "w-full max-w-full px-3 mt-6 sm:flex-0 lg:mt-0 shrink-0 sm:w-6/12 lg:w-2/12" >
< div class = "dark:shadow-soft-dark-xl border-black/12.5 dark:bg-gray-950 shadow-soft-xl relative flex h-full min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border" >
< div class = "flex-auto p-6" >
< div class = "flex mb-6" >
< p class = "mb-0" >
Off
< / p >
< div class = "min-h-6 mb-0.5 ml-auto block pl-12" >
< input class = "rounded-10 duration-250 mt-0.5 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.3 h-5 relative float-left -ml-12 w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type = "checkbox" / >
< / div >
< / div >
2024-09-09 03:56:44 +00:00
{% include 'static/svg/my_31.svg' %}
2024-09-02 05:28:06 +00:00
< p class = "mt-6 mb-0 font-semibold" >
Air Conditioner
< / p >
< span class = "text-xs leading-tight" >
Inactive since: 1 hour
< / span >
< / div >
< / div >
< / div >
< div class = "w-full max-w-full px-3 mt-6 sm:flex-0 lg:mt-0 shrink-0 sm:w-6/12 lg:w-2/12" >
< div class = "dark:shadow-soft-dark-xl border-black/12.5 dark:bg-gray-950 shadow-soft-xl relative flex h-full min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border" >
< div class = "flex-auto p-6" >
< div class = "flex mb-6" >
< p class = "mb-0" >
Off
< / p >
< div class = "min-h-6 mb-0.5 ml-auto block pl-12" >
< input class = "rounded-10 duration-250 mt-0.5 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.3 h-5 relative float-left -ml-12 w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type = "checkbox" / >
< / div >
< / div >
2024-09-09 03:56:44 +00:00
{% include 'static/svg/my_32.svg' %}
2024-09-02 05:28:06 +00:00
< p class = "mt-6 mb-0 font-semibold" >
Lights
< / p >
< span class = "text-xs leading-tight" >
Inactive since: 27 min
< / span >
< / div >
< / div >
< / div >
< div class = "w-full max-w-full px-3 mt-6 sm:flex-0 lg:mt-0 shrink-0 sm:w-6/12 lg:w-2/12" >
< div class = "border-black/12.5 dark:bg-gray-950 dark:shadow-soft-dark-xl shadow-soft-xl bg-gradient-to-tl from-purple-700 to-pink-500 relative flex h-full min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-clip-border" >
< div class = "flex-auto p-6" >
< div class = "flex mb-6" >
< p class = "mb-0 text-white" >
On
< / p >
< div class = "min-h-6 mb-0.5 ml-auto block pl-12" >
< input checked = "" class = "rounded-10 duration-250 mt-0.5 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.3 h-5 relative float-left -ml-12 w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" type = "checkbox" / >
< / div >
< / div >
2024-09-09 03:56:44 +00:00
{% include 'static/svg/my_33.svg' %}
2024-09-02 05:28:06 +00:00
< p class = "mt-6 mb-0 font-semibold text-white" >
Wi-fi
< / p >
< span class = "text-xs leading-tight text-white" >
Active
< / span >
< / div >
< / div >
< / div >
< div class = "w-full max-w-full px-3 mt-6 sm:flex-0 lg:mt-0 shrink-0 sm:w-6/12 lg:w-2/12" >
< div class = "dark:shadow-soft-dark-xl border-black/12.5 dark:bg-gray-950 shadow-soft-xl relative flex h-full min-w-0 flex-col break-words rounded-2xl border-0 border-solid bg-white bg-clip-border" >
< div class = "flex flex-col justify-center flex-auto p-6 text-center" >
< a href = "javascript:;" >
< i class = "mb-4 fa fa-plus text-slate-400" >
< / i >
< h5 class = "text-slate-400" >
New device
< / h5 >
< / a >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- Footer -->
< footer class = "pt-4" >
< div class = "w-full px-6 mx-auto" >
< div class = "flex flex-wrap items-center -mx-3 lg:justify-between" >
< div class = "w-full max-w-full px-3 mt-0 mb-6 shrink-0 lg:mb-0 lg:w-1/2 lg:flex-none" >
< div class = "leading-normal text-center copyright text-sm text-slate-500 lg:text-left" >
©
< script >
document.write(new Date().getFullYear() + ",");
< / script >
made with
< i class = "fa fa-heart" >
< / i >
by
< a class = "font-semibold text-slate-700 dark:text-white" href = "https://www.creative-tim.com" target = "_blank" >
Creative Tim
< / a >
for a better web.
< / div >
< / div >
< div class = "w-full max-w-full px-3 mt-0 shrink-0 lg:w-1/2 lg:flex-none" >
< ul class = "flex flex-wrap justify-center pl-0 mb-0 list-none lg:justify-end" >
< li class = "nav-item" >
< a class = "block px-4 pt-0 pb-1 font-normal transition-colors ease-soft-in-out text-sm text-slate-500" href = "https://www.creative-tim.com" target = "_blank" >
Creative Tim
< / a >
< / li >
< li class = "nav-item" >
< a class = "block px-4 pt-0 pb-1 font-normal transition-colors ease-soft-in-out text-sm text-slate-500" href = "https://www.creative-tim.com/presentation" target = "_blank" >
About Us
< / a >
< / li >
< li class = "nav-item" >
< a class = "block px-4 pt-0 pb-1 font-normal transition-colors ease-soft-in-out text-sm text-slate-500" href = "https://creative-tim.com/blog" target = "_blank" >
Blog
< / a >
< / li >
< li class = "nav-item" >
< a class = "block px-4 pt-0 pb-1 pr-0 font-normal transition-colors ease-soft-in-out text-sm text-slate-500" href = "https://www.creative-tim.com/license" target = "_blank" >
License
< / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< / footer >
< / main >
< div fixed-plugin = "" >
< a aria-expanded = "false" class = "fixed px-4 py-2 bg-white cursor-pointer bottom-7 right-7 text-xl z-990 shadow-soft-lg rounded-circle text-slate-700" fixed-plugin-button = "" >
< i class = "py-2 pointer-events-none fa fa-cog" >
< / i >
< / a >
<!-- - right - 90 in loc de 0 -->
< div class = "dark:bg-gray-950/80 z-sticky shadow-soft-3xl w-90 ease-soft -right-90 fixed top-0 left-auto flex h-full min-w-0 flex-col break-words rounded-none border-0 bg-white/80 bg-clip-border px-2.5 backdrop-blur-2xl backdrop-saturate-200 duration-200" fixed-plugin-card = "" >
< div class = "px-6 pt-4 pb-0 mb-0 border-b-0 rounded-t-2xl" >
< div class = "float-left" >
< h5 class = "mt-4 mb-0 dark:text-white" >
Soft UI Configurator
< / h5 >
< p class = "dark:text-white dark:opacity-60" >
See our dashboard options.
< / p >
< / div >
< div class = "float-right mt-6" >
< button class = "inline-block p-0 mb-4 font-bold text-center uppercase align-middle transition-all bg-transparent border-0 rounded-lg shadow-none cursor-pointer hover:scale-102 leading-pro text-xs ease-soft-in tracking-tight-soft bg-150 bg-x-25 active:opacity-85 text-slate-700 dark:text-white" fixed-plugin-close-button = "" >
< i class = "fa fa-close" >
< / i >
< / button >
< / div >
<!-- End Toggle Button -->
< / div >
< hr class = "h-px mx-0 my-1 bg-transparent bg-gradient-to-r from-transparent via-black/40 to-transparent dark:bg-gradient-to-r dark:from-transparent dark:via-white dark:to-transparent" / >
< div class = "flex-auto p-6 pt-0 sm:pt-4" >
<!-- Sidebar Backgrounds -->
< div >
< h6 class = "mb-0 dark:text-white" >
Sidebar Colors
< / h6 >
< / div >
< a class = "switch-trigger background-color" href = "javascript:void(0)" >
< div class = "my-2 text-left" sidenav-colors = "" >
< span active-color = "" class = "py-2.2 text-xs px-2.2 rounded-circle h-5.6 mr-1.25 w-5.6 ease-soft-in-out bg-gradient-to-tl from-purple-700 to-pink-500 relative inline-block cursor-pointer whitespace-nowrap border border-solid border-slate-700 text-center align-baseline font-bold uppercase leading-none text-white transition-all duration-200 hover:border-slate-700" data-color-from = "purple-700" data-color-to = "pink-500" onclick = "sidebarColor(this)" >
< / span >
< span class = "py-2.2 text-xs px-2.2 rounded-circle h-5.6 mr-1.25 w-5.6 ease-soft-in-out bg-gradient-to-tl from-gray-900 to-slate-800 dark:bg-gradient-to-tl dark:from-slate-850 dark:to-gray-850 relative inline-block cursor-pointer whitespace-nowrap border border-solid border-white text-center align-baseline font-bold uppercase leading-none text-white transition-all duration-200 hover:border-slate-700" data-color-from = "gray-900" data-color-to = "slate-800" onclick = "sidebarColor(this)" >
< / span >
< span class = "py-2.2 text-xs px-2.2 rounded-circle h-5.6 mr-1.25 w-5.6 ease-soft-in-out bg-gradient-to-tl from-blue-600 to-cyan-400 relative inline-block cursor-pointer whitespace-nowrap border border-solid border-white text-center align-baseline font-bold uppercase leading-none text-white transition-all duration-200 hover:border-slate-700" data-color-from = "blue-600" data-color-to = "cyan-400" onclick = "sidebarColor(this)" >
< / span >
< span class = "py-2.2 text-xs px-2.2 rounded-circle h-5.6 mr-1.25 w-5.6 ease-soft-in-out bg-gradient-to-tl from-green-600 to-lime-400 relative inline-block cursor-pointer whitespace-nowrap border border-solid border-white text-center align-baseline font-bold uppercase leading-none text-white transition-all duration-200 hover:border-slate-700" data-color-from = "green-600" data-color-to = "lime-400" onclick = "sidebarColor(this)" >
< / span >
< span class = "py-2.2 text-xs px-2.2 rounded-circle h-5.6 mr-1.25 w-5.6 ease-soft-in-out bg-gradient-to-tl from-red-500 to-yellow-400 relative inline-block cursor-pointer whitespace-nowrap border border-solid border-white text-center align-baseline font-bold uppercase leading-none text-white transition-all duration-200 hover:border-slate-700" data-color-from = "red-500" data-color-to = "yellow-400" onclick = "sidebarColor(this)" >
< / span >
< span class = "py-2.2 text-xs px-2.2 rounded-circle h-5.6 mr-1.25 w-5.6 ease-soft-in-out bg-gradient-to-tl from-red-600 to-rose-400 relative inline-block cursor-pointer whitespace-nowrap border border-solid border-white text-center align-baseline font-bold uppercase leading-none text-white transition-all duration-200 hover:border-slate-700" data-color-from = "red-600" data-color-to = "rose-400" onclick = "sidebarColor(this)" >
< / span >
< / div >
< / a >
<!-- Sidenav Type -->
< div class = "mt-4" >
< h6 class = "mb-0 dark:text-white" >
Sidenav Type
< / h6 >
< p class = "leading-normal text-sm dark:opacity-60" >
Choose between 2 different sidenav types.
< / p >
< / div >
< div class = "flex" >
< button active-style = "" class = "inline-block w-full px-4 py-3 mb-2 font-bold text-center text-white uppercase align-middle transition-all border border-transparent border-solid rounded-lg cursor-pointer xl-max:cursor-not-allowed xl-max:opacity-65 xl-max:pointer-events-none xl-max:bg-gradient-to-tl xl-max:from-purple-700 xl-max:to-pink-500 xl-max:text-white xl-max:border-0 hover:scale-102 hover:shadow-soft-xs active:opacity-85 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 bg-gradient-to-tl from-purple-700 to-pink-500 bg-fuchsia-500 hover:border-fuchsia-500 dark:pointer-events-none dark:cursor-not-allowed" data-class = "bg-transparent" transparent-style-btn = "" >
Transparent
< / button >
< button class = "inline-block w-full px-4 py-3 mb-2 ml-2 font-bold text-center uppercase align-middle transition-all bg-transparent border border-solid rounded-lg cursor-pointer xl-max:cursor-not-allowed xl-max:opacity-65 xl-max:pointer-events-none xl-max:bg-gradient-to-tl xl-max:from-purple-700 xl-max:to-pink-500 xl-max:text-white xl-max:border-0 hover:scale-102 hover:shadow-soft-xs active:opacity-85 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 border-fuchsia-500 bg-none text-fuchsia-500 hover:border-fuchsia-500 dark:pointer-events-none dark:cursor-not-allowed" data-class = "bg-white" white-style-btn = "" >
White
< / button >
< / div >
< p class = "block mt-2 leading-normal text-sm xl:hidden" >
You can change the sidenav type just on desktop view.
< / p >
<!-- Navbar Fixed -->
< div class = "mt-4" >
< h6 class = "mb-0 dark:text-white" >
Navbar Fixed
< / h6 >
< / div >
< div class = "min-h-6 mb-0.5 block pl-0" >
< input class = "rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.3 h-5 relative float-left mt-1 ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" navbar-fixed-toggle = "" type = "checkbox" / >
< / div >
< hr class = "h-px mt-4 mb-1 bg-transparent bg-gradient-to-r from-transparent via-black/40 to-transparent dark:bg-gradient-to-r dark:from-transparent dark:via-white dark:to-transparent" / >
< div class = "mt-2" >
< h6 class = "mb-0 dark:text-white" >
Sidenav Mini
< / h6 >
< / div >
< div class = "min-h-6 mb-0.5 block pl-0" >
< input class = "rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.3 h-5 relative float-left mt-1 ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" sidenav-mini-toggle = "" type = "checkbox" / >
< / div >
< hr class = "h-px mt-4 mb-1 bg-transparent bg-gradient-to-r from-transparent via-black/40 to-transparent dark:bg-gradient-to-r dark:from-transparent dark:via-white dark:to-transparent" / >
< div class = "mt-2" >
< h6 class = "mb-0 dark:text-white" >
Light/Dark
< / h6 >
< / div >
< div class = "min-h-6 mb-0.5 block pl-0" >
< input class = "rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.3 h-5 relative float-left mt-1 ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" dark-toggle = "" type = "checkbox" / >
< / div >
< hr class = "h-px my-6 bg-transparent bg-gradient-to-r from-transparent via-black/40 to-transparent dark:bg-gradient-to-r dark:from-transparent dark:via-white dark:to-transparent" / >
< a class = "inline-block w-full px-6 py-3 mb-4 font-bold text-center text-white uppercase align-middle transition-all bg-transparent border-0 rounded-lg cursor-pointer leading-pro text-xs ease-soft-in hover:shadow-soft-xs hover:scale-102 active:opacity-85 tracking-tight-soft shadow-soft-md bg-150 bg-x-25 bg-gradient-to-tl from-blue-600 to-cyan-400" href = "https://www.creative-tim.com/product/soft-ui-dashboard-pro-tailwind" target = "_blank" >
Buy Now
< / a >
< a class = "inline-block w-full px-6 py-3 mb-4 font-bold text-center text-white uppercase align-middle transition-all bg-transparent border border-transparent border-solid rounded-lg cursor-pointer leading-pro text-xs ease-soft-in hover:shadow-soft-xs hover:scale-102 active:opacity-85 tracking-tight-soft shadow-soft-md bg-150 bg-x-25 bg-gradient-to-tl from-gray-900 to-slate-800 dark:bg-gradient-to-tl dark:from-slate-850 dark:to-gray-850 dark:border-white dark:text-white" href = "https://www.creative-tim.com/product/soft-ui-dashboard-tailwind" target = "_blank" >
Free Demo
< / a >
< a class = "inline-block w-full px-6 py-3 mb-4 font-bold text-center uppercase align-middle transition-all bg-transparent border border-solid rounded-lg shadow-none cursor-pointer active:shadow-soft-xs hover:scale-102 active:opacity-85 leading-pro text-xs ease-soft-in tracking-tight-soft bg-150 bg-x-25 border-slate-700 text-slate-700 hover:bg-transparent hover:text-slate-700 hover:shadow-none active:bg-slate-700 active:text-white active:hover:bg-transparent active:hover:text-slate-700 active:hover:shadow-none dark:border-white dark:text-white" href = "https://www.creative-tim.com/learning-lab/tailwind/html/quick-start/soft-ui-dashboard/" target = "_blank" >
View documentation
< / a >
< div class = "w-full text-center" >
< a aria-label = "Star creativetimofficial/soft-ui-dashboard on GitHub" class = "github-button" data-icon = "octicon-star" data-show-count = "true" data-size = "large" href = "https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro" >
Star
< / a >
< h6 class = "mt-4" >
Thank you for sharing!
< / h6 >
< a class = "inline-block px-6 py-3 mb-0 mr-2 font-bold text-center text-white uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:shadow-soft-xs hover:scale-102 active:opacity-85 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 me-2 border-slate-700 bg-slate-700" href = "https://twitter.com/intent/tweet?text=Check%20Soft%20UI%20Dashboard%20Pro%20Tailwind%20made%20by%20%40CreativeTim%20%23webdesign%20%23dashboard%20%23tailwindCSS&url=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fsoft-ui-dashboard-pro-tailwind" target = "_blank" >
< i aria-hidden = "true" class = "mr-1 fab fa-twitter" >
< / i >
Tweet
< / a >
< a class = "inline-block px-6 py-3 mb-0 mr-2 font-bold text-center text-white uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:shadow-soft-xs hover:scale-102 active:opacity-85 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 me-2 border-slate-700 bg-slate-700" href = "https://www.facebook.com/sharer/sharer.php?u=https://www.creative-tim.com/product/soft-ui-dashboard-pro-tailwind" target = "_blank" >
< i aria-hidden = "true" class = "mr-1 fab fa-facebook-square" >
< / i >
Share
< / a >
< / div >
< / div >
< / div >
< / div >
< / body >
<!-- Core JS Files -->
< script src = "/static/js/plugins/nouislider.min.js" >
< / script >
< script src = "/static/js/plugins/perfect-scrollbar.min.js" >
< / script >
< script src = "/static/js/plugins/chartjs.min.js" >
< / script >
< script src = "/static/js/plugins/countup.min.js" >
< / script >
< script src = "/static/js/plugins/round-slider.min.js" >
< / script >
< script src = "/static/js/plugins/round-slider.min.js" >
< / script >
<!-- main script file -->
< script src = "/static/js/soft-ui-dashboard-pro-tailwind.js" >
< / script >
< / html >
