2145 lines
162 KiB
HTML
2145 lines
162 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 name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
|
<link rel="apple-touch-icon" sizes="76x76" href="../../assets/img/apple-icon.png" />
|
|
<link rel="icon" type="image/png" href="../../assets/img/favicon.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="../../assets/css/nucleo-icons.css" rel="stylesheet" />
|
|
<link href="../../assets/css/nucleo-svg.css" rel="stylesheet" />
|
|
<!-- Font Awesome Icons -->
|
|
<script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
|
|
<!-- Main Styling -->
|
|
<link href="../../assets/css/soft-ui-dashboard-tailwind.css?v=1.1.0" 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 defer data-site="YOUR_DOMAIN_HERE" src="https://api.nepcha.com/js/nepcha-analytics.js"></script>
|
|
</head>
|
|
<body class="m-0 font-sans antialiased font-normal text-left leading-default text-base dark:bg-slate-950 bg-gray-50 text-slate-500 dark:text-white">
|
|
<!-- sidenav -->
|
|
<aside mini="false" class="fixed inset-y-0 left-0 flex-wrap items-center justify-between block w-full p-0 my-4 overflow-y-auto transition-all duration-200 -translate-x-full bg-white border-0 shadow-none xl:ml-4 dark:bg-gray-950 ease-soft-in-out z-990 max-w-64 rounded-2xl xl:translate-x-0 xl:bg-transparent" id="sidenav-main">
|
|
<div class="h-20">
|
|
<i class="absolute top-0 right-0 p-4 opacity-50 cursor-pointer fas fa-times text-slate-400 dark:text-white xl:hidden" aria-hidden="true" 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 src="../../assets/img/logo-ct-dark.png" class="inline-block h-full max-w-full transition-all duration-200 ease-soft-in-out max-h-8 dark:hidden" alt="main_logo" />
|
|
<img src="../../assets/img/logo-ct.png" class="hidden h-full max-w-full transition-all duration-200 ease-soft-in-out max-h-8 dark:inline-block" alt="main_logo" />
|
|
<span class="ml-1 font-semibold transition-all duration-200 ease-soft-in-out">Soft UI Dashboard PRO</span>
|
|
</a>
|
|
</div>
|
|
<hr class="h-px mt-0 bg-transparent bg-gradient-to-r from-transparent via-black/40 to-transparent dark:bg-gradient-to-r dark:from-transparent dark:via-white dark:to-transparent">
|
|
|
|
<div class="items-center block w-full h-auto grow basis-full" id="sidenav-collapse-main">
|
|
<ul class="flex flex-col pl-0 mb-0 list-none">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a collapse_trigger="primary" href="javascript:;" 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" aria-expanded="false">
|
|
|
|
<div class="stroke-none shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current p-2.5 text-center text-slate-800">
|
|
<svg width="12px" height="12px" viewBox="0 0 45 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>shop </title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-1716.000000, -439.000000)" fill="currentColor" fill-rule="nonzero"> <g transform="translate(1716.000000, 291.000000)"> <g transform="translate(0.000000, 148.000000)"> <path class="color-background" d="M46.7199583,10.7414583 L40.8449583,0.949791667 C40.4909749,0.360605034 39.8540131,0 39.1666667,0 L7.83333333,0 C7.1459869,0 6.50902508,0.360605034 6.15504167,0.949791667 L0.280041667,10.7414583 C0.0969176761,11.0460037 -1.23209662e-05,11.3946378 -1.23209662e-05,11.75 C-0.00758042603,16.0663731 3.48367543,19.5725301 7.80004167,19.5833333 L7.81570833,19.5833333 C9.75003686,19.5882688 11.6168794,18.8726691 13.0522917,17.5760417 C16.0171492,20.2556967 20.5292675,20.2556967 23.494125,17.5760417 C26.4604562,20.2616016 30.9794188,20.2616016 33.94575,17.5760417 C36.2421905,19.6477597 39.5441143,20.1708521 42.3684437,18.9103691 C45.1927731,17.649886 47.0084685,14.8428276 47.0000295,11.75 C47.0000295,11.3946378 46.9030823,11.0460037 46.7199583,10.7414583 Z" opacity="0.598981585"></path> <path class="color-background" d="M39.198,22.4912623 C37.3776246,22.4928106 35.5817531,22.0149171 33.951625,21.0951667 L33.92225,21.1107282 C31.1430221,22.6838032 27.9255001,22.9318916 24.9844167,21.7998837 C24.4750389,21.605469 23.9777983,21.3722567 23.4960833,21.1018359 L23.4745417,21.1129513 C20.6961809,22.6871153 17.4786145,22.9344611 14.5386667,21.7998837 C14.029926,21.6054643 13.533337,21.3722507 13.0522917,21.1018359 C11.4250962,22.0190609 9.63246555,22.4947009 7.81570833,22.4912623 C7.16510551,22.4842162 6.51607673,22.4173045 5.875,22.2911849 L5.875,44.7220845 C5.875,45.9498589 6.7517757,46.9451667 7.83333333,46.9451667 L19.5833333,46.9451667 L19.5833333,33.6066734 L27.4166667,33.6066734 L27.4166667,46.9451667 L39.1666667,46.9451667 C40.2482243,46.9451667 41.125,45.9498589 41.125,44.7220845 L41.125,22.2822926 C40.4887822,22.4116582 39.8442868,22.4815492 39.198,22.4912623 Z"></path> </g> </g> </g> </g> </svg>
|
|
</div>
|
|
|
|
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease-soft text-slate-700">Dashboards</span>
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="dashboardsExamples">
|
|
<ul class="flex flex-wrap pl-4 mb-0 ml-6 list-none transition-all duration-200 ease-soft-in-out">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../dashboards/default.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> D </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Default </span>
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../dashboards/automotive.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> A </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Automotive </span>
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../dashboards/smart-home.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> S </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Smart Home </span>
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
<a collapse_trigger="secondary" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> V </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Virtual Reality <b class="caret"></b></span>
|
|
</a>
|
|
|
|
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="vrExamples">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../dashboards/vr/vr-default.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> V </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> VR Default </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../dashboards/vr/vr-info.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> V </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> VR Info </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../dashboards/crm.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> C </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> CRM </span>
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-4 w-full">
|
|
<h6 class="pl-6 ml-2 font-bold leading-tight uppercase text-xs opacity-60 dark:text-white">PAGES</h6>
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a collapse_trigger="primary" href="javascript:;" 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" aria-expanded="false">
|
|
|
|
<div class="stroke-none shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current p-2.5 text-center text-slate-800">
|
|
<svg width="12px" height="12px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>office</title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-1869.000000, -293.000000)" fill="currentColor" fill-rule="nonzero"> <g transform="translate(1716.000000, 291.000000)"> <g id="office" transform="translate(153.000000, 2.000000)"> <path class="color-background" d="M12.25,17.5 L8.75,17.5 L8.75,1.75 C8.75,0.78225 9.53225,0 10.5,0 L31.5,0 C32.46775,0 33.25,0.78225 33.25,1.75 L33.25,12.25 L29.75,12.25 L29.75,3.5 L12.25,3.5 L12.25,17.5 Z" opacity="0.6"></path> <path class="color-background" d="M40.25,14 L24.5,14 C23.53225,14 22.75,14.78225 22.75,15.75 L22.75,38.5 L19.25,38.5 L19.25,22.75 C19.25,21.78225 18.46775,21 17.5,21 L1.75,21 C0.78225,21 0,21.78225 0,22.75 L0,40.25 C0,41.21775 0.78225,42 1.75,42 L40.25,42 C41.21775,42 42,41.21775 42,40.25 L42,15.75 C42,14.78225 41.21775,14 40.25,14 Z M12.25,36.75 L7,36.75 L7,33.25 L12.25,33.25 L12.25,36.75 Z M12.25,29.75 L7,29.75 L7,26.25 L12.25,26.25 L12.25,29.75 Z M35,36.75 L29.75,36.75 L29.75,33.25 L35,33.25 L35,36.75 Z M35,29.75 L29.75,29.75 L29.75,26.25 L35,26.25 L35,29.75 Z M35,22.75 L29.75,22.75 L29.75,19.25 L35,19.25 L35,22.75 Z"></path> </g> </g> </g> </g> </svg>
|
|
</div>
|
|
|
|
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease-soft text-slate-700">Pages</span>
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="pagesExamples">
|
|
<ul class="flex flex-wrap pl-4 mb-0 ml-6 list-none transition-all duration-200 ease-soft-in-out">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
<a collapse_trigger="secondary" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> P </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Profile <b class="caret"></b></span>
|
|
</a>
|
|
|
|
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="profileExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../pages/profile/overview.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> P </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Profile Overview </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../pages/profile/teams.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> T </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Teams </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../pages/profile/projects.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> A </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> All Projects </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
<a collapse_trigger="secondary" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> U </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Users <b class="caret"></b></span>
|
|
</a>
|
|
|
|
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="usersExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../pages/users/reports.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> R </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Reports </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../pages/users/new-user.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> N </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> New User </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
<a collapse_trigger="secondary" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> A </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Account <b class="caret"></b></span>
|
|
</a>
|
|
|
|
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="accountExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../pages/account/settings.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> S </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Settings </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../pages/account/billing.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> B </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Billing </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../pages/account/invoice.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> I </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Invoice </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../pages/account/security.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> S </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Security </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
<a collapse_trigger="secondary" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> P </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Projects <b class="caret"></b></span>
|
|
</a>
|
|
|
|
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="projectsExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../pages/projects/general.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> G </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> General </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../pages/projects/timeline.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> T </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Timeline </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../pages/projects/new-project.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> N </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> New Project </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../pages/pricing-page.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> P </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Pricing Page </span>
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../pages/messages.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> M </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Messages </span>
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../pages/rtl-page.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> R </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> RTL </span>
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../pages/widgets.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> W </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Widgets </span>
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../pages/charts.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> C </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Charts </span>
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../pages/sweet-alerts.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> S </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Sweet Alerts </span>
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../pages/notifications.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> N </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Notifications </span>
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a active_primary collapse_trigger="primary" href="javascript:;" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out text-sm py-2.7 xl:shadow-soft-xl my-0 mx-4 flex items-center whitespace-nowrap rounded-lg bg-white px-4 font-semibold text-slate-700 transition-all after:ml-auto after:inline-block after:rotate-180 after:font-bold after:text-slate-800 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80" aria-expanded="true">
|
|
|
|
<div class="stroke-none shadow-soft-sm bg-gradient-to-tl from-purple-700 to-pink-500 mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center p-2.5 text-center text-white">
|
|
<svg width="12px" height="12px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>settings</title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-2020.000000, -442.000000)" fill="currentColor" fill-rule="nonzero"> <g transform="translate(1716.000000, 291.000000)"> <g transform="translate(304.000000, 151.000000)"> <polygon class="color-background" opacity="0.596981957" points="18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667"></polygon> <path class="color-background" d="M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z" opacity="0.596981957"></path> <path class="color-background" d="M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z"></path> </g> </g> </g> </g> </svg>
|
|
</div>
|
|
|
|
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease-soft text-slate-700">Applications</span>
|
|
</a>
|
|
|
|
|
|
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out" id="applicationsExamples">
|
|
<ul class="flex flex-wrap pl-4 mb-0 ml-6 list-none transition-all duration-200 ease-soft-in-out">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../applications/kanban.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> K </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Kanban </span>
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-5 relative my-0 mr-4 flex items-center whitespace-nowrap rounded-lg bg-transparent pr-4 font-semibold text-slate-800 shadow-none transition-colors before:absolute before:top-1/2 before:h-2 before:w-2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800 before:content-[''] dark:text-white dark:opacity-100 dark:before:bg-white dark:before:opacity-80" href="../applications/wizard.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> W </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Wizard </span>
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../applications/datatables.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> D </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> DataTables </span>
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../applications/calendar.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> C </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Calendar </span>
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../applications/analytics.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> A </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Analytics </span>
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a collapse_trigger="primary" href="javascript:;" 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" aria-expanded="false">
|
|
|
|
<div class="stroke-none shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current p-2.5 text-center text-slate-800">
|
|
<svg class="text-dark" width="12px" height="12px" viewBox="0 0 42 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>basket</title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-1869.000000, -741.000000)" fill="currentColor" fill-rule="nonzero"> <g transform="translate(1716.000000, 291.000000)"> <g id="basket" transform="translate(153.000000, 450.000000)"> <path class="color-background" d="M34.080375,13.125 L27.3748125,1.9490625 C27.1377583,1.53795093 26.6972449,1.28682264 26.222716,1.29218729 C25.748187,1.29772591 25.3135593,1.55890827 25.0860125,1.97535742 C24.8584658,2.39180657 24.8734447,2.89865282 25.1251875,3.3009375 L31.019625,13.125 L10.980375,13.125 L16.8748125,3.3009375 C17.1265553,2.89865282 17.1415342,2.39180657 16.9139875,1.97535742 C16.6864407,1.55890827 16.251813,1.29772591 15.777284,1.29218729 C15.3027551,1.28682264 14.8622417,1.53795093 14.6251875,1.9490625 L7.919625,13.125 L0,13.125 L0,18.375 L42,18.375 L42,13.125 L34.080375,13.125 Z" opacity="0.595377604"></path> <path class="color-background" d="M3.9375,21 L3.9375,38.0625 C3.9375,40.9619949 6.28800506,43.3125 9.1875,43.3125 L32.8125,43.3125 C35.7119949,43.3125 38.0625,40.9619949 38.0625,38.0625 L38.0625,21 L3.9375,21 Z M14.4375,36.75 L11.8125,36.75 L11.8125,26.25 L14.4375,26.25 L14.4375,36.75 Z M22.3125,36.75 L19.6875,36.75 L19.6875,26.25 L22.3125,26.25 L22.3125,36.75 Z M30.1875,36.75 L27.5625,36.75 L27.5625,26.25 L30.1875,26.25 L30.1875,36.75 Z"></path> </g> </g> </g> </g> </svg>
|
|
</div>
|
|
|
|
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease-soft text-slate-700">Ecommerce</span>
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="ecommerceExamples">
|
|
<ul class="flex flex-wrap pl-4 mb-0 ml-6 list-none transition-all duration-200 ease-soft-in-out">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../ecommerce/overview.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> O </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Overview </span>
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
<a collapse_trigger="secondary" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> P </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Products <b class="caret"></b></span>
|
|
</a>
|
|
|
|
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="productsExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../ecommerce/products/new-product.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> N </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> New Product </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../ecommerce/products/edit-product.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> E </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Edit Product </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../ecommerce/products/product-page.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> P </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Product Page </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../ecommerce/products/products-list.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> P </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Products List </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
<a collapse_trigger="secondary" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> O </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Orders <b class="caret"></b></span>
|
|
</a>
|
|
|
|
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="ordersExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../ecommerce/orders/list.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> O </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Order List </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../ecommerce/orders/details.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> O </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Order Details </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="../ecommerce/referral.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> R </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Referral </span>
|
|
</a>
|
|
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a collapse_trigger="primary" href="javascript:;" 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" aria-expanded="false">
|
|
|
|
<div class="stroke-none shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current p-2.5 text-center text-slate-800">
|
|
<svg width="12px" height="12px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>document</title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-1870.000000, -591.000000)" fill="currentColor" fill-rule="nonzero"> <g transform="translate(1716.000000, 291.000000)"> <g transform="translate(154.000000, 300.000000)"> <path class="color-background" d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity="0.603585379"></path> <path class="color-background" d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z"></path> </g> </g> </g> </g> </svg>
|
|
</div>
|
|
|
|
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease-soft text-slate-700">Authentication</span>
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="authExamples">
|
|
<ul class="flex flex-wrap pl-4 mb-0 ml-6 list-none transition-all duration-200 ease-soft-in-out">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
<a collapse_trigger="secondary" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> S </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Sign In <b class="caret"></b></span>
|
|
</a>
|
|
|
|
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="signinExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../authentication/signin/basic.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> B </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Basic </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../authentication/signin/cover.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> C </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Cover </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../authentication/signin/illustration.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> I </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Illustration </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
<a collapse_trigger="secondary" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> S </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Sign Up <b class="caret"></b></span>
|
|
</a>
|
|
|
|
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="signupExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../authentication/signup/basic.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> B </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Basic </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../authentication/signup/cover.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> C </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Cover </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../authentication/signup/illustration.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> I </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Illustration </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
<a collapse_trigger="secondary" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> R </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Reset Password <b class="caret"></b></span>
|
|
</a>
|
|
|
|
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="resetExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../authentication/reset/basic.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> B </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Basic </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../authentication/reset/cover.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> C </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Cover </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../authentication/reset/illustration.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> I </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Illustration </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
<a collapse_trigger="secondary" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> L </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Lock <b class="caret"></b></span>
|
|
</a>
|
|
|
|
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="lockExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../authentication/lock/basic.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> B </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Basic </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../authentication/lock/cover.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> C </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Cover </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../authentication/lock/illustration.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> I </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Illustration </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
<a collapse_trigger="secondary" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> 2 </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> 2-Step Verification <b class="caret"></b></span>
|
|
</a>
|
|
|
|
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="StepExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../authentication/verification/basic.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> B </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Basic </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../authentication/verification/cover.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> C </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Cover </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../authentication/verification/illustration.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> I </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Illustration </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
<a collapse_trigger="secondary" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> E </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Error <b class="caret"></b></span>
|
|
</a>
|
|
|
|
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="errorExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../authentication/error/404.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> E </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Error 404 </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="../authentication/error/500.html">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> E </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Error 500 </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
<hr class="h-px my-4 bg-transparent bg-gradient-to-r from-transparent via-black/40 to-transparent dark:bg-gradient-to-r dark:from-transparent dark:via-white dark:to-transparent" />
|
|
<h6 class="pl-6 mb-2 ml-2 font-bold leading-tight uppercase text-xs opacity-60 dark:text-white">DOCS</h6>
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a collapse_trigger="primary" href="javascript:;" 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" aria-expanded="false">
|
|
|
|
<div class="stroke-none shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current p-2.5 text-center text-slate-800">
|
|
<svg width="12px" height="20px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>spaceship</title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-1720.000000, -592.000000)" fill="currentColor" fill-rule="nonzero"> <g transform="translate(1716.000000, 291.000000)"> <g transform="translate(4.000000, 301.000000)"> <path class="color-background" d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z"></path> <path class="color-background" d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z"></path> <path class="color-background" d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity="0.598539807"></path> <path class="color-background" d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" opacity="0.598539807"></path> </g> </g> </g> </g> </svg>
|
|
</div>
|
|
|
|
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease-soft text-slate-700">Basic</span>
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="basicExamples">
|
|
<ul class="flex flex-wrap pl-4 mb-0 ml-6 list-none transition-all duration-200 ease-soft-in-out">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
<a collapse_trigger="secondary" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> G </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Getting Started <b class="caret"></b></span>
|
|
</a>
|
|
|
|
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="gettingStartedExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="https://www.creative-tim.com/learning-lab/tailwind/html/quick-start/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> Q </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Quick Start </span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="https://www.creative-tim.com/learning-lab/tailwind/html/build-tools/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> B </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Build Tools </span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="https://www.creative-tim.com/learning-lab/tailwind/html/what-is-tailwind-css/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> W </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> What is Tailwind CSS </span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="https://www.creative-tim.com/learning-lab/tailwind/html/license/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> L </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> License </span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
<a collapse_trigger="secondary" class="after:ease-soft-in-out after:font-awesome-5-free ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] after:ml-auto after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80 dark:after:text-white/50 dark:after:text-white cursor-pointer">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> C </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Costumization <b class="caret"></b></span>
|
|
</a>
|
|
|
|
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="foundationExample">
|
|
<ul class="flex flex-col flex-wrap pl-0 mb-0 list-none transition-all duration-200 ease-soft-in-out">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="https://www.creative-tim.com/learning-lab/tailwind/html/colors/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> C </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Colors </span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="https://www.creative-tim.com/learning-lab/tailwind/html/shadows/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> S </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Shadows </span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="https://www.creative-tim.com/learning-lab/tailwind/html/screens/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> S </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Screens </span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-3.4 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors dark:text-white dark:opacity-60" href="https://www.creative-tim.com/learning-lab/tailwind/html/fonts/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out text-xs"> F </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Fonts </span>
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a collapse_trigger="primary" href="javascript:;" 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" aria-expanded="false">
|
|
|
|
<div class="stroke-none shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current p-2.5 text-center text-slate-800">
|
|
<svg width="12px" height="12px" viewBox="0 0 46 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>customer-support</title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-1717.000000, -291.000000)" fill="currentColor" fill-rule="nonzero"> <g transform="translate(1716.000000, 291.000000)"> <g transform="translate(1.000000, 0.000000)"> <path class="color-background" d="M45,0 L26,0 C25.447,0 25,0.447 25,1 L25,20 C25,20.379 25.214,20.725 25.553,20.895 C25.694,20.965 25.848,21 26,21 C26.212,21 26.424,20.933 26.6,20.8 L34.333,15 L45,15 C45.553,15 46,14.553 46,14 L46,1 C46,0.447 45.553,0 45,0 Z" opacity="0.59858631"></path> <path class="color-foreground" d="M22.883,32.86 C20.761,32.012 17.324,31 13,31 C8.676,31 5.239,32.012 3.116,32.86 C1.224,33.619 0,35.438 0,37.494 L0,41 C0,41.553 0.447,42 1,42 L25,42 C25.553,42 26,41.553 26,41 L26,37.494 C26,35.438 24.776,33.619 22.883,32.86 Z"></path> <path class="color-foreground" d="M13,28 C17.432,28 21,22.529 21,18 C21,13.589 17.411,10 13,10 C8.589,10 5,13.589 5,18 C5,22.529 8.568,28 13,28 Z"></path> </g> </g> </g> </g> </svg>
|
|
</div>
|
|
|
|
<span class="ml-1 duration-300 opacity-100 pointer-events-none ease-soft text-slate-700">Components</span>
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<div class="h-auto overflow-hidden transition-all duration-200 ease-soft-in-out max-h-0" id="componentsExamples">
|
|
<ul class="flex flex-wrap pl-4 mb-0 ml-6 list-none transition-all duration-200 ease-soft-in-out">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/alert/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> A </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Alert </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/avatar/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> A </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Avatar </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/button/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> B </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Button </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/card/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> C </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Card </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/checkbox/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> C </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Checkbox </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/chip/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> C </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Chip </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/collapse/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> C </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Collapse </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/dropdown/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> D </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Dropdown </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/icon-button/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> I </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Icon Button </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/input/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> I </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Input </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/modal/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> M </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Modal </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/navbar/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> N </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Navbar </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/progress/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> P </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Progress </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/switch/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> S </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Switch </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/table/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> T </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Table </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/tabs/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> T </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Tabs </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/textarea/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> T </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Textarea </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/tooltip/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> T </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Tooltip </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
|
|
|
|
<a class="ease-soft-in-out py-1.6 ml-5.4 pl-4 text-sm before:-left-4.5 before:h-1.25 before:w-1.25 relative my-0 mr-4 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-slate-800/50 shadow-none transition-colors before:absolute before:top-1/2 before:-translate-y-1/2 before:rounded-3xl before:bg-slate-800/50 before:content-[''] dark:text-white dark:opacity-60 dark:before:bg-white dark:before:opacity-80" href="https://www.creative-tim.com/learning-lab/tailwind/html/typography/soft-ui-dashboard/" target="_blank">
|
|
<span class="w-0 text-center transition-all duration-200 opacity-0 pointer-events-none ease-soft-in-out"> T </span>
|
|
<span class="transition-all duration-100 pointer-events-none ease-soft"> Typography </span>
|
|
</a>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li class="mt-0.5 w-full">
|
|
|
|
|
|
<a class="ease-soft-in-out text-sm py-2.7 my-0 mx-4 flex items-center whitespace-nowrap px-4 font-medium text-slate-500 shadow-none transition-colors dark:text-white dark:opacity-80" href="https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro/blob/main/CHANGELOG.md" target="_blank">
|
|
|
|
<div class="stroke-none shadow-soft-2xl mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-white bg-center fill-current p-2.5 text-center text-black">
|
|
<svg width="12px" height="12px" viewBox="0 0 43 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>credit-card</title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-2169.000000, -745.000000)" fill="currentColor" fill-rule="nonzero"> <g transform="translate(1716.000000, 291.000000)"> <g transform="translate(453.000000, 454.000000)"> <path class="color-background" d="M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z" opacity="0.593633743"></path> <path class="color-background" d="M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z"></path> </g> </g> </g> </g> </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 sidenav-card 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-['']">
|
|
<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 sidenav-card-icon 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" aria-hidden="true"></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 href="https://www.creative-tim.com/learning-lab/tailwind/html/quick-start/soft-ui-dashboard/" target="_blank" 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">Documentation</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- pro btn -->
|
|
<!-- <a class="inline-block w-full px-6 py-3 my-4 font-bold text-center text-white uppercase align-middle transition-all ease-in border-0 rounded-lg select-none shadow-soft-md bg-150 bg-x-25 leading-pro text-xs bg-gradient-to-tl from-purple-700 to-pink-500 hover:shadow-soft-2xl hover:scale-102" href="https://www.creative-tim.com/product/soft-ui-dashboard-pro?ref=sidebarfree">Upgrade to pro</a> -->
|
|
</div>
|
|
</aside>
|
|
|
|
|
|
<main class="relative h-full max-h-screen transition-all duration-200 ease-soft-in-out xl:ml-68 rounded-xl">
|
|
<!-- Navbar -->
|
|
<nav navbar-main 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-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:;">
|
|
<svg width="12px" height="12px" class="mb-1" viewBox="0 0 45 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<title>shop</title>
|
|
<g class="dark:fill-white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g class="dark:fill-white" transform="translate(-1716.000000, -439.000000)" fill="#252f40" fill-rule="nonzero">
|
|
<g class="dark:fill-white" transform="translate(1716.000000, 291.000000)">
|
|
<g class="dark:fill-white" transform="translate(0.000000, 148.000000)">
|
|
<path d="M46.7199583,10.7414583 L40.8449583,0.949791667 C40.4909749,0.360605034 39.8540131,0 39.1666667,0 L7.83333333,0 C7.1459869,0 6.50902508,0.360605034 6.15504167,0.949791667 L0.280041667,10.7414583 C0.0969176761,11.0460037 -1.23209662e-05,11.3946378 -1.23209662e-05,11.75 C-0.00758042603,16.0663731 3.48367543,19.5725301 7.80004167,19.5833333 L7.81570833,19.5833333 C9.75003686,19.5882688 11.6168794,18.8726691 13.0522917,17.5760417 C16.0171492,20.2556967 20.5292675,20.2556967 23.494125,17.5760417 C26.4604562,20.2616016 30.9794188,20.2616016 33.94575,17.5760417 C36.2421905,19.6477597 39.5441143,20.1708521 42.3684437,18.9103691 C45.1927731,17.649886 47.0084685,14.8428276 47.0000295,11.75 C47.0000295,11.3946378 46.9030823,11.0460037 46.7199583,10.7414583 Z"></path>
|
|
<path
|
|
d="M39.198,22.4912623 C37.3776246,22.4928106 35.5817531,22.0149171 33.951625,21.0951667 L33.92225,21.1107282 C31.1430221,22.6838032 27.9255001,22.9318916 24.9844167,21.7998837 C24.4750389,21.605469 23.9777983,21.3722567 23.4960833,21.1018359 L23.4745417,21.1129513 C20.6961809,22.6871153 17.4786145,22.9344611 14.5386667,21.7998837 C14.029926,21.6054643 13.533337,21.3722507 13.0522917,21.1018359 C11.4250962,22.0190609 9.63246555,22.4947009 7.81570833,22.4912623 C7.16510551,22.4842162 6.51607673,22.4173045 5.875,22.2911849 L5.875,44.7220845 C5.875,45.9498589 6.7517757,46.9451667 7.83333333,46.9451667 L19.5833333,46.9451667 L19.5833333,33.6066734 L27.4166667,33.6066734 L27.4166667,46.9451667 L39.1666667,46.9451667 C40.2482243,46.9451667 41.125,45.9498589 41.125,44.7220845 L41.125,22.2822926 C40.4887822,22.4116582 39.8442868,22.4815492 39.198,22.4912623 Z"
|
|
></path>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</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 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" aria-current="page">Applications</li>
|
|
</ol>
|
|
<h6 class="mb-0 font-bold capitalize dark:text-white">Wizard</h6>
|
|
</nav>
|
|
|
|
<div class="flex items-center">
|
|
<a mini-sidenav-burger href="javascript:;" class="hidden p-0 transition-all ease-nav-brand text-sm text-slate-500 xl:block" aria-expanded="false">
|
|
<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 class="fas fa-search" aria-hidden="true"></i>
|
|
</span>
|
|
<input type="text" 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..." />
|
|
</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 href="../../pages/authentication/signin/illustration.html" class="block px-0 py-2 font-semibold transition-all ease-nav-brand text-sm text-slate-500 dark:text-white">
|
|
<i class="fa fa-user sm:mr-1" aria-hidden="true"></i>
|
|
<span class="hidden sm:inline">Sign In</span>
|
|
</a>
|
|
</li>
|
|
<li class="flex items-center pl-4 xl:hidden">
|
|
<a sidenav-trigger class="block p-0 transition-all ease-nav-brand text-sm text-slate-500 dark:text-white" href="javascript:;" aria-expanded="false">
|
|
<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 href="javascript:;" class="p-0 transition-all text-sm ease-nav-brand text-slate-500 dark:text-white">
|
|
<i fixed-plugin-button-nav class="cursor-pointer fa fa-cog" aria-hidden="true"></i>
|
|
<!-- fixed-plugin-button-nav -->
|
|
</a>
|
|
</li>
|
|
|
|
<!-- notifications -->
|
|
|
|
<li class="relative flex items-center pr-2">
|
|
<p class="hidden transform-dropdown-show"></p>
|
|
<a dropdown-trigger href="javascript:;" class="block p-0 transition-all text-sm ease-nav-brand text-slate-500 dark:text-white" aria-expanded="false">
|
|
<i class="cursor-pointer fa fa-bell" aria-hidden="true"></i>
|
|
</a>
|
|
|
|
<ul dropdown-menu 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">
|
|
<!-- 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 src="../../assets/img/team-2.jpg" class="inline-flex items-center justify-center mr-4 text-white text-sm h-9 w-9 max-w-none rounded-xl" />
|
|
</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 class="mr-1 fa fa-clock" aria-hidden="true"></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 src="../../assets/img/small-logos/logo-spotify.svg" 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" />
|
|
</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 class="mr-1 fa fa-clock" aria-hidden="true"></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">
|
|
<svg width="12px" height="12px" viewBox="0 0 43 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<title>credit-card</title>
|
|
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g transform="translate(-2169.000000, -745.000000)" fill="#FFFFFF" fill-rule="nonzero">
|
|
<g transform="translate(1716.000000, 291.000000)">
|
|
<g transform="translate(453.000000, 454.000000)">
|
|
<path class="color-background" d="M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z" opacity="0.593633743"></path>
|
|
<path class="color-background" d="M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z"></path>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</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 class="mr-1 fa fa-clock" aria-hidden="true"></i>
|
|
2 days
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Content -->
|
|
<div class="w-full p-6 mx-auto">
|
|
<div class="flex flex-wrap -mx-3">
|
|
<div class="w-full max-w-full px-3 text-center flex-0">
|
|
<h3 class="mt-12">Build Your Profile</h3>
|
|
<h5 class="font-normal dark:text-white text-slate-400">This information will let us know more about you.</h5>
|
|
<div multisteps-form class="mb-12">
|
|
<div class="flex flex-wrap -mx-3">
|
|
<div class="w-full max-w-full px-3 mx-auto my-12 flex-0 lg:w-8/12">
|
|
<div class="grid grid-cols-3">
|
|
<button aria-controls="about" type="button" class="before:w-3.4 before:h-3.4 before:rounded-circle before:scale-120 rounded-0 -indent-330 relative m-0 cursor-pointer border-none bg-transparent px-1.5 pb-0.5 pt-5 text-slate-700 outline-none transition-all ease-linear before:absolute before:top-0 before:left-1/2 before:z-30 before:box-border before:block before:-translate-x-1/2 before:border-2 before:border-solid before:border-current before:bg-current before:transition-all before:ease-linear before:content-[''] sm:indent-0" title="About"><span class="text-slate-400">About</span></button>
|
|
<button aria-controls="account" type="button" class="before:w-3.4 before:h-3.4 before:rounded-circle after:top-1.25 rounded-0 -indent-330 relative m-0 cursor-pointer border-none bg-transparent px-1.5 pb-0.5 pt-5 text-slate-100 outline-none transition-all ease-linear before:absolute before:top-0 before:left-1/2 before:z-30 before:box-border before:block before:-translate-x-1/2 before:border-2 before:border-solid before:border-current before:bg-white before:transition-all before:ease-linear before:content-[''] after:absolute after:left-[calc(-50%-13px/2)] after:z-10 after:block after:h-0.5 after:w-full after:bg-current after:transition-all after:ease-linear after:content-[''] sm:indent-0" title="Account">Account</button>
|
|
<button aria-controls="address" type="button" class="before:w-3.4 before:h-3.4 before:rounded-circle after:top-1.25 rounded-0 -indent-330 relative m-0 cursor-pointer border-none bg-transparent px-1.5 pb-0.5 pt-5 text-slate-100 outline-none transition-all ease-linear before:absolute before:top-0 before:left-1/2 before:z-30 before:box-border before:block before:-translate-x-1/2 before:border-2 before:border-solid before:border-current before:bg-white before:transition-all before:ease-linear before:content-[''] after:absolute after:left-[calc(-50%-13px/2)] after:z-10 after:block after:h-0.5 after:w-full after:bg-current after:transition-all after:ease-linear after:content-[''] sm:indent-0" title="Address">Address</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap -mx-3">
|
|
<div class="w-full max-w-full px-3 m-auto flex-0 lg:w-8/12">
|
|
<form class="relative mb-32">
|
|
|
|
<div active form="about" class="absolute top-0 left-0 flex flex-col visible w-full h-auto min-w-0 p-4 break-words bg-white border-0 opacity-100 dark:bg-gray-950 dark:shadow-soft-dark-xl shadow-soft-xl rounded-2xl bg-clip-border">
|
|
|
|
<div class="flex flex-wrap -mx-3 text-center">
|
|
<div class="w-10/12 max-w-full px-3 mx-auto flex-0">
|
|
<h5 class="font-normal dark:text-white">Let's start with the basic information</h5>
|
|
<p>Let us know your name and email address. Use an address you don't mind other users contacting you at</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex flex-wrap mt-4 -mx-3">
|
|
<div class="w-full max-w-full px-3 flex-0 sm:w-4/12">
|
|
<div class="inline-flex items-center justify-center w-28 h-28 relative text-white transition-all duration-200 text-base ease-soft-in-out rounded-xl">
|
|
<img class="w-full rounded-lg" src="../../assets/img/team-2.jpg" alt="Image placeholder" />
|
|
<a href="javascript:;" class="inline-block w-6 h-6 p-1.2 right-0 bottom-0 absolute -mb-2 -mr-2 font-bold text-center uppercase align-middle transition-all bg-gradient-to-tl from-gray-400 to-gray-100 text-slate-800 border-0 border-transparent border-solid rounded-lg cursor-pointer leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 active:opacity-85">
|
|
<i class="top-0 fa fa-pen text-3xs"></i>
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-full max-w-full px-3 mt-6 text-left flex-0 sm:w-8/12 sm:mt-0">
|
|
<label class="mb-2 ml-1 font-bold text-xs text-slate-700 dark:text-white/80" for="First Name">First Name</label>
|
|
<input type="text" name="First Name" placeholder="Eg. Michael" class="mb-4 focus:shadow-soft-primary-outline dark:bg-gray-950 dark:placeholder:text-white/80 dark:text-white/80 text-sm leading-5.6 ease-soft block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-2 font-normal text-gray-700 outline-none transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none" />
|
|
<label class="mb-2 ml-1 font-bold text-xs text-slate-700 dark:text-white/80" for="Last Name">Last Name</label>
|
|
<input type="text" name="Last Name" placeholder="Eg. Tomson" class="mb-4 focus:shadow-soft-primary-outline dark:bg-gray-950 dark:placeholder:text-white/80 dark:text-white/80 text-sm leading-5.6 ease-soft block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-2 font-normal text-gray-700 outline-none transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none" />
|
|
<label class="mb-2 ml-1 font-bold text-xs text-slate-700 dark:text-white/80" for="Email Address">Email Address</label>
|
|
<input type="email" name="Email Address" placeholder="Eg. soft@dashboard.com" class="focus:shadow-soft-primary-outline dark:bg-gray-950 dark:placeholder:text-white/80 dark:text-white/80 text-sm leading-5.6 ease-soft block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-2 font-normal text-gray-700 outline-none transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none" />
|
|
</div>
|
|
</div>
|
|
<div class="flex mt-6">
|
|
<button type="button" aria-controls="account" next-form-btn href="javascript:;" class="inline-block px-6 py-3 mb-0 ml-auto font-bold text-right text-white uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:scale-102 active:opacity-85 hover:shadow-soft-xs dark:bg-gradient-to-tl dark:from-slate-850 dark:to-gray-850 bg-gradient-to-tl from-gray-900 to-slate-800 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div form="account" class="absolute top-0 left-0 flex flex-col invisible w-full h-0 min-w-0 p-4 break-words bg-white border-0 opacity-0 dark:bg-gray-950 dark:shadow-soft-dark-xl shadow-soft-xl rounded-2xl bg-clip-border">
|
|
|
|
<div class="flex flex-wrap -mx-3 text-center">
|
|
<div class="w-10/12 max-w-full px-3 mx-auto flex-0">
|
|
<h5 class="font-normal dark:text-white">What are you doing? (checkboxes)</h5>
|
|
<p>Give us more details about you. What do you enjoy doing in your spare time?</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex flex-wrap mt-6 -mx-3">
|
|
<div class="w-full max-w-full px-3 ml-auto sm:flex-0 sm:w-3/12 shrink-0">
|
|
<input id="design" type="checkbox" class="absolute pointer-events-none peer clip-rect-0">
|
|
<label checkbox-color-label for="design" class="inline-block px-16 py-12 mb-4 ml-1 font-bold text-center uppercase align-middle transition-all bg-transparent border-2 border-solid rounded-lg shadow-none cursor-pointer group peer-checked:bg-slate-400 hover:scale-102 leading-pro text-xs ease-soft-in tracking-tight-soft active:opacity-85 active:shadow-soft-xs border-slate-400 text-slate-400 hover:border-slate-400 hover:bg-transparent hover:opacity-75 active:border-slate-400 active:bg-slate-400 active:text-white">
|
|
<svg class="text-slate-700" width="20px" height="20px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<title>settings</title>
|
|
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g transform="translate(-2020.000000, -442.000000)" fill="#FFFFFF" fill-rule="nonzero">
|
|
<g transform="translate(1716.000000, 291.000000)">
|
|
<g transform="translate(304.000000, 151.000000)">
|
|
<polygon checkbox-color class="fill-slate-800" opacity="0.596981957" points="18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667"></polygon>
|
|
<path checkbox-color class="fill-slate-800" d="M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z" opacity="0.596981957"></path>
|
|
<path checkbox-color class="fill-slate-800" d="M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z"></path>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</label>
|
|
<h6 class="select-none dark:text-white">Design</h6>
|
|
</div>
|
|
<div class="w-full max-w-full px-3 sm:flex-0 sm:w-3/12 shrink-0">
|
|
<input id="code" type="checkbox" class="absolute pointer-events-none peer clip-rect-0">
|
|
<label checkbox-color-label for="code" class="inline-block px-16 py-12 mb-4 ml-1 font-bold text-center uppercase align-middle transition-all bg-transparent border-2 border-solid rounded-lg shadow-none cursor-pointer group peer-checked:bg-slate-400 hover:scale-102 leading-pro text-xs ease-soft-in tracking-tight-soft active:opacity-85 active:shadow-soft-xs border-slate-400 text-slate-400 hover:border-slate-400 hover:bg-transparent hover:opacity-75 active:border-slate-400 active:bg-slate-400 active:text-white">
|
|
<svg class="text-slate-700" width="20px" height="20px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<title>box-3d-50</title>
|
|
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g transform="translate(-2319.000000, -291.000000)" fill="#FFFFFF" fill-rule="nonzero">
|
|
<g transform="translate(1716.000000, 291.000000)">
|
|
<g transform="translate(603.000000, 0.000000)">
|
|
<path checkbox-color class="fill-slate-800" d="M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z"></path>
|
|
<path checkbox-color class="fill-slate-800" d="M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z" opacity="0.7"></path>
|
|
<path checkbox-color class="fill-slate-800" d="M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z" opacity="0.7"></path>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</label>
|
|
<h6 class="select-none dark:text-white">Code</h6>
|
|
</div>
|
|
<div class="w-full max-w-full px-3 mr-auto sm:flex-0 sm:w-3/12 shrink-0">
|
|
<input id="develop" type="checkbox" class="absolute pointer-events-none peer clip-rect-0">
|
|
<label checkbox-color-label for="develop" class="inline-block px-16 py-12 mb-4 ml-1 font-bold text-center uppercase align-middle transition-all bg-transparent border-2 border-solid rounded-lg shadow-none cursor-pointer group peer-checked:bg-slate-400 hover:scale-102 leading-pro text-xs ease-soft-in tracking-tight-soft active:opacity-85 active:shadow-soft-xs border-slate-400 text-slate-400 hover:border-slate-400 hover:bg-transparent hover:opacity-75 active:border-slate-400 active:bg-slate-400 active:text-white">
|
|
<svg class="text-slate-700" width="20px" height="20px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<title>spaceship</title>
|
|
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g transform="translate(-1720.000000, -592.000000)" fill="#FFFFFF" fill-rule="nonzero">
|
|
<g transform="translate(1716.000000, 291.000000)">
|
|
<g transform="translate(4.000000, 301.000000)">
|
|
<path checkbox-color class="fill-slate-800" d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z"></path>
|
|
<path checkbox-color class="fill-slate-800" d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z"></path>
|
|
<path checkbox-color class="fill-slate-800" d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity="0.598539807"></path>
|
|
<path checkbox-color class="fill-slate-800" d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" opacity="0.598539807"></path>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</label>
|
|
<h6 class="select-none dark:text-white">Develop</h6>
|
|
</div>
|
|
</div>
|
|
<div class="flex mt-6">
|
|
<button type="button" aria-controls="about" prev-form-btn href="javascript:;" class="inline-block px-6 py-3 mb-0 font-bold text-right uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:scale-102 active:opacity-85 hover:shadow-soft-xs bg-gradient-to-tl from-gray-400 to-gray-100 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 text-slate-800">Prev</button>
|
|
<button type="button" aria-controls="address" next-form-btn href="javascript:;" class="inline-block px-6 py-3 mb-0 ml-auto font-bold text-right text-white uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:scale-102 active:opacity-85 hover:shadow-soft-xs dark:bg-gradient-to-tl dark:from-slate-850 dark:to-gray-850 bg-gradient-to-tl from-gray-900 to-slate-800 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div form="address" class="absolute top-0 left-0 flex flex-col invisible w-full h-0 min-w-0 p-4 break-words bg-white border-0 opacity-0 dark:bg-gray-950 dark:shadow-soft-dark-xl shadow-soft-xl rounded-2xl bg-clip-border">
|
|
|
|
<div class="flex flex-wrap -mx-3 text-center">
|
|
<div class="w-10/12 max-w-full px-3 mx-auto flex-0">
|
|
<h5 class="font-normal dark:text-white">Are you living in a nice area?</h5>
|
|
<p>One thing I love about the later sunsets is the chance to go for a walk through the neighborhood woods before dinner</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex flex-wrap -mx-3 text-left">
|
|
<div class="w-full max-w-full px-3 mt-4 ml-auto flex-0 md:w-8/12">
|
|
<label class="mb-2 ml-1 font-bold text-xs text-slate-700 dark:text-white/80" for="Street Name">Street Name</label>
|
|
<input type="text" name="Street Name" placeholder="Eg. Soft" class="focus:shadow-soft-primary-outline dark:bg-gray-950 dark:placeholder:text-white/80 dark:text-white/80 text-sm leading-5.6 ease-soft block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-2 font-normal text-gray-700 outline-none transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none" />
|
|
</div>
|
|
<div class="w-full max-w-full px-3 mt-4 ml-auto flex-0 md:w-4/12">
|
|
<label class="mb-2 ml-1 font-bold text-xs text-slate-700 dark:text-white/80" for="Street No">Street No</label>
|
|
<input type="number" name="Street No" min="01" placeholder="Eg 221" class="focus:shadow-soft-primary-outline dark:bg-gray-950 dark:placeholder:text-white/80 dark:text-white/80 text-sm leading-5.6 ease-soft block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-2 font-normal text-gray-700 outline-none transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none" />
|
|
</div>
|
|
<div class="w-full max-w-full px-3 mt-4 ml-auto flex-0 md:w-7/12">
|
|
<label class="mb-2 ml-1 font-bold text-xs text-slate-700 dark:text-white/80" for="City">City</label>
|
|
<input type="text" name="City" placeholder="Eg Tokyo" class="focus:shadow-soft-primary-outline dark:bg-gray-950 dark:placeholder:text-white/80 dark:text-white/80 text-sm leading-5.6 ease-soft block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-2 font-normal text-gray-700 outline-none transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none" />
|
|
</div>
|
|
<div class="w-full max-w-full px-3 mt-4 ml-auto flex-0 md:w-5/12">
|
|
<label class="mb-2 ml-1 font-bold text-xs text-slate-700 dark:text-white/80" for="Country">Country</label>
|
|
<select choice class="focus:shadow-soft-primary-outline dark:bg-gray-950 dark:placeholder:text-white/80 dark:text-white/80 text-sm leading-5.6 ease-soft block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-2 font-normal text-gray-700 outline-none transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none" name="choices-country" id="choices-country">
|
|
<option value="Argentina">Argentina</option>
|
|
<option value="Albania">Albania</option>
|
|
<option value="Algeria">Algeria</option>
|
|
<option value="Andorra">Andorra</option>
|
|
<option value="Angola">Angola</option>
|
|
<option value="Brasil">Brasil</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap -mx-3">
|
|
<div class="flex w-full max-w-full px-3 mt-6 flex-0">
|
|
<button type="button" aria-controls="account" prev-form-btn href="javascript:;" class="inline-block px-6 py-3 mb-0 font-bold text-right uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:scale-102 active:opacity-85 hover:shadow-soft-xs bg-gradient-to-tl from-gray-400 to-gray-100 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 text-slate-800">Prev</button>
|
|
<button type="button" send-form-btn href="javascript:;" class="inline-block px-6 py-3 mb-0 ml-auto font-bold text-right text-white uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:scale-102 active:opacity-85 hover:shadow-soft-xs dark:bg-gradient-to-tl dark:from-slate-850 dark:to-gray-850 bg-gradient-to-tl from-gray-900 to-slate-800 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25">Send</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Footer -->
|
|
<footer class="pt-4">
|
|
<div class="w-full px-6 mx-auto">
|
|
<div class="flex flex-wrap items-center -mx-3 lg:justify-between">
|
|
<div class="w-full max-w-full px-3 mt-0 mb-6 shrink-0 lg:mb-0 lg:w-1/2 lg:flex-none">
|
|
<div class="leading-normal text-center copyright text-sm text-slate-500 lg:text-left">
|
|
©
|
|
<script>
|
|
document.write(new Date().getFullYear() + ",");
|
|
</script>
|
|
made with <i class="fa fa-heart"></i> by
|
|
<a href="https://www.creative-tim.com" class="font-semibold text-slate-700 dark:text-white" 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 href="https://www.creative-tim.com" class="block px-4 pt-0 pb-1 font-normal transition-colors ease-soft-in-out text-sm text-slate-500" target="_blank">Creative Tim</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="https://www.creative-tim.com/presentation" class="block px-4 pt-0 pb-1 font-normal transition-colors ease-soft-in-out text-sm text-slate-500" target="_blank">About Us</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="https://creative-tim.com/blog" class="block px-4 pt-0 pb-1 font-normal transition-colors ease-soft-in-out text-sm text-slate-500" target="_blank">Blog</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a href="https://www.creative-tim.com/license" class="block px-4 pt-0 pb-1 pr-0 font-normal transition-colors ease-soft-in-out text-sm text-slate-500" target="_blank">License</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
<div fixed-plugin>
|
|
<a fixed-plugin-button 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" aria-expanded="false">
|
|
<i class="py-2 pointer-events-none fa fa-cog"> </i>
|
|
</a>
|
|
<!-- -right-90 in loc de 0-->
|
|
<div fixed-plugin-card 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">
|
|
<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 fixed-plugin-close-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">
|
|
<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 href="javascript:void(0)" class="switch-trigger background-color">
|
|
<div class="my-2 text-left" sidenav-colors>
|
|
<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-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" active-color 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 transparent-style-btn 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" active-style>Transparent</button>
|
|
<button white-style-btn 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</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 navbar-fixed-toggle 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" 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 sidenav-mini-toggle 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" 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 dark-toggle 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" 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 class="github-button" href="https://github.com/creativetimofficial/ct-soft-ui-dashboard-pro" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star creativetimofficial/soft-ui-dashboard on GitHub">Star</a>
|
|
<h6 class="mt-4">Thank you for sharing!</h6>
|
|
<a 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" 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" target="_blank"> <i class="mr-1 fab fa-twitter" aria-hidden="true"></i> Tweet </a>
|
|
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.creative-tim.com/product/soft-ui-dashboard-pro-tailwind" 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" target="_blank"> <i class="mr-1 fab fa-facebook-square" aria-hidden="true"></i> Share </a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
<!-- Core JS Files -->
|
|
<script src="../../assets/js/plugins/nouislider.min.js"></script>
|
|
<script src="../../assets/js/plugins/perfect-scrollbar.min.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="../../assets/js/plugins/choices.min.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- main script file -->
|
|
<script src="../../assets/js/soft-ui-dashboard-pro-tailwind.js?v=1.1.0"></script>
|
|
</html> |