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" >
< div >
<!-- 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" >
VR Default
< / 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 >
< / div >
< div class = "relative mx-4 mt-4 rounded-2xl bg-[url('../img/vr-bg.jpg')] bg-cover" >
<!-- sidenav -->
< aside class = "dark:bg-gray-950 xl:animate-fade-up xl:scale-60 ease-soft-in-out z-990 max-w-64 xl:shadow-soft-xl fixed inset-y-0 left-0 xl:ml-4 block w-full -translate-x-full flex-wrap items-center justify-between overflow-y-auto rounded-2xl border-0 bg-white p-0 shadow-none transition-all duration-200 xl:left-[18%] xl:mt-6 xl:translate-x-0 xl:bg-white" id = "sidenav-main" mini = "false" >
<!-- header -->
< div class = "h-20" >
<!-- x i -->
< 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 - - - - - - - - - - // -->
< 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" >
<!-- primary list -->
< ul class = "flex flex-col pl-0 mb-0 list-none" >
<!-- primary list item -->
< li class = "mt-0.5 w-full" >
<!-- primary anchor -->
< 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 active 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 = "#" >
<!-- big anchor expandable -->
< 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 fill-current p-2.5 text-center text-black" >
<!-- icon -->
2024-09-09 03:56:44 +00:00
{% include 'static/svg/my.svg' %}
2024-09-02 05:28:06 +00:00
< / div >
<!-- primary span -->
< 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" >
<!-- primary collapsable list -->
< ul class = "flex flex-wrap pl-4 mb-0 ml-6 list-none transition-all duration-200 ease-soft-in-out" >
<!-- medium list item -->
< li class = "w-full" >
<!-- medium a -->
< 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" >
<!-- mini span -->
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
D
< / span >
<!-- estended span -->
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Default
< / span >
< / a >
< / li >
< li class = "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 = "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/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 = "w-full" >
<!-- medium a collapsable -->
< a active_secondary = "" aria-expanded = "true" 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-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-[''] 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-100 dark:before:bg-white dark:before:opacity-80 dark:after:text-white" collapse_trigger = "secondary" href = "#" >
< 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" 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 = "w-full" >
<!-- small a -->
< a active_page = "" 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-semibold text-slate-800 shadow-none transition-colors dark:text-white dark:opacity-100" href = "../../dashboards/vr/vr-default.html" >
< span class = "w-0 leading-tight 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 = "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 leading-tight 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 = "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 = "w-full mt-4" >
< 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-controls = "pagesExamples" 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 = "#" role = "button" >
< 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_2.svg' %}
2024-09-02 05:28:06 +00:00
< / div >
< span class = "ml-1 duration-300 opacity-100 pointer-events-none ease-soft" >
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 = "w-full" >
< a aria-expanded = "false" 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" collapse_trigger = "secondary" href = "#" >
< 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 = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
P
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Profile Overview
< / span >
< / a >
< / li >
< li class = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
T
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Teams
< / span >
< / a >
< / li >
< li class = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
A
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
All Projects
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "w-full" >
< a aria-expanded = "false" 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" collapse_trigger = "secondary" href = "#" >
< 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 = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
R
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Reports
< / span >
< / a >
< / li >
< li class = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
N
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
New User
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "w-full" >
< a aria-expanded = "false" 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" collapse_trigger = "secondary" href = "#" >
< 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 = "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 leading-tight 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 = "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 leading-tight 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 = "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 leading-tight 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 = "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 leading-tight 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 = "w-full" >
< a aria-expanded = "false" 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" collapse_trigger = "secondary" href = "#" >
< 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 = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
G
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
General
< / span >
< / a >
< / li >
< li class = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
T
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Timeline
< / span >
< / a >
< / li >
< li class = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
N
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
New Project
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "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 = "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 = "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 = "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 = "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 = "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 = "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 >
<!-- Applications -->
< li class = "mt-0.5 w-full" >
< a aria-controls = "applicationsExamples" 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 = "#" role = "button" >
< 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_3.svg' %}
2024-09-02 05:28:06 +00:00
< / div >
< span class = "ml-1 duration-300 opacity-100 pointer-events-none ease-soft" >
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 = "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 = "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 = "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 = "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 = "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 >
<!-- Ecommerce -->
< li class = "mt-0.5 w-full" >
< a aria-controls = "ecommerceExamples" 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 = "#" role = "button" >
< 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_4.svg' %}
2024-09-02 05:28:06 +00:00
< / div >
< span class = "ml-1 duration-300 opacity-100 pointer-events-none ease-soft" >
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 = "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 = "w-full" >
< a aria-expanded = "false" 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" collapse_trigger = "secondary" href = "#" >
< 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 = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
N
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
New Product
< / span >
< / a >
< / li >
< li class = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
E
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Edit Product
< / span >
< / a >
< / li >
< li class = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
P
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Product Page
< / span >
< / a >
< / li >
< li class = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
P
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Products List
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "w-full" >
< a aria-expanded = "false" 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" collapse_trigger = "secondary" href = "#" >
< 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 = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
O
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Order List
< / span >
< / a >
< / li >
< li class = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
O
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Order Details
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "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-controls = "authExamples" 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 = "#" role = "button" >
< 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_5.svg' %}
2024-09-02 05:28:06 +00:00
< / div >
< span class = "ml-1 duration-300 opacity-100 pointer-events-none ease-soft" >
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 = "w-full" >
< a aria-expanded = "false" 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" collapse_trigger = "secondary" href = "#" >
< 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 = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
B
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Basic
< / span >
< / a >
< / li >
< li class = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
C
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Cover
< / span >
< / a >
< / li >
< li class = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
I
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Illustration
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "w-full" >
< a aria-expanded = "false" 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" collapse_trigger = "secondary" href = "#" >
< 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 = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
B
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Basic
< / span >
< / a >
< / li >
< li class = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
C
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Cover
< / span >
< / a >
< / li >
< li class = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
I
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Illustration
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "w-full" >
< a aria-expanded = "false" 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" collapse_trigger = "secondary" href = "#" >
< 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 = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
B
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Basic
< / span >
< / a >
< / li >
< li class = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
C
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Cover
< / span >
< / a >
< / li >
< li class = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
I
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Illustration
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "w-full" >
< a aria-expanded = "false" 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" collapse_trigger = "secondary" href = "#" >
< 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 = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
B
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Basic
< / span >
< / a >
< / li >
< li class = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
C
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Cover
< / span >
< / a >
< / li >
< li class = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
I
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Illustration
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "w-full" >
< a aria-expanded = "false" 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" collapse_trigger = "secondary" href = "#" >
< 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 = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
B
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Basic
< / span >
< / a >
< / li >
< li class = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
C
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Cover
< / span >
< / a >
< / li >
< li class = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
I
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Illustration
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "w-full" >
< a aria-expanded = "false" 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" collapse_trigger = "secondary" href = "#" >
< 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 = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
E
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Error 404
< / span >
< / a >
< / li >
< li class = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
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 >
< / li >
< li class = "mt-0.5 w-full" >
< a aria-controls = "basicExamples" 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 = "#" role = "button" >
< 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_6.svg' %}
2024-09-02 05:28:06 +00:00
< / div >
< span class = "ml-1 duration-300 opacity-100 pointer-events-none ease-soft" >
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 = "w-full" >
< a aria-expanded = "false" 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" collapse_trigger = "secondary" href = "#" >
< 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 = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
Q
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Quick Start
< / span >
< / a >
< / li >
< li class = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
L
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
License
< / span >
< / a >
< / li >
< li class = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
C
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Contents
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "w-full" >
< a aria-expanded = "false" 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" collapse_trigger = "secondary" href = "#" >
< span class = "w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out" >
F
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Foundation
< 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 = "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 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
C
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Colors
< / span >
< / a >
< / li >
< li class = "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/typography/soft-ui-dashboard/" target = "_blank" >
< span class = "w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out" >
T
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Typography
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< / ul >
< / div >
< / li >
< li class = "mt-0.5 w-full" >
< a aria-controls = "componentsExamples" 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 = "#" role = "button" >
< 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_7.svg' %}
2024-09-02 05:28:06 +00:00
< / div >
< span class = "ml-1 duration-300 opacity-100 pointer-events-none ease-soft" >
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 = "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" >
Alerts
< / span >
< / a >
< / li >
< li class = "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" >
B
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Badge
< / span >
< / a >
< / li >
< li class = "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" >
Buttons
< / span >
< / a >
< / li >
< li class = "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 = "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 = "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" >
Dropdowns
< / span >
< / a >
< / li >
< li class = "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" >
F
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Forms
< / span >
< / a >
< / li >
< li class = "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" >
M
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Modal
< / span >
< / a >
< / li >
< li class = "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" >
N
< / span >
< span class = "transition-all duration-100 pointer-events-none ease-soft" >
Navs
< / span >
< / a >
< / li >
< li class = "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 = "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 = "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" >
Tables
< / span >
< / a >
< / li >
< li class = "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" >
Tooltips
< / span >
< / a >
< / li >
< / ul >
< / div >
< / li >
< li class = "mt-0.5 w-full" >
< a class = "ease-soft-in-out text-sm py-2.7 active 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_8.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 = "mt-1 transition-all duration-200 ease-soft-in-out xl:ml-68 rounded-xl" >
<!-- Content -->
< div class = "relative scale-100 md:scale-60 min-h-85-screen" >
< div class = "container md:-ml-12" >
< div class = "flex flex-wrap -mx-3" >
< div class = "relative z-20 w-full max-w-full px-3 mb-6 lg:flex-0 shrink-0 lg:mb-0 lg:w-7/12" >
<!-- <div class="relative z - 20 w - full max - w - full px - 3 lg:flex - 0 shrink - 0 lg:w - 7/12"> -->
< div class = "relative flex flex-col min-w-0 mb-6 break-words bg-transparent border-0 border-solid shadow-none dark:bg-gray-950 dark:shadow-soft-dark-xl border-black-125 rounded-2xl bg-clip-border" >
< div class = "flex-auto p-4" >
< div class = "flex flex-wrap -mx-3" >
< div class = "w-full max-w-full px-3 lg:flex-0 shrink-0 lg:w-6/12" >
< div class = "flex flex-col h-full" >
< h2 class = "font-bold dark:text-white" >
General Statistics
< / h2 >
< div class = "flex items-center" >
< h6 class = "mb-0 font-bold animate-fade-up" >
All users
< / h6 >
< a class = "mt-1 mb-0 ml-6 font-semibold leading-normal group text-sm animate-fade-up text-fuchsia-500" href = "javascript:;" >
Read More
< i class = "fas fa-arrow-right text-sm ease-bounce group-hover:translate-x-1.25 ml-1 leading-normal transition-all duration-200" >
< / i >
< / a >
< / div >
< h1 class = "mb-0 font-bold animate-fade-up dark:text-white" >
1,600,000
< / h1 >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "flex flex-wrap -mx-3" >
< div class = "w-full max-w-full px-3 md:flex-0 shrink-0 md:w-6/12 lg:w-4/12" >
< div class = "relative flex flex-col min-w-0 mb-6 break-words bg-white animate-fade-up dark:bg-gray-950 shadow-soft-xl dark:shadow-soft-dark-xl rounded-2xl bg-clip-border" >
< div class = "flex-auto p-4" >
< div class = "flex flex-wrap -mx-3" >
< div class = "flex-none w-2/3 max-w-full px-3" >
< div >
< p class = "mb-0 font-sans font-semibold leading-normal text-sm dark:opacity-60" >
Today's Money
< / p >
< h5 class = "mb-0 font-bold dark:text-white" >
$53,000
< span class = "leading-normal text-sm font-weight-bolder text-lime-500" >
+55%
< / span >
< / h5 >
< / div >
< / div >
< div class = "w-4/12 max-w-full px-3 text-right flex-0" >
< div class = "inline-block w-12 h-12 text-center rounded-lg bg-gradient-to-tl from-purple-700 to-pink-500 shadow-soft-2xl" >
< i aria-hidden = "true" class = "ni leading-none ni-money-coins text-lg relative top-3.5 text-white" >
< / i >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "relative flex flex-col min-w-0 break-words bg-white animate-fade-up dark:bg-gray-950 shadow-soft-xl dark:shadow-soft-dark-xl rounded-2xl bg-clip-border" >
< div class = "flex-auto p-4" >
< div class = "flex flex-wrap -mx-3" >
< div class = "flex-none w-2/3 max-w-full px-3" >
< div >
< p class = "mb-0 font-sans font-semibold leading-normal text-sm dark:opacity-60" >
Today's Users
< / p >
< h5 class = "mb-0 font-bold dark:text-white" >
2,300
< span class = "leading-normal text-sm font-weight-bolder text-lime-500" >
+3%
< / span >
< / h5 >
< / div >
< / div >
< div class = "w-4/12 max-w-full px-3 text-right flex-0" >
< div class = "inline-block w-12 h-12 text-center rounded-lg bg-gradient-to-tl from-purple-700 to-pink-500 shadow-soft-2xl" >
< i aria-hidden = "true" class = "ni leading-none ni-world text-lg relative top-3.5 text-white" >
< / i >
< / div >
< / div >
< / div >
< / 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 lg:w-4/12" >
< div class = "relative flex flex-col min-w-0 mb-6 break-words bg-white animate-fade-up dark:bg-gray-950 shadow-soft-xl dark:shadow-soft-dark-xl rounded-2xl bg-clip-border" >
< div class = "flex-auto p-4" >
< div class = "flex flex-wrap -mx-3" >
< div class = "flex-none w-2/3 max-w-full px-3" >
< div >
< p class = "mb-0 font-sans font-semibold leading-normal text-sm dark:opacity-60" >
New Clients
< / p >
< h5 class = "mb-0 font-bold dark:text-white" >
+3,462
< span class = "leading-normal text-red-600 text-sm font-weight-bolder" >
-2%
< / span >
< / h5 >
< / div >
< / div >
< div class = "w-4/12 max-w-full px-3 text-right flex-0" >
< div class = "inline-block w-12 h-12 text-center rounded-lg bg-gradient-to-tl from-purple-700 to-pink-500 shadow-soft-2xl" >
< i aria-hidden = "true" class = "ni leading-none ni-paper-diploma text-lg relative top-3.5 text-white" >
< / i >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "relative flex flex-col min-w-0 break-words bg-white animate-fade-up dark:bg-gray-950 shadow-soft-xl dark:shadow-soft-dark-xl rounded-2xl bg-clip-border" >
< div class = "flex-auto p-4" >
< div class = "flex flex-wrap -mx-3" >
< div class = "flex-none w-2/3 max-w-full px-3" >
< div >
< p class = "mb-0 font-sans font-semibold leading-normal text-sm dark:opacity-60" >
Sales
< / p >
< h5 class = "mb-0 font-bold dark:text-white" >
$103,430
< span class = "leading-normal text-sm font-weight-bolder text-lime-500" >
+5%
< / span >
< / h5 >
< / div >
< / div >
< div class = "w-4/12 max-w-full px-3 text-right flex-0" >
< div class = "inline-block w-12 h-12 text-center rounded-lg bg-gradient-to-tl from-purple-700 to-pink-500 shadow-soft-2xl" >
< i aria-hidden = "true" class = "ni leading-none ni-cart text-lg relative top-3.5 text-white" >
< / i >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "flex flex-wrap mt-6 -mx-3" >
< div class = "w-full max-w-full px-3 flex-0" >
< div class = "relative flex flex-col min-w-0 break-words bg-white border-0 border-solid animate-fade-up dark:bg-gray-950 border-black-125 shadow-soft-xl dark:shadow-soft-dark-xl rounded-2xl bg-clip-border" >
< div class = "p-4 pb-0 mb-0 rounded-t-4" >
< div class = "flex justify-between" >
< h6 class = "mb-2 dark:text-white" >
Sales by Country
< / h6 >
< / div >
< / div >
< div class = "overflow-x-auto" >
< table class = "items-center w-full mb-4 align-top border-gray-200 dark:border-white/40" >
< tbody >
< tr >
< td class = "p-2 align-middle bg-transparent border-b w-3/10 whitespace-nowrap dark:border-white/40" >
< div class = "flex items-center px-2 py-1" >
< div >
< img alt = "Country flag" src = "/static/img/icons/flags/US.png" / >
< / div >
< div class = "ml-6" >
< p class = "mb-0 font-semibold leading-tight text-xs dark:opacity-60" >
Country:
< / p >
< h6 class = "mb-0 leading-normal text-sm dark:text-white" >
United States
< / h6 >
< / div >
< / div >
< / td >
< td class = "p-2 align-middle bg-transparent border-b whitespace-nowrap dark:border-white/40" >
< div class = "text-center" >
< p class = "mb-0 font-semibold leading-tight text-xs dark:opacity-60" >
Sales:
< / p >
< h6 class = "mb-0 leading-normal text-sm dark:text-white" >
2500
< / h6 >
< / div >
< / td >
< td class = "p-2 align-middle bg-transparent border-b whitespace-nowrap dark:border-white/40" >
< div class = "text-center" >
< p class = "mb-0 font-semibold leading-tight text-xs dark:opacity-60" >
Value:
< / p >
< h6 class = "mb-0 leading-normal text-sm dark:text-white" >
$230,900
< / h6 >
< / div >
< / td >
< td class = "p-2 leading-normal align-middle bg-transparent border-b text-sm whitespace-nowrap dark:border-white/40" >
< div class = "flex-1 text-center" >
< p class = "mb-0 font-semibold leading-tight text-xs dark:opacity-60" >
Bounce:
< / p >
< h6 class = "mb-0 leading-normal text-sm dark:text-white" >
29.9%
< / h6 >
< / div >
< / td >
< / tr >
< tr >
< td class = "p-2 align-middle bg-transparent border-b w-3/10 whitespace-nowrap dark:border-white/40" >
< div class = "flex items-center px-2 py-1" >
< div >
< img alt = "Country flag" src = "/static/img/icons/flags/DE.png" / >
< / div >
< div class = "ml-6" >
< p class = "mb-0 font-semibold leading-tight text-xs dark:opacity-60" >
Country:
< / p >
< h6 class = "mb-0 leading-normal text-sm dark:text-white" >
Germany
< / h6 >
< / div >
< / div >
< / td >
< td class = "p-2 align-middle bg-transparent border-b whitespace-nowrap dark:border-white/40" >
< div class = "text-center" >
< p class = "mb-0 font-semibold leading-tight text-xs dark:opacity-60" >
Sales:
< / p >
< h6 class = "mb-0 leading-normal text-sm dark:text-white" >
3.900
< / h6 >
< / div >
< / td >
< td class = "p-2 align-middle bg-transparent border-b whitespace-nowrap dark:border-white/40" >
< div class = "text-center" >
< p class = "mb-0 font-semibold leading-tight text-xs dark:opacity-60" >
Value:
< / p >
< h6 class = "mb-0 leading-normal text-sm dark:text-white" >
$440,000
< / h6 >
< / div >
< / td >
< td class = "p-2 leading-normal align-middle bg-transparent border-b text-sm whitespace-nowrap dark:border-white/40" >
< div class = "flex-1 text-center" >
< p class = "mb-0 font-semibold leading-tight text-xs dark:opacity-60" >
Bounce:
< / p >
< h6 class = "mb-0 leading-normal text-sm dark:text-white" >
40.22%
< / h6 >
< / div >
< / td >
< / tr >
< tr >
< td class = "p-2 align-middle bg-transparent border-b w-3/10 whitespace-nowrap dark:border-white/40" >
< div class = "flex items-center px-2 py-1" >
< div >
< img alt = "Country flag" src = "/static/img/icons/flags/GB.png" / >
< / div >
< div class = "ml-6" >
< p class = "mb-0 font-semibold leading-tight text-xs dark:opacity-60" >
Country:
< / p >
< h6 class = "mb-0 leading-normal text-sm dark:text-white" >
Great Britain
< / h6 >
< / div >
< / div >
< / td >
< td class = "p-2 align-middle bg-transparent border-b whitespace-nowrap dark:border-white/40" >
< div class = "text-center" >
< p class = "mb-0 font-semibold leading-tight text-xs dark:opacity-60" >
Sales:
< / p >
< h6 class = "mb-0 leading-normal text-sm dark:text-white" >
1.400
< / h6 >
< / div >
< / td >
< td class = "p-2 align-middle bg-transparent border-b whitespace-nowrap dark:border-white/40" >
< div class = "text-center" >
< p class = "mb-0 font-semibold leading-tight text-xs dark:opacity-60" >
Value:
< / p >
< h6 class = "mb-0 leading-normal text-sm dark:text-white" >
$190,700
< / h6 >
< / div >
< / td >
< td class = "p-2 leading-normal align-middle bg-transparent border-b text-sm whitespace-nowrap dark:border-white/40" >
< div class = "flex-1 text-center" >
< p class = "mb-0 font-semibold leading-tight text-xs dark:opacity-60" >
Bounce:
< / p >
< h6 class = "mb-0 leading-normal text-sm dark:text-white" >
23.44%
< / h6 >
< / div >
< / td >
< / tr >
< tr >
< td class = "p-2 align-middle bg-transparent border-0 w-3/10 whitespace-nowrap" >
< div class = "flex items-center px-2 py-1" >
< div >
< img alt = "Country flag" src = "/static/img/icons/flags/BR.png" / >
< / div >
< div class = "ml-6" >
< p class = "mb-0 font-semibold leading-tight text-xs dark:opacity-60" >
Country:
< / p >
< h6 class = "mb-0 leading-normal text-sm dark:text-white" >
Brasil
< / h6 >
< / div >
< / div >
< / td >
< td class = "p-2 align-middle bg-transparent border-0 whitespace-nowrap" >
< div class = "text-center" >
< p class = "mb-0 font-semibold leading-tight text-xs dark:opacity-60" >
Sales:
< / p >
< h6 class = "mb-0 leading-normal text-sm dark:text-white" >
562
< / h6 >
< / div >
< / td >
< td class = "p-2 align-middle bg-transparent border-0 whitespace-nowrap" >
< div class = "text-center" >
< p class = "mb-0 font-semibold leading-tight text-xs dark:opacity-60" >
Value:
< / p >
< h6 class = "mb-0 leading-normal text-sm dark:text-white" >
$143,960
< / h6 >
< / div >
< / td >
< td class = "p-2 leading-normal align-middle bg-transparent border-0 text-sm whitespace-nowrap" >
< div class = "flex-1 text-center" >
< p class = "mb-0 font-semibold leading-tight text-xs dark:opacity-60" >
Bounce:
< / p >
< h6 class = "mb-0 leading-normal text-sm dark:text-white" >
32.14%
< / h6 >
< / div >
< / td >
< / tr >
< / tbody >
< / table >
< / div >
< / div >
< / div >
< / div >
<!-- </div> -->
< / div >
< / div >
< div class = "flex flex-wrap -mx-3" >
< div class = "w-full max-w-full px-3 flex-0" >
< div class = "absolute right-0 hidden mt-4 -mr-32 top-1/10 animate-fade-up md:block lg:mr-48" id = "globe" >
< canvas height = "1000" width = "1000" >
< / canvas >
< / 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 >
< 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/chartjs.min.js" >
< / script >
< script src = "/static/js/plugins/threejs.js" >
< / script >
< script src = "/static/js/plugins/orbit-controls.js" >
< / script >
< script src = "/static/js/plugins/perfect-scrollbar.min.js" >
< / script >
<!-- main script file -->
< script src = "/static/js/soft-ui-dashboard-pro-tailwind.js" >
< / script >
< / html >
