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