1831 lines
129 KiB
HTML
1831 lines
129 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="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" 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 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 'static/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 max-h-0" 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-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../../dashboards/smart-home.html">
|
||
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
||
S
|
||
</span>
|
||
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
||
Smart Home
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li class="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 'static/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 'static/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 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 'static/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" 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 active_page="" active_secondary="" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-5 relative my-0 mr-4 flex items-center whitespace-nowrap rounded-lg bg-transparent pr-4 font-semibold text-slate-800 shadow-none transition-colors before:absolute before:top-1/2 before:h-2 before:w-2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800 before:content-[''] after:ml-auto after:inline-block after:rotate-180 after:font-bold after:text-slate-800 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-100 dark:before:bg-white dark:before:opacity-80 dark:after:text-white 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" 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-semibold text-slate-800 shadow-none transition-colors dark:text-white dark:opacity-100" 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 'static/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 'static/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 'static/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 'static/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 'static/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">
|
||
Ecommerce
|
||
</li>
|
||
</ol>
|
||
<h6 class="mb-0 font-bold capitalize dark:text-white">
|
||
Order Details
|
||
</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 'static/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="w-full max-w-full px-3 mx-auto lg:flex-0 lg:w-8/12 shrink-0">
|
||
<div class="relative flex flex-col min-w-0 mb-6 break-words bg-white border-0 dark:bg-gray-950 dark:shadow-soft-dark-xl shadow-soft-xl rounded-2xl bg-clip-border">
|
||
<div class="border-black/12.5 rounded-t-2xl border-b-0 border-solid p-4 pb-0">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<h6 class="dark:text-white">
|
||
Order Details
|
||
</h6>
|
||
<p class="mb-0 leading-normal text-sm">
|
||
Order no.
|
||
<b>
|
||
241342
|
||
</b>
|
||
from
|
||
<b>
|
||
23.02.2021
|
||
</b>
|
||
</p>
|
||
<p class="leading-normal text-sm">
|
||
Code:
|
||
<b>
|
||
KF332
|
||
</b>
|
||
</p>
|
||
</div>
|
||
<a class="inline-block px-6 py-3 mb-0 ml-auto font-bold text-center text-white uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:scale-102 active:opacity-85 hover:shadow-soft-xs bg-gradient-to-tl from-slate-600 to-slate-300 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25" href="javascript:;">
|
||
Invoice
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="flex-auto p-4 pt-0">
|
||
<hr class="h-px mt-0 mb-6 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 flex-0 md:w-6/12">
|
||
<div class="flex">
|
||
<div>
|
||
<img alt="product image" class="mr-4 w-28 h-28 text-base ease-soft-in-out inline-flex items-center justify-center rounded-xl text-white transition-all duration-200" src="/static/img/872e013c62b698dca9ddbebeb22c0726"/>
|
||
</div>
|
||
<div>
|
||
<h6 class="mt-2 mb-0 dark:text-white text-lg">
|
||
Gold Glasses
|
||
</h6>
|
||
<p class="mb-4 leading-normal text-sm">
|
||
Order was delivered 2 days ago
|
||
</p>
|
||
<span class="py-1.8 px-3 text-xxs rounded-1 inline-block whitespace-nowrap bg-gradient-to-tl from-green-600 to-lime-400 text-center align-baseline font-bold uppercase leading-none text-white">
|
||
Delivered
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-full max-w-full px-3 my-auto text-right flex-0 md:w-6/12">
|
||
<a class="inline-block px-6 py-3 mb-4 font-bold text-center text-white uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:scale-102 active:opacity-85 hover:shadow-soft-xs bg-gradient-to-tl from-blue-600 to-cyan-400 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25" href="javascript:;">
|
||
Contact Us
|
||
</a>
|
||
<p class="mt-2 mb-0 leading-normal text-sm">
|
||
Do you like the product? Leave us a review
|
||
<a class="dark:text-lime-500" href="javascript:;">
|
||
here
|
||
</a>
|
||
.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<hr class="h-px mt-0 mb-6 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 lg:w-3/12 flex-0 md:w-6/12">
|
||
<h6 class="mb-4 dark:text-white">
|
||
Track order
|
||
</h6>
|
||
<div class="relative before:left-4 before:-ml-px before:content-[''] before:absolute before:top-0 before:h-full before:border-r-2 before:border-solid before:border-r-slate-100">
|
||
<div class="relative mb-4">
|
||
<span class="left-4 absolute inline-flex items-center justify-center w-6.5 h-6.5 rounded-circle bg-white text-center -translate-x-1/2 text-base font-semibold z-1">
|
||
<i class="ni leading-none ni-bell-55 text-slate-400 leading-pro">
|
||
</i>
|
||
</span>
|
||
<div class="ml-12 pt-1.4 relative -top-1.5 w-auto lg:max-w-120">
|
||
<h6 class="mb-0 font-semibold leading-normal dark:text-white text-sm text-slate-700">
|
||
Order received
|
||
</h6>
|
||
<p class="mt-1 mb-0 font-semibold leading-tight text-xs text-slate-400">
|
||
22 DEC 7:20 AM
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="relative mb-4">
|
||
<span class="left-4 absolute inline-flex items-center justify-center w-6.5 h-6.5 rounded-circle bg-white text-center -translate-x-1/2 text-base font-semibold z-1">
|
||
<i class="ni leading-none ni-html5 text-slate-400 leading-pro">
|
||
</i>
|
||
</span>
|
||
<div class="ml-12 pt-1.4 relative -top-1.5 w-auto lg:max-w-120 float-none">
|
||
<h6 class="mb-0 font-semibold leading-normal dark:text-white text-sm text-slate-700">
|
||
Generate order id #1832412
|
||
</h6>
|
||
<p class="mt-1 mb-0 font-semibold leading-tight text-xs text-slate-400">
|
||
22 DEC 7:21 AM
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="relative mb-4">
|
||
<span class="left-4 absolute inline-flex items-center justify-center w-6.5 h-6.5 rounded-circle bg-white text-center -translate-x-1/2 text-base font-semibold z-1">
|
||
<i class="ni leading-none ni-cart text-slate-400 leading-pro">
|
||
</i>
|
||
</span>
|
||
<div class="ml-12 pt-1.4 relative -top-1.5 w-auto lg:max-w-120">
|
||
<h6 class="mb-0 font-semibold leading-normal dark:text-white text-sm text-slate-700">
|
||
Order transmited to courier
|
||
</h6>
|
||
<p class="mt-1 mb-0 font-semibold leading-tight text-xs text-slate-400">
|
||
22 DEC 8:10 AM
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="relative mb-4">
|
||
<span class="left-4 absolute inline-flex items-center justify-center w-6.5 h-6.5 rounded-circle bg-white text-center -translate-x-1/2 text-base font-semibold z-1">
|
||
<i class="ni leading-none ni-check-bold text-lime-500 leading-pro">
|
||
</i>
|
||
</span>
|
||
<div class="ml-12 pt-1.4 relative -top-1.5 w-auto lg:max-w-120 float-none">
|
||
<h6 class="mb-0 font-semibold leading-normal dark:text-white text-sm text-slate-700">
|
||
Order delivered
|
||
</h6>
|
||
<p class="mt-1 mb-0 font-semibold leading-tight text-xs text-slate-400">
|
||
22 DEC 4:54PM
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-full max-w-full px-3 flex-0 md:w-6/12 lg:w-5/12">
|
||
<h6 class="mb-4 dark:text-white">
|
||
Payment details
|
||
</h6>
|
||
<div class="relative flex flex-row items-center flex-auto min-w-0 p-6 break-words bg-transparent border border-solid shadow-none rounded-xl border-slate-100 bg-clip-border dark:border-slate-700">
|
||
<img alt="logo" class="mb-0 mr-4 w-1/10" src="/static/img/logos/mastercard.png">
|
||
<h6 class="mb-0 dark:text-white">
|
||
**** **** **** 7852
|
||
</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" type="button">
|
||
<i aria-hidden="true" class="fas fa-info text-3xs">
|
||
</i>
|
||
</button>
|
||
</img>
|
||
</div>
|
||
<h6 class="mt-6 mb-4 dark:text-white">
|
||
Billing Information
|
||
</h6>
|
||
<ul class="flex flex-col pl-0 mb-0 rounded-lg">
|
||
<li class="relative flex p-6 mb-2 rounded-xl bg-gray-50 dark:bg-slate-800 text-inherit">
|
||
<div class="flex flex-col">
|
||
<h6 class="mb-4 leading-normal dark:text-white text-sm">
|
||
Oliver Liam
|
||
</h6>
|
||
<span class="mb-2 leading-tight text-xs">
|
||
Company Name:
|
||
<span class="ml-2 font-semibold text-slate-700 dark:text-white/70">
|
||
Viking Burrito
|
||
</span>
|
||
</span>
|
||
<span class="mb-2 leading-tight text-xs">
|
||
Email Address:
|
||
<span class="ml-2 font-semibold text-slate-700 dark:text-white/70">
|
||
oliver@burrito.com
|
||
</span>
|
||
</span>
|
||
<span class="leading-tight text-xs">
|
||
VAT Number:
|
||
<span class="ml-2 font-semibold text-slate-700 dark:text-white/70">
|
||
FRB1235476
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="w-full max-w-full px-3 ml-auto lg:w-3/12 flex-0">
|
||
<h6 class="mb-4 dark:text-white">
|
||
Order Summary
|
||
</h6>
|
||
<div class="flex justify-between">
|
||
<span class="mb-2 leading-normal text-sm">
|
||
Product Price:
|
||
</span>
|
||
<span class="ml-2 font-semibold text-slate-700 dark:text-white">
|
||
$90
|
||
</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span class="mb-2 leading-normal text-sm">
|
||
Delivery:
|
||
</span>
|
||
<span class="ml-2 font-semibold text-slate-700 dark:text-white">
|
||
$14
|
||
</span>
|
||
</div>
|
||
<div class="flex justify-between">
|
||
<span class="mb-2 leading-normal text-sm">
|
||
Taxes:
|
||
</span>
|
||
<span class="ml-2 font-semibold text-slate-700 dark:text-white">
|
||
$1.95
|
||
</span>
|
||
</div>
|
||
<div class="flex justify-between mt-6">
|
||
<span class="mb-2 text-lg">
|
||
Total:
|
||
</span>
|
||
<span class="ml-2 font-semibold text-lg text-slate-700 dark:text-white">
|
||
$105.95
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
<!-- main script file -->
|
||
<script src="/static/js/soft-ui-dashboard-pro-tailwind.js">
|
||
</script>
|
||
</html>
|