1903 lines
130 KiB
HTML
1903 lines
130 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">
|
|
<div>
|
|
<!-- Navbar -->
|
|
<nav class="relative flex flex-wrap items-center justify-between px-0 py-2 mx-6 mt-6 transition-all shadow-none duration-250 ease-soft-in rounded-2xl lg:flex-nowrap lg:justify-start" navbar-main="" navbar-scroll="true">
|
|
<div class="flex items-center justify-between w-full px-4 py-1 mx-auto flex-wrap-inherit">
|
|
<nav>
|
|
<!-- breadcrumb -->
|
|
<ol class="flex flex-wrap pt-1 mr-12 bg-transparent rounded-lg sm:mr-16">
|
|
<li class="leading-normal text-sm breadcrumb-item">
|
|
<a class="text-slate-700 opacity-30 dark:text-white" href="javascript:;">
|
|
{% 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">
|
|
Dashboards
|
|
</li>
|
|
</ol>
|
|
<h6 class="mb-0 font-bold capitalize dark:text-white">
|
|
VR Default
|
|
</h6>
|
|
</nav>
|
|
<div class="flex items-center">
|
|
<a aria-expanded="false" class="hidden p-0 transition-all ease-nav-brand text-sm text-slate-500 xl:block" href="javascript:;" mini-sidenav-burger="">
|
|
<div class="w-4.5 overflow-hidden">
|
|
<i class="ease-soft mb-0.75 relative block h-0.5 translate-x-[5px] rounded-sm bg-slate-500 transition-all dark:bg-white">
|
|
</i>
|
|
<i class="ease-soft mb-0.75 relative block h-0.5 rounded-sm bg-slate-500 transition-all dark:bg-white">
|
|
</i>
|
|
<i class="ease-soft relative block h-0.5 translate-x-[5px] rounded-sm bg-slate-500 transition-all dark:bg-white">
|
|
</i>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="flex items-center mt-2 grow sm:mt-0 sm:mr-6 md:mr-0 lg:flex lg:basis-auto" id="navbar">
|
|
<div class="flex items-center md:ml-auto md:pr-4">
|
|
<div class="relative flex flex-wrap items-stretch w-full transition-all rounded-lg ease-soft">
|
|
<span class="text-sm ease-soft leading-5.6 absolute z-50 -ml-px flex h-full items-center whitespace-nowrap rounded-lg rounded-tr-none rounded-br-none border border-r-0 border-transparent bg-transparent py-2 px-2.5 text-center font-normal text-slate-500 transition-all">
|
|
<i aria-hidden="true" class="fas fa-search">
|
|
</i>
|
|
</span>
|
|
<input class="pl-9 text-sm focus:shadow-soft-primary-outline dark:bg-gray-950 dark:placeholder:text-white/80 dark:text-white/80 ease-soft w-1/100 leading-5.6 relative -ml-px block min-w-0 flex-auto rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding py-2 pr-3 text-gray-700 transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none focus:transition-shadow" placeholder="Type here..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<ul class="flex flex-row justify-end pl-0 mb-0 list-none md-max:w-full">
|
|
<!-- online builder btn -->
|
|
<!-- <li class="flex items-center">
|
|
<a class="inline-block px-8 py-2 mb-0 mr-4 font-bold text-center uppercase align-middle transition-all bg-transparent border border-solid rounded-lg shadow-none cursor-pointer leading-pro border-fuchsia-500 ease-soft-in text-xs hover:scale-102 active:shadow-soft-xs text-fuchsia-500 hover:border-fuchsia-500 active:bg-fuchsia-500 active:hover:text-fuchsia-500 hover:text-fuchsia-500 tracking-tight-soft hover:bg-transparent hover:opacity-75 hover:shadow-none active:text-white active:hover:bg-transparent" target="_blank" href="https://www.creative-tim.com/builder/soft-ui?ref=navbar-dashboard&_ga=2.76518741.1192788655.1647724933-1242940210.1644448053">Online Builder</a>
|
|
</li> -->
|
|
<li class="flex items-center">
|
|
<a class="block px-0 py-2 font-semibold transition-all ease-nav-brand text-sm text-slate-500 dark:text-white" href="../../../pages/authentication/signin/illustration.html">
|
|
<i aria-hidden="true" class="fa fa-user sm:mr-1">
|
|
</i>
|
|
<span class="hidden sm:inline">
|
|
Sign In
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="flex items-center pl-4 xl:hidden">
|
|
<a aria-expanded="false" class="block p-0 transition-all ease-nav-brand text-sm text-slate-500 dark:text-white" href="javascript:;" sidenav-trigger="">
|
|
<div class="w-4.5 overflow-hidden">
|
|
<i class="ease-soft mb-0.75 relative block h-0.5 rounded-sm bg-slate-500 transition-all dark:bg-white">
|
|
</i>
|
|
<i class="ease-soft mb-0.75 relative block h-0.5 rounded-sm bg-slate-500 transition-all dark:bg-white">
|
|
</i>
|
|
<i class="ease-soft relative block h-0.5 rounded-sm bg-slate-500 transition-all dark:bg-white">
|
|
</i>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="flex items-center px-4">
|
|
<a class="p-0 transition-all text-sm ease-nav-brand text-slate-500 dark:text-white" href="javascript:;">
|
|
<i aria-hidden="true" class="cursor-pointer fa fa-cog" fixed-plugin-button-nav="">
|
|
</i>
|
|
<!-- fixed-plugin-button-nav -->
|
|
</a>
|
|
</li>
|
|
<!-- notifications -->
|
|
<li class="relative flex items-center pr-2">
|
|
<p class="hidden transform-dropdown-show">
|
|
</p>
|
|
<a aria-expanded="false" class="block p-0 transition-all text-sm ease-nav-brand text-slate-500 dark:text-white" dropdown-trigger="" href="javascript:;">
|
|
<i aria-hidden="true" class="cursor-pointer fa fa-bell">
|
|
</i>
|
|
</a>
|
|
<ul class="text-sm transform-dropdown before:font-awesome before:leading-default before:duration-350 before:ease-soft lg:shadow-soft-3xl duration-250 min-w-44 before:sm:right-7 before:text-5.5 dark:bg-gray-950 pointer-events-none absolute right-0 top-0 z-50 origin-top list-none rounded-lg border-0 border-solid border-transparent bg-white bg-clip-padding px-2 py-4 text-left text-slate-500 opacity-0 transition-all before:absolute before:right-2 before:left-auto before:top-0 before:z-50 before:inline-block before:font-normal before:text-white before:antialiased before:transition-all before:content-['\f0d8'] sm:-mr-6 lg:absolute lg:right-0 lg:left-auto lg:mt-2 lg:block lg:cursor-pointer" dropdown-menu="">
|
|
<!-- add show class on dropdown open js -->
|
|
<li class="relative mb-2">
|
|
<a class="group ease-soft py-1.2 clear-both block w-full whitespace-nowrap rounded-lg bg-transparent px-4 duration-300 hover:bg-gray-200 hover:text-slate-700 dark:hover:bg-gray-200/80 lg:transition-colors" href="javascript:;">
|
|
<div class="flex py-1">
|
|
<div class="my-auto">
|
|
<img class="inline-flex items-center justify-center mr-4 text-white text-sm h-9 w-9 max-w-none rounded-xl" src="/static/img/team-2.jpg"/>
|
|
</div>
|
|
<div class="flex flex-col justify-center">
|
|
<h6 class="mb-1 font-normal leading-normal text-sm group-hover:text-slate-700 dark:text-white">
|
|
<span class="font-semibold">
|
|
New message
|
|
</span>
|
|
from Laur
|
|
</h6>
|
|
<p class="mb-0 leading-tight text-xs text-slate-400 group-hover:text-slate-700 dark:text-white dark:opacity-80">
|
|
<i aria-hidden="true" class="mr-1 fa fa-clock">
|
|
</i>
|
|
13 minutes ago
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="relative mb-2">
|
|
<a class="group ease-soft py-1.2 clear-both block w-full whitespace-nowrap rounded-lg px-4 transition-colors duration-300 hover:bg-gray-200 hover:text-slate-700 dark:hover:bg-gray-200/80" href="javascript:;">
|
|
<div class="flex py-1">
|
|
<div class="my-auto">
|
|
<img class="inline-flex items-center justify-center mr-4 text-white text-sm bg-gradient-to-tl from-gray-900 to-slate-800 dark:bg-gradient-to-tl dark:from-slate-850 dark:to-gray-850 h-9 w-9 max-w-none rounded-xl" src="/static/img/small-logos/logo-spotify.svg"/>
|
|
</div>
|
|
<div class="flex flex-col justify-center">
|
|
<h6 class="mb-1 font-normal leading-normal text-sm group-hover:text-slate-700 dark:text-white">
|
|
<span class="font-semibold">
|
|
New album
|
|
</span>
|
|
by Travis Scott
|
|
</h6>
|
|
<p class="mb-0 leading-tight text-xs text-slate-400 group-hover:text-slate-700 dark:text-white dark:opacity-80">
|
|
<i aria-hidden="true" class="mr-1 fa fa-clock">
|
|
</i>
|
|
1 day
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="relative">
|
|
<a class="group ease-soft py-1.2 clear-both block w-full whitespace-nowrap rounded-lg px-4 transition-colors duration-300 hover:bg-gray-200 hover:text-slate-700 dark:hover:bg-gray-200/80" href="javascript:;">
|
|
<div class="flex py-1">
|
|
<div class="inline-flex items-center justify-center my-auto mr-4 text-white transition-all duration-200 ease-nav-brand text-sm bg-gradient-to-tl from-slate-600 to-slate-300 h-9 w-9 rounded-xl">
|
|
{% 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>
|
|
</div>
|
|
<div class="relative mx-4 mt-4 rounded-2xl bg-[url('../img/vr-bg.jpg')] bg-cover">
|
|
<!-- sidenav -->
|
|
<aside class="dark:bg-gray-950 xl:animate-fade-up xl:scale-60 ease-soft-in-out z-990 max-w-64 xl:shadow-soft-xl fixed inset-y-0 left-0 xl:ml-4 block w-full -translate-x-full flex-wrap items-center justify-between overflow-y-auto rounded-2xl border-0 bg-white p-0 shadow-none transition-all duration-200 xl:left-[18%] xl:mt-6 xl:translate-x-0 xl:bg-white" id="sidenav-main" mini="false">
|
|
<!-- header -->
|
|
<div class="h-20">
|
|
<!-- x i -->
|
|
<i aria-hidden="true" class="absolute top-0 right-0 p-4 opacity-50 cursor-pointer fas fa-times text-slate-400 dark:text-white xl:hidden" sidenav-close-btn="">
|
|
</i>
|
|
<a class="block px-8 py-6 m-0 text-sm whitespace-nowrap text-slate-700 dark:text-white" href=" https://demos.creative-tim.com/soft-ui-dashboard-pro-tailwind/pages/dashboards/default.html " target="_blank">
|
|
<img alt="main_logo" class="inline-block h-full max-w-full transition-all duration-200 ease-soft-in-out max-h-8 dark:hidden" src="/static/img/logo-ct-dark.png"/>
|
|
<img alt="main_logo" class="hidden h-full max-w-full transition-all duration-200 ease-soft-in-out max-h-8 dark:inline-block" src="/static/img/logo-ct.png"/>
|
|
<span class="ml-1 font-semibold transition-all duration-200 ease-soft-in-out">
|
|
Soft UI Dashboard PRO
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<!-- //---------hr----------// -->
|
|
<hr class="h-px mt-0 bg-transparent bg-gradient-to-r from-transparent via-black/40 to-transparent dark:bg-gradient-to-r dark:from-transparent dark:via-white dark:to-transparent"/>
|
|
<div class="items-center block w-full h-auto grow basis-full" id="sidenav-collapse-main">
|
|
<!-- primary list -->
|
|
<ul class="flex flex-col pl-0 mb-0 list-none">
|
|
<!-- primary list item -->
|
|
<li class="mt-0.5 w-full">
|
|
<!-- primary anchor -->
|
|
<a active_primary="" aria-expanded="true" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out text-sm py-2.7 active xl:shadow-soft-xl my-0 mx-4 flex items-center whitespace-nowrap rounded-lg bg-white px-4 font-semibold text-slate-700 transition-all after:ml-auto after:inline-block after:rotate-180 after:font-bold after:text-slate-800 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80" collapse_trigger="primary" href="#">
|
|
<!-- big anchor expandable -->
|
|
<div class="stroke-none shadow-soft-sm bg-gradient-to-tl from-purple-700 to-pink-500 mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current p-2.5 text-center text-black">
|
|
<!-- icon -->
|
|
{% include 'static/svg/my.svg' %}
|
|
</div>
|
|
<!-- primary span -->
|
|
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease-soft text-slate-700">
|
|
Dashboards
|
|
</span>
|
|
</a>
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out" id="dashboardsExamples">
|
|
<!-- primary collapsable list -->
|
|
<ul class="flex flex-wrap pl-4 mb-0 ml-6 list-none transition-all duration-200 ease-soft-in-out">
|
|
<!-- medium list item -->
|
|
<li class="w-full">
|
|
<!-- medium a -->
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../../dashboards/default.html">
|
|
<!-- mini span -->
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
D
|
|
</span>
|
|
<!-- estended span -->
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Default
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../../dashboards/automotive.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
A
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Automotive
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../../dashboards/smart-home.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
S
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Smart Home
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<!-- medium a collapsable -->
|
|
<a active_secondary="" aria-expanded="true" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-5 relative my-0 mr-4 flex items-center whitespace-nowrap rounded-lg bg-transparent pr-4 font-semibold text-slate-800 shadow-none transition-colors before:absolute before:top-1/2 before:h-2 before:w-2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800 before:content-[''] after:ml-auto after:inline-block after:rotate-180 after:font-bold after:text-slate-800 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-100 dark:before:bg-white dark:before:opacity-80 dark:after:text-white" collapse_trigger="secondary" href="#">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
V
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Virtual Reality
|
|
<b class="caret">
|
|
</b>
|
|
</span>
|
|
</a>
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out" id="vrExamples">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
<li class="w-full">
|
|
<!-- small a -->
|
|
<a active_page="" class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-semibold text-slate-800 shadow-none transition-colors dark:text-white dark:opacity-100" href="../../dashboards/vr/vr-default.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs">
|
|
V
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
VR Default
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../dashboards/vr/vr-info.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs">
|
|
V
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
VR Info
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../../dashboards/crm.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
C
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
CRM
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="w-full mt-4">
|
|
<h6 class="pl-6 ml-2 font-bold leading-tight uppercase text-xs opacity-60 dark:text-white">
|
|
PAGES
|
|
</h6>
|
|
</li>
|
|
<li class="mt-0.5 w-full">
|
|
<a aria-controls="pagesExamples" aria-expanded="false" class="ease-soft-in-out text-sm py-2.7 active after:ease-soft-in-out after:font-awesome-5-free my-0 mx-4 flex items-center whitespace-nowrap px-4 font-medium text-slate-500 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger="primary" href="#" role="button">
|
|
<div class="stroke-none shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current p-2.5 text-center text-black">
|
|
{% include 'static/svg/my_2.svg' %}
|
|
</div>
|
|
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease-soft">
|
|
Pages
|
|
</span>
|
|
</a>
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="pagesExamples">
|
|
<ul class="flex flex-wrap pl-4 mb-0 ml-6 list-none transition-all duration-200 ease-soft-in-out">
|
|
<li class="w-full">
|
|
<a aria-expanded="false" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger="secondary" href="#">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
P
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Profile
|
|
<b class="caret">
|
|
</b>
|
|
</span>
|
|
</a>
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="profileExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/profile/overview.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
P
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Profile Overview
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/profile/teams.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
T
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Teams
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/profile/projects.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
A
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
All Projects
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="w-full">
|
|
<a aria-expanded="false" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger="secondary" href="#">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
U
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Users
|
|
<b class="caret">
|
|
</b>
|
|
</span>
|
|
</a>
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="usersExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/users/reports.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
R
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Reports
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/users/new-user.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
N
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
New User
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="w-full">
|
|
<a aria-expanded="false" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger="secondary" href="#">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
A
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Account
|
|
<b class="caret">
|
|
</b>
|
|
</span>
|
|
</a>
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="accountExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/account/settings.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs">
|
|
S
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Settings
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/account/billing.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs">
|
|
B
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Billing
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/account/invoice.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs">
|
|
I
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Invoice
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/account/security.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs">
|
|
S
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Security
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="w-full">
|
|
<a aria-expanded="false" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger="secondary" href="#">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
P
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Projects
|
|
<b class="caret">
|
|
</b>
|
|
</span>
|
|
</a>
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="projectsExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/projects/general.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
G
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
General
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/projects/timeline.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
T
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Timeline
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/projects/new-project.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
N
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
New Project
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../../pages/pricing-page.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
P
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Pricing Page
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../../pages/messages.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
M
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Messages
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../../pages/rtl-page.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
R
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
RTL
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../../pages/widgets.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
W
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Widgets
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../../pages/charts.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
C
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Charts
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../../pages/sweet-alerts.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
S
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Sweet Alerts
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../../pages/notifications.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
N
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Notifications
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<!-- Applications -->
|
|
<li class="mt-0.5 w-full">
|
|
<a aria-controls="applicationsExamples" aria-expanded="false" class="ease-soft-in-out text-sm py-2.7 active after:ease-soft-in-out after:font-awesome-5-free my-0 mx-4 flex items-center whitespace-nowrap px-4 font-medium text-slate-500 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger="primary" href="#" role="button">
|
|
<div class="stroke-none shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current p-2.5 text-center text-black">
|
|
{% include 'static/svg/my_3.svg' %}
|
|
</div>
|
|
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease-soft">
|
|
Applications
|
|
</span>
|
|
</a>
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="applicationsExamples">
|
|
<ul class="flex flex-wrap pl-4 mb-0 ml-6 list-none transition-all duration-200 ease-soft-in-out">
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../../applications/kanban.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
K
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Kanban
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../../applications/wizard.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
W
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Wizard
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../../applications/datatables.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
D
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
DataTables
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../../applications/calendar.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
C
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Calendar
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../../applications/analytics.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
A
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Analytics
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<!-- Ecommerce -->
|
|
<li class="mt-0.5 w-full">
|
|
<a aria-controls="ecommerceExamples" aria-expanded="false" class="ease-soft-in-out text-sm py-2.7 active after:ease-soft-in-out after:font-awesome-5-free my-0 mx-4 flex items-center whitespace-nowrap px-4 font-medium text-slate-500 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger="primary" href="#" role="button">
|
|
<div class="stroke-none shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current p-2.5 text-center text-black">
|
|
{% include 'static/svg/my_4.svg' %}
|
|
</div>
|
|
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease-soft">
|
|
Ecommerce
|
|
</span>
|
|
</a>
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="ecommerceExamples">
|
|
<ul class="flex flex-wrap pl-4 mb-0 ml-6 list-none transition-all duration-200 ease-soft-in-out">
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../../ecommerce/overview.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
O
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Overview
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a aria-expanded="false" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger="secondary" href="#">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
P
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Products
|
|
<b class="caret">
|
|
</b>
|
|
</span>
|
|
</a>
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="productsExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../ecommerce/products/new-product.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
N
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
New Product
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../ecommerce/products/edit-product.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
E
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Edit Product
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../ecommerce/products/product-page.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
P
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Product Page
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../ecommerce/products/products-list.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
P
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Products List
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="w-full">
|
|
<a aria-expanded="false" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger="secondary" href="#">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
O
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Orders
|
|
<b class="caret">
|
|
</b>
|
|
</span>
|
|
</a>
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="ordersExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../ecommerce/orders/list.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
O
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Order List
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../ecommerce/orders/details.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
O
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Order Details
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../../ecommerce/referral.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
R
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Referral
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="mt-0.5 w-full">
|
|
<a aria-controls="authExamples" aria-expanded="false" class="ease-soft-in-out text-sm py-2.7 active after:ease-soft-in-out after:font-awesome-5-free my-0 mx-4 flex items-center whitespace-nowrap px-4 font-medium text-slate-500 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger="primary" href="#" role="button">
|
|
<div class="stroke-none shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current p-2.5 text-center text-black">
|
|
{% include 'static/svg/my_5.svg' %}
|
|
</div>
|
|
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease-soft">
|
|
Authentication
|
|
</span>
|
|
</a>
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="authExamples">
|
|
<ul class="flex flex-wrap pl-4 mb-0 ml-6 list-none transition-all duration-200 ease-soft-in-out">
|
|
<li class="w-full">
|
|
<a aria-expanded="false" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger="secondary" href="#">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
S
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Sign In
|
|
<b class="caret">
|
|
</b>
|
|
</span>
|
|
</a>
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="signinExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../authentication/signin/basic.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
B
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Basic
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../authentication/signin/cover.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
C
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Cover
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../authentication/signin/illustration.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
I
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Illustration
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="w-full">
|
|
<a aria-expanded="false" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger="secondary" href="#">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
S
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Sign Up
|
|
<b class="caret">
|
|
</b>
|
|
</span>
|
|
</a>
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="signupExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../authentication/signup/basic.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
B
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Basic
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../authentication/signup/cover.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
C
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Cover
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../authentication/signup/illustration.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
I
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Illustration
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="w-full">
|
|
<a aria-expanded="false" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger="secondary" href="#">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
R
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Reset Password
|
|
<b class="caret">
|
|
</b>
|
|
</span>
|
|
</a>
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="resetExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../authentication/reset/basic.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
B
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Basic
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../authentication/reset/cover.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
C
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Cover
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../authentication/reset/illustration.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
I
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Illustration
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="w-full">
|
|
<a aria-expanded="false" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger="secondary" href="#">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
L
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Lock
|
|
<b class="caret">
|
|
</b>
|
|
</span>
|
|
</a>
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="lockExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../authentication/lock/basic.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
B
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Basic
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../authentication/lock/cover.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
C
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Cover
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../authentication/lock/illustration.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
I
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Illustration
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="w-full">
|
|
<a aria-expanded="false" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger="secondary" href="#">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
2
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
2-Step Verification
|
|
<b class="caret">
|
|
</b>
|
|
</span>
|
|
</a>
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="StepExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../authentication/verification/basic.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
B
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Basic
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../authentication/verification/cover.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
C
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Cover
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../authentication/verification/illustration.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
I
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Illustration
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="w-full">
|
|
<a aria-expanded="false" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger="secondary" href="#">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
E
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Error
|
|
<b class="caret">
|
|
</b>
|
|
</span>
|
|
</a>
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="errorExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../authentication/error/404.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
E
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Error 404
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../authentication/error/500.html">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
E
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Error 500
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="mt-0.5 w-full">
|
|
<hr class="h-px my-4 bg-transparent bg-gradient-to-r from-transparent via-black/40 to-transparent dark:bg-gradient-to-r dark:from-transparent dark:via-white dark:to-transparent"/>
|
|
<h6 class="pl-6 mb-2 ml-2 font-bold leading-tight uppercase text-xs opacity-60 dark:text-white">
|
|
DOCS
|
|
</h6>
|
|
</li>
|
|
<li class="mt-0.5 w-full">
|
|
<a aria-controls="basicExamples" aria-expanded="false" class="ease-soft-in-out text-sm py-2.7 active after:ease-soft-in-out after:font-awesome-5-free my-0 mx-4 flex items-center whitespace-nowrap px-4 font-medium text-slate-500 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger="primary" href="#" role="button">
|
|
<div class="stroke-none shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current p-2.5 text-center text-black">
|
|
{% include 'static/svg/my_6.svg' %}
|
|
</div>
|
|
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease-soft">
|
|
Basic
|
|
</span>
|
|
</a>
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="basicExamples">
|
|
<ul class="flex flex-wrap pl-4 mb-0 ml-6 list-none transition-all duration-200 ease-soft-in-out">
|
|
<li class="w-full">
|
|
<a aria-expanded="false" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger="secondary" href="#">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
G
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Getting Started
|
|
<b class="caret">
|
|
</b>
|
|
</span>
|
|
</a>
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="gettingStartedExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="https://www.creative-tim.com/learning-lab/tailwind/html/quick-start/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
Q
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Quick Start
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="https://www.creative-tim.com/learning-lab/tailwind/html/license/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
L
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
License
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="https://www.creative-tim.com/learning-lab/tailwind/html/what-is-tailwind-css/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
C
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Contents
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="w-full">
|
|
<a aria-expanded="false" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger="secondary" href="#">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
F
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Foundation
|
|
<b class="caret">
|
|
</b>
|
|
</span>
|
|
</a>
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="foundationExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="https://www.creative-tim.com/learning-lab/tailwind/html/colors/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
C
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Colors
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="https://www.creative-tim.com/learning-lab/tailwind/html/typography/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 leading-tight text-center transition-all duration-200 opacity-0 pointer-events-none text-xs ease-soft-in-out">
|
|
T
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Typography
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="mt-0.5 w-full">
|
|
<a aria-controls="componentsExamples" aria-expanded="false" class="ease-soft-in-out text-sm py-2.7 active after:ease-soft-in-out after:font-awesome-5-free my-0 mx-4 flex items-center whitespace-nowrap px-4 font-medium text-slate-500 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80 dark:after:text-white/50 dark:after:text-white" collapse_trigger="primary" href="#" role="button">
|
|
<div class="stroke-none shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current p-2.5 text-center text-black">
|
|
{% include 'static/svg/my_7.svg' %}
|
|
</div>
|
|
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease-soft">
|
|
Components
|
|
</span>
|
|
</a>
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="componentsExamples">
|
|
<ul class="flex flex-wrap pl-4 mb-0 ml-6 list-none transition-all duration-200 ease-soft-in-out">
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/alert/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
A
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Alerts
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/chip/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
B
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Badge
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/button/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
B
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Buttons
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/card/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
C
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Card
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/collapse/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
C
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Collapse
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/dropdown/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
D
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Dropdowns
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/input/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
F
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Forms
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/alert/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
M
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Modal
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/tabs/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
N
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Navs
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/navbar/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
N
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Navbar
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/progress/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
P
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Progress
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/table/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
T
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Tables
|
|
</span>
|
|
</a>
|
|
</li>
|
|
<li class="w-full">
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/tooltip/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out">
|
|
T
|
|
</span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft">
|
|
Tooltips
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="mt-0.5 w-full">
|
|
<a class="ease-soft-in-out text-sm py-2.7 active my-0 mx-4 flex items-center whitespace-nowrap px-4 font-medium text-slate-500 shadow-none transition-colors dark:text-white dark:opacity-80" href="https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro/blob/main/CHANGELOG.md" target="_blank">
|
|
<div class="stroke-none shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current p-2.5 text-center text-black">
|
|
{% include 'static/svg/my_8.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="mt-1 transition-all duration-200 ease-soft-in-out xl:ml-68 rounded-xl">
|
|
<!-- Content -->
|
|
<div class="relative scale-100 md:scale-60 min-h-85-screen">
|
|
<div class="container md:-ml-12">
|
|
<div class="flex flex-wrap -mx-3">
|
|
<div class="relative z-20 w-full max-w-full px-3 mb-6 lg:flex-0 shrink-0 lg:mb-0 lg:w-7/12">
|
|
<!-- <div class="relative z-20 w-full max-w-full px-3 lg:flex-0 shrink-0 lg:w-7/12"> -->
|
|
<div class="relative flex flex-col min-w-0 mb-6 break-words bg-transparent border-0 border-solid shadow-none dark:bg-gray-950 dark:shadow-soft-dark-xl border-black-125 rounded-2xl bg-clip-border">
|
|
<div class="flex-auto p-4">
|
|
<div class="flex flex-wrap -mx-3">
|
|
<div class="w-full max-w-full px-3 lg:flex-0 shrink-0 lg:w-6/12">
|
|
<div class="flex flex-col h-full">
|
|
<h2 class="font-bold dark:text-white">
|
|
General Statistics
|
|
</h2>
|
|
<div class="flex items-center">
|
|
<h6 class="mb-0 font-bold animate-fade-up">
|
|
All users
|
|
</h6>
|
|
<a class="mt-1 mb-0 ml-6 font-semibold leading-normal group text-sm animate-fade-up text-fuchsia-500" href="javascript:;">
|
|
Read More
|
|
<i class="fas fa-arrow-right text-sm ease-bounce group-hover:translate-x-1.25 ml-1 leading-normal transition-all duration-200">
|
|
</i>
|
|
</a>
|
|
</div>
|
|
<h1 class="mb-0 font-bold animate-fade-up dark:text-white">
|
|
1,600,000
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap -mx-3">
|
|
<div class="w-full max-w-full px-3 md:flex-0 shrink-0 md:w-6/12 lg:w-4/12">
|
|
<div class="relative flex flex-col min-w-0 mb-6 break-words bg-white animate-fade-up dark:bg-gray-950 shadow-soft-xl dark:shadow-soft-dark-xl rounded-2xl bg-clip-border">
|
|
<div class="flex-auto p-4">
|
|
<div class="flex flex-wrap -mx-3">
|
|
<div class="flex-none w-2/3 max-w-full px-3">
|
|
<div>
|
|
<p class="mb-0 font-sans font-semibold leading-normal text-sm dark:opacity-60">
|
|
Today's Money
|
|
</p>
|
|
<h5 class="mb-0 font-bold dark:text-white">
|
|
$53,000
|
|
<span class="leading-normal text-sm font-weight-bolder text-lime-500">
|
|
+55%
|
|
</span>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
<div class="w-4/12 max-w-full px-3 text-right flex-0">
|
|
<div class="inline-block w-12 h-12 text-center rounded-lg bg-gradient-to-tl from-purple-700 to-pink-500 shadow-soft-2xl">
|
|
<i aria-hidden="true" class="ni leading-none ni-money-coins text-lg relative top-3.5 text-white">
|
|
</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative flex flex-col min-w-0 break-words bg-white animate-fade-up dark:bg-gray-950 shadow-soft-xl dark:shadow-soft-dark-xl rounded-2xl bg-clip-border">
|
|
<div class="flex-auto p-4">
|
|
<div class="flex flex-wrap -mx-3">
|
|
<div class="flex-none w-2/3 max-w-full px-3">
|
|
<div>
|
|
<p class="mb-0 font-sans font-semibold leading-normal text-sm dark:opacity-60">
|
|
Today's Users
|
|
</p>
|
|
<h5 class="mb-0 font-bold dark:text-white">
|
|
2,300
|
|
<span class="leading-normal text-sm font-weight-bolder text-lime-500">
|
|
+3%
|
|
</span>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
<div class="w-4/12 max-w-full px-3 text-right flex-0">
|
|
<div class="inline-block w-12 h-12 text-center rounded-lg bg-gradient-to-tl from-purple-700 to-pink-500 shadow-soft-2xl">
|
|
<i aria-hidden="true" class="ni leading-none ni-world text-lg relative top-3.5 text-white">
|
|
</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full max-w-full px-3 mt-6 md:flex-0 shrink-0 md:mt-0 md:w-6/12 lg:w-4/12">
|
|
<div class="relative flex flex-col min-w-0 mb-6 break-words bg-white animate-fade-up dark:bg-gray-950 shadow-soft-xl dark:shadow-soft-dark-xl rounded-2xl bg-clip-border">
|
|
<div class="flex-auto p-4">
|
|
<div class="flex flex-wrap -mx-3">
|
|
<div class="flex-none w-2/3 max-w-full px-3">
|
|
<div>
|
|
<p class="mb-0 font-sans font-semibold leading-normal text-sm dark:opacity-60">
|
|
New Clients
|
|
</p>
|
|
<h5 class="mb-0 font-bold dark:text-white">
|
|
+3,462
|
|
<span class="leading-normal text-red-600 text-sm font-weight-bolder">
|
|
-2%
|
|
</span>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
<div class="w-4/12 max-w-full px-3 text-right flex-0">
|
|
<div class="inline-block w-12 h-12 text-center rounded-lg bg-gradient-to-tl from-purple-700 to-pink-500 shadow-soft-2xl">
|
|
<i aria-hidden="true" class="ni leading-none ni-paper-diploma text-lg relative top-3.5 text-white">
|
|
</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative flex flex-col min-w-0 break-words bg-white animate-fade-up dark:bg-gray-950 shadow-soft-xl dark:shadow-soft-dark-xl rounded-2xl bg-clip-border">
|
|
<div class="flex-auto p-4">
|
|
<div class="flex flex-wrap -mx-3">
|
|
<div class="flex-none w-2/3 max-w-full px-3">
|
|
<div>
|
|
<p class="mb-0 font-sans font-semibold leading-normal text-sm dark:opacity-60">
|
|
Sales
|
|
</p>
|
|
<h5 class="mb-0 font-bold dark:text-white">
|
|
$103,430
|
|
<span class="leading-normal text-sm font-weight-bolder text-lime-500">
|
|
+5%
|
|
</span>
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
<div class="w-4/12 max-w-full px-3 text-right flex-0">
|
|
<div class="inline-block w-12 h-12 text-center rounded-lg bg-gradient-to-tl from-purple-700 to-pink-500 shadow-soft-2xl">
|
|
<i aria-hidden="true" class="ni leading-none ni-cart text-lg relative top-3.5 text-white">
|
|
</i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap mt-6 -mx-3">
|
|
<div class="w-full max-w-full px-3 flex-0">
|
|
<div class="relative flex flex-col min-w-0 break-words bg-white border-0 border-solid animate-fade-up dark:bg-gray-950 border-black-125 shadow-soft-xl dark:shadow-soft-dark-xl rounded-2xl bg-clip-border">
|
|
<div class="p-4 pb-0 mb-0 rounded-t-4">
|
|
<div class="flex justify-between">
|
|
<h6 class="mb-2 dark:text-white">
|
|
Sales by Country
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="items-center w-full mb-4 align-top border-gray-200 dark:border-white/40">
|
|
<tbody>
|
|
<tr>
|
|
<td class="p-2 align-middle bg-transparent border-b w-3/10 whitespace-nowrap dark:border-white/40">
|
|
<div class="flex items-center px-2 py-1">
|
|
<div>
|
|
<img alt="Country flag" src="/static/img/icons/flags/US.png"/>
|
|
</div>
|
|
<div class="ml-6">
|
|
<p class="mb-0 font-semibold leading-tight text-xs dark:opacity-60">
|
|
Country:
|
|
</p>
|
|
<h6 class="mb-0 leading-normal text-sm dark:text-white">
|
|
United States
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap dark:border-white/40">
|
|
<div class="text-center">
|
|
<p class="mb-0 font-semibold leading-tight text-xs dark:opacity-60">
|
|
Sales:
|
|
</p>
|
|
<h6 class="mb-0 leading-normal text-sm dark:text-white">
|
|
2500
|
|
</h6>
|
|
</div>
|
|
</td>
|
|
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap dark:border-white/40">
|
|
<div class="text-center">
|
|
<p class="mb-0 font-semibold leading-tight text-xs dark:opacity-60">
|
|
Value:
|
|
</p>
|
|
<h6 class="mb-0 leading-normal text-sm dark:text-white">
|
|
$230,900
|
|
</h6>
|
|
</div>
|
|
</td>
|
|
<td class="p-2 leading-normal align-middle bg-transparent border-b text-sm whitespace-nowrap dark:border-white/40">
|
|
<div class="flex-1 text-center">
|
|
<p class="mb-0 font-semibold leading-tight text-xs dark:opacity-60">
|
|
Bounce:
|
|
</p>
|
|
<h6 class="mb-0 leading-normal text-sm dark:text-white">
|
|
29.9%
|
|
</h6>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="p-2 align-middle bg-transparent border-b w-3/10 whitespace-nowrap dark:border-white/40">
|
|
<div class="flex items-center px-2 py-1">
|
|
<div>
|
|
<img alt="Country flag" src="/static/img/icons/flags/DE.png"/>
|
|
</div>
|
|
<div class="ml-6">
|
|
<p class="mb-0 font-semibold leading-tight text-xs dark:opacity-60">
|
|
Country:
|
|
</p>
|
|
<h6 class="mb-0 leading-normal text-sm dark:text-white">
|
|
Germany
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap dark:border-white/40">
|
|
<div class="text-center">
|
|
<p class="mb-0 font-semibold leading-tight text-xs dark:opacity-60">
|
|
Sales:
|
|
</p>
|
|
<h6 class="mb-0 leading-normal text-sm dark:text-white">
|
|
3.900
|
|
</h6>
|
|
</div>
|
|
</td>
|
|
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap dark:border-white/40">
|
|
<div class="text-center">
|
|
<p class="mb-0 font-semibold leading-tight text-xs dark:opacity-60">
|
|
Value:
|
|
</p>
|
|
<h6 class="mb-0 leading-normal text-sm dark:text-white">
|
|
$440,000
|
|
</h6>
|
|
</div>
|
|
</td>
|
|
<td class="p-2 leading-normal align-middle bg-transparent border-b text-sm whitespace-nowrap dark:border-white/40">
|
|
<div class="flex-1 text-center">
|
|
<p class="mb-0 font-semibold leading-tight text-xs dark:opacity-60">
|
|
Bounce:
|
|
</p>
|
|
<h6 class="mb-0 leading-normal text-sm dark:text-white">
|
|
40.22%
|
|
</h6>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="p-2 align-middle bg-transparent border-b w-3/10 whitespace-nowrap dark:border-white/40">
|
|
<div class="flex items-center px-2 py-1">
|
|
<div>
|
|
<img alt="Country flag" src="/static/img/icons/flags/GB.png"/>
|
|
</div>
|
|
<div class="ml-6">
|
|
<p class="mb-0 font-semibold leading-tight text-xs dark:opacity-60">
|
|
Country:
|
|
</p>
|
|
<h6 class="mb-0 leading-normal text-sm dark:text-white">
|
|
Great Britain
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap dark:border-white/40">
|
|
<div class="text-center">
|
|
<p class="mb-0 font-semibold leading-tight text-xs dark:opacity-60">
|
|
Sales:
|
|
</p>
|
|
<h6 class="mb-0 leading-normal text-sm dark:text-white">
|
|
1.400
|
|
</h6>
|
|
</div>
|
|
</td>
|
|
<td class="p-2 align-middle bg-transparent border-b whitespace-nowrap dark:border-white/40">
|
|
<div class="text-center">
|
|
<p class="mb-0 font-semibold leading-tight text-xs dark:opacity-60">
|
|
Value:
|
|
</p>
|
|
<h6 class="mb-0 leading-normal text-sm dark:text-white">
|
|
$190,700
|
|
</h6>
|
|
</div>
|
|
</td>
|
|
<td class="p-2 leading-normal align-middle bg-transparent border-b text-sm whitespace-nowrap dark:border-white/40">
|
|
<div class="flex-1 text-center">
|
|
<p class="mb-0 font-semibold leading-tight text-xs dark:opacity-60">
|
|
Bounce:
|
|
</p>
|
|
<h6 class="mb-0 leading-normal text-sm dark:text-white">
|
|
23.44%
|
|
</h6>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="p-2 align-middle bg-transparent border-0 w-3/10 whitespace-nowrap">
|
|
<div class="flex items-center px-2 py-1">
|
|
<div>
|
|
<img alt="Country flag" src="/static/img/icons/flags/BR.png"/>
|
|
</div>
|
|
<div class="ml-6">
|
|
<p class="mb-0 font-semibold leading-tight text-xs dark:opacity-60">
|
|
Country:
|
|
</p>
|
|
<h6 class="mb-0 leading-normal text-sm dark:text-white">
|
|
Brasil
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="p-2 align-middle bg-transparent border-0 whitespace-nowrap">
|
|
<div class="text-center">
|
|
<p class="mb-0 font-semibold leading-tight text-xs dark:opacity-60">
|
|
Sales:
|
|
</p>
|
|
<h6 class="mb-0 leading-normal text-sm dark:text-white">
|
|
562
|
|
</h6>
|
|
</div>
|
|
</td>
|
|
<td class="p-2 align-middle bg-transparent border-0 whitespace-nowrap">
|
|
<div class="text-center">
|
|
<p class="mb-0 font-semibold leading-tight text-xs dark:opacity-60">
|
|
Value:
|
|
</p>
|
|
<h6 class="mb-0 leading-normal text-sm dark:text-white">
|
|
$143,960
|
|
</h6>
|
|
</div>
|
|
</td>
|
|
<td class="p-2 leading-normal align-middle bg-transparent border-0 text-sm whitespace-nowrap">
|
|
<div class="flex-1 text-center">
|
|
<p class="mb-0 font-semibold leading-tight text-xs dark:opacity-60">
|
|
Bounce:
|
|
</p>
|
|
<h6 class="mb-0 leading-normal text-sm dark:text-white">
|
|
32.14%
|
|
</h6>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- </div> -->
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap -mx-3">
|
|
<div class="w-full max-w-full px-3 flex-0">
|
|
<div class="absolute right-0 hidden mt-4 -mr-32 top-1/10 animate-fade-up md:block lg:mr-48" id="globe">
|
|
<canvas height="1000" width="1000">
|
|
</canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Footer -->
|
|
<footer class="pt-4">
|
|
<div class="w-full px-6 mx-auto">
|
|
<div class="flex flex-wrap items-center -mx-3 lg:justify-between">
|
|
<div class="w-full max-w-full px-3 mt-0 mb-6 shrink-0 lg:mb-0 lg:w-1/2 lg:flex-none">
|
|
<div class="leading-normal text-center copyright text-sm text-slate-500 lg:text-left">
|
|
©
|
|
<script>
|
|
document.write(new Date().getFullYear() + ",");
|
|
</script>
|
|
made with
|
|
<i class="fa fa-heart">
|
|
</i>
|
|
by
|
|
<a class="font-semibold text-slate-700 dark:text-white" href="https://www.creative-tim.com" target="_blank">
|
|
Creative Tim
|
|
</a>
|
|
for a better web.
|
|
</div>
|
|
</div>
|
|
<div class="w-full max-w-full px-3 mt-0 shrink-0 lg:w-1/2 lg:flex-none">
|
|
<ul class="flex flex-wrap justify-center pl-0 mb-0 list-none lg:justify-end">
|
|
<li class="nav-item">
|
|
<a class="block px-4 pt-0 pb-1 font-normal transition-colors ease-soft-in-out text-sm text-slate-500" href="https://www.creative-tim.com" target="_blank">
|
|
Creative Tim
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="block px-4 pt-0 pb-1 font-normal transition-colors ease-soft-in-out text-sm text-slate-500" href="https://www.creative-tim.com/presentation" target="_blank">
|
|
About Us
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="block px-4 pt-0 pb-1 font-normal transition-colors ease-soft-in-out text-sm text-slate-500" href="https://creative-tim.com/blog" target="_blank">
|
|
Blog
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="block px-4 pt-0 pb-1 pr-0 font-normal transition-colors ease-soft-in-out text-sm text-slate-500" href="https://www.creative-tim.com/license" target="_blank">
|
|
License
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
</div>
|
|
<div fixed-plugin="">
|
|
<a aria-expanded="false" class="fixed px-4 py-2 bg-white cursor-pointer bottom-7 right-7 text-xl z-990 shadow-soft-lg rounded-circle text-slate-700" fixed-plugin-button="">
|
|
<i class="py-2 pointer-events-none fa fa-cog">
|
|
</i>
|
|
</a>
|
|
<!-- -right-90 in loc de 0-->
|
|
<div class="dark:bg-gray-950/80 z-sticky shadow-soft-3xl w-90 ease-soft -right-90 fixed top-0 left-auto flex h-full min-w-0 flex-col break-words rounded-none border-0 bg-white/80 bg-clip-border px-2.5 backdrop-blur-2xl backdrop-saturate-200 duration-200" fixed-plugin-card="">
|
|
<div class="px-6 pt-4 pb-0 mb-0 border-b-0 rounded-t-2xl">
|
|
<div class="float-left">
|
|
<h5 class="mt-4 mb-0 dark:text-white">
|
|
Soft UI Configurator
|
|
</h5>
|
|
<p class="dark:text-white dark:opacity-60">
|
|
See our dashboard options.
|
|
</p>
|
|
</div>
|
|
<div class="float-right mt-6">
|
|
<button class="inline-block p-0 mb-4 font-bold text-center uppercase align-middle transition-all bg-transparent border-0 rounded-lg shadow-none cursor-pointer hover:scale-102 leading-pro text-xs ease-soft-in tracking-tight-soft bg-150 bg-x-25 active:opacity-85 text-slate-700 dark:text-white" fixed-plugin-close-button="">
|
|
<i class="fa fa-close">
|
|
</i>
|
|
</button>
|
|
</div>
|
|
<!-- End Toggle Button -->
|
|
</div>
|
|
<hr class="h-px mx-0 my-1 bg-transparent bg-gradient-to-r from-transparent via-black/40 to-transparent dark:bg-gradient-to-r dark:from-transparent dark:via-white dark:to-transparent"/>
|
|
<div class="flex-auto p-6 pt-0 sm:pt-4">
|
|
<!-- Sidebar Backgrounds -->
|
|
<div>
|
|
<h6 class="mb-0 dark:text-white">
|
|
Sidebar Colors
|
|
</h6>
|
|
</div>
|
|
<a class="switch-trigger background-color" href="javascript:void(0)">
|
|
<div class="my-2 text-left" sidenav-colors="">
|
|
<span active-color="" class="py-2.2 text-xs px-2.2 rounded-circle h-5.6 mr-1.25 w-5.6 ease-soft-in-out bg-gradient-to-tl from-purple-700 to-pink-500 relative inline-block cursor-pointer whitespace-nowrap border border-solid border-slate-700 text-center align-baseline font-bold uppercase leading-none text-white transition-all duration-200 hover:border-slate-700" data-color-from="purple-700" data-color-to="pink-500" onclick="sidebarColor(this)">
|
|
</span>
|
|
<span class="py-2.2 text-xs px-2.2 rounded-circle h-5.6 mr-1.25 w-5.6 ease-soft-in-out bg-gradient-to-tl from-gray-900 to-slate-800 dark:bg-gradient-to-tl dark:from-slate-850 dark:to-gray-850 relative inline-block cursor-pointer whitespace-nowrap border border-solid border-white text-center align-baseline font-bold uppercase leading-none text-white transition-all duration-200 hover:border-slate-700" data-color-from="gray-900" data-color-to="slate-800" onclick="sidebarColor(this)">
|
|
</span>
|
|
<span class="py-2.2 text-xs px-2.2 rounded-circle h-5.6 mr-1.25 w-5.6 ease-soft-in-out bg-gradient-to-tl from-blue-600 to-cyan-400 relative inline-block cursor-pointer whitespace-nowrap border border-solid border-white text-center align-baseline font-bold uppercase leading-none text-white transition-all duration-200 hover:border-slate-700" data-color-from="blue-600" data-color-to="cyan-400" onclick="sidebarColor(this)">
|
|
</span>
|
|
<span class="py-2.2 text-xs px-2.2 rounded-circle h-5.6 mr-1.25 w-5.6 ease-soft-in-out bg-gradient-to-tl from-green-600 to-lime-400 relative inline-block cursor-pointer whitespace-nowrap border border-solid border-white text-center align-baseline font-bold uppercase leading-none text-white transition-all duration-200 hover:border-slate-700" data-color-from="green-600" data-color-to="lime-400" onclick="sidebarColor(this)">
|
|
</span>
|
|
<span class="py-2.2 text-xs px-2.2 rounded-circle h-5.6 mr-1.25 w-5.6 ease-soft-in-out bg-gradient-to-tl from-red-500 to-yellow-400 relative inline-block cursor-pointer whitespace-nowrap border border-solid border-white text-center align-baseline font-bold uppercase leading-none text-white transition-all duration-200 hover:border-slate-700" data-color-from="red-500" data-color-to="yellow-400" onclick="sidebarColor(this)">
|
|
</span>
|
|
<span class="py-2.2 text-xs px-2.2 rounded-circle h-5.6 mr-1.25 w-5.6 ease-soft-in-out bg-gradient-to-tl from-red-600 to-rose-400 relative inline-block cursor-pointer whitespace-nowrap border border-solid border-white text-center align-baseline font-bold uppercase leading-none text-white transition-all duration-200 hover:border-slate-700" data-color-from="red-600" data-color-to="rose-400" onclick="sidebarColor(this)">
|
|
</span>
|
|
</div>
|
|
</a>
|
|
<!-- Sidenav Type -->
|
|
<div class="mt-4">
|
|
<h6 class="mb-0 dark:text-white">
|
|
Sidenav Type
|
|
</h6>
|
|
<p class="leading-normal text-sm dark:opacity-60">
|
|
Choose between 2 different sidenav types.
|
|
</p>
|
|
</div>
|
|
<div class="flex">
|
|
<button active-style="" class="inline-block w-full px-4 py-3 mb-2 font-bold text-center text-white uppercase align-middle transition-all border border-transparent border-solid rounded-lg cursor-pointer xl-max:cursor-not-allowed xl-max:opacity-65 xl-max:pointer-events-none xl-max:bg-gradient-to-tl xl-max:from-purple-700 xl-max:to-pink-500 xl-max:text-white xl-max:border-0 hover:scale-102 hover:shadow-soft-xs active:opacity-85 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 bg-gradient-to-tl from-purple-700 to-pink-500 bg-fuchsia-500 hover:border-fuchsia-500 dark:pointer-events-none dark:cursor-not-allowed" data-class="bg-transparent" transparent-style-btn="">
|
|
Transparent
|
|
</button>
|
|
<button class="inline-block w-full px-4 py-3 mb-2 ml-2 font-bold text-center uppercase align-middle transition-all bg-transparent border border-solid rounded-lg cursor-pointer xl-max:cursor-not-allowed xl-max:opacity-65 xl-max:pointer-events-none xl-max:bg-gradient-to-tl xl-max:from-purple-700 xl-max:to-pink-500 xl-max:text-white xl-max:border-0 hover:scale-102 hover:shadow-soft-xs active:opacity-85 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 border-fuchsia-500 bg-none text-fuchsia-500 hover:border-fuchsia-500 dark:pointer-events-none dark:cursor-not-allowed" data-class="bg-white" white-style-btn="">
|
|
White
|
|
</button>
|
|
</div>
|
|
<p class="block mt-2 leading-normal text-sm xl:hidden">
|
|
You can change the sidenav type just on desktop view.
|
|
</p>
|
|
<!-- Navbar Fixed -->
|
|
<div class="mt-4">
|
|
<h6 class="mb-0 dark:text-white">
|
|
Navbar Fixed
|
|
</h6>
|
|
</div>
|
|
<div class="min-h-6 mb-0.5 block pl-0">
|
|
<input class="rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.3 h-5 relative float-left mt-1 ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" navbar-fixed-toggle="" type="checkbox"/>
|
|
</div>
|
|
<hr class="h-px mt-4 mb-1 bg-transparent bg-gradient-to-r from-transparent via-black/40 to-transparent dark:bg-gradient-to-r dark:from-transparent dark:via-white dark:to-transparent"/>
|
|
<div class="mt-2">
|
|
<h6 class="mb-0 dark:text-white">
|
|
Sidenav Mini
|
|
</h6>
|
|
</div>
|
|
<div class="min-h-6 mb-0.5 block pl-0">
|
|
<input class="rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.3 h-5 relative float-left mt-1 ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" sidenav-mini-toggle="" type="checkbox"/>
|
|
</div>
|
|
<hr class="h-px mt-4 mb-1 bg-transparent bg-gradient-to-r from-transparent via-black/40 to-transparent dark:bg-gradient-to-r dark:from-transparent dark:via-white dark:to-transparent"/>
|
|
<div class="mt-2">
|
|
<h6 class="mb-0 dark:text-white">
|
|
Light/Dark
|
|
</h6>
|
|
</div>
|
|
<div class="min-h-6 mb-0.5 block pl-0">
|
|
<input class="rounded-10 duration-250 ease-soft-in-out after:rounded-circle after:shadow-soft-2xl after:duration-250 checked:after:translate-x-5.3 h-5 relative float-left mt-1 ml-auto w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-slate-800/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-slate-800/95 checked:bg-slate-800/95 checked:bg-none checked:bg-right" dark-toggle="" type="checkbox"/>
|
|
</div>
|
|
<hr class="h-px my-6 bg-transparent bg-gradient-to-r from-transparent via-black/40 to-transparent dark:bg-gradient-to-r dark:from-transparent dark:via-white dark:to-transparent"/>
|
|
<a class="inline-block w-full px-6 py-3 mb-4 font-bold text-center text-white uppercase align-middle transition-all bg-transparent border-0 rounded-lg cursor-pointer leading-pro text-xs ease-soft-in hover:shadow-soft-xs hover:scale-102 active:opacity-85 tracking-tight-soft shadow-soft-md bg-150 bg-x-25 bg-gradient-to-tl from-blue-600 to-cyan-400" href="https://www.creative-tim.com/product/soft-ui-dashboard-pro-tailwind" target="_blank">
|
|
Buy Now
|
|
</a>
|
|
<a class="inline-block w-full px-6 py-3 mb-4 font-bold text-center text-white uppercase align-middle transition-all bg-transparent border border-transparent border-solid rounded-lg cursor-pointer leading-pro text-xs ease-soft-in hover:shadow-soft-xs hover:scale-102 active:opacity-85 tracking-tight-soft shadow-soft-md bg-150 bg-x-25 bg-gradient-to-tl from-gray-900 to-slate-800 dark:bg-gradient-to-tl dark:from-slate-850 dark:to-gray-850 dark:border-white dark:text-white" href="https://www.creative-tim.com/product/soft-ui-dashboard-tailwind" target="_blank">
|
|
Free Demo
|
|
</a>
|
|
<a class="inline-block w-full px-6 py-3 mb-4 font-bold text-center uppercase align-middle transition-all bg-transparent border border-solid rounded-lg shadow-none cursor-pointer active:shadow-soft-xs hover:scale-102 active:opacity-85 leading-pro text-xs ease-soft-in tracking-tight-soft bg-150 bg-x-25 border-slate-700 text-slate-700 hover:bg-transparent hover:text-slate-700 hover:shadow-none active:bg-slate-700 active:text-white active:hover:bg-transparent active:hover:text-slate-700 active:hover:shadow-none dark:border-white dark:text-white" href="https://www.creative-tim.com/learning-lab/tailwind/html/quick-start/soft-ui-dashboard/" target="_blank">
|
|
View documentation
|
|
</a>
|
|
<div class="w-full text-center">
|
|
<a aria-label="Star creativetimofficial/soft-ui-dashboard on GitHub" class="github-button" data-icon="octicon-star" data-show-count="true" data-size="large" href="https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro">
|
|
Star
|
|
</a>
|
|
<h6 class="mt-4">
|
|
Thank you for sharing!
|
|
</h6>
|
|
<a class="inline-block px-6 py-3 mb-0 mr-2 font-bold text-center text-white uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:shadow-soft-xs hover:scale-102 active:opacity-85 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 me-2 border-slate-700 bg-slate-700" href="https://twitter.com/intent/tweet?text=Check%20Soft%20UI%20Dashboard%20Pro%20Tailwind%20made%20by%20%40CreativeTim%20%23webdesign%20%23dashboard%20%23tailwindCSS&url=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fsoft-ui-dashboard-pro-tailwind" target="_blank">
|
|
<i aria-hidden="true" class="mr-1 fab fa-twitter">
|
|
</i>
|
|
Tweet
|
|
</a>
|
|
<a class="inline-block px-6 py-3 mb-0 mr-2 font-bold text-center text-white uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:shadow-soft-xs hover:scale-102 active:opacity-85 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 me-2 border-slate-700 bg-slate-700" href="https://www.facebook.com/sharer/sharer.php?u=https://www.creative-tim.com/product/soft-ui-dashboard-pro-tailwind" target="_blank">
|
|
<i aria-hidden="true" class="mr-1 fab fa-facebook-square">
|
|
</i>
|
|
Share
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<!-- Core JS Files -->
|
|
<script src="/static/js/plugins/chartjs.min.js">
|
|
</script>
|
|
<script src="/static/js/plugins/threejs.js">
|
|
</script>
|
|
<script src="/static/js/plugins/orbit-controls.js">
|
|
</script>
|
|
<script src="/static/js/plugins/perfect-scrollbar.min.js">
|
|
</script>
|
|
<!-- main script file -->
|
|
<script src="/static/js/soft-ui-dashboard-pro-tailwind.js">
|
|
</script>
|
|
</html>
|