heroweb/poc/out/pages/authentication/lock/basic.html

1132 lines
80 KiB
HTML
Raw Normal View History

2024-09-02 05:28:06 +00:00
<!--
=========================================================
* Soft UI Dashboard Pro Tailwind - v1.1.0
=========================================================
* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-tailwind
* Copyright 2024 Creative Tim (https://www.creative-tim.com)
* Coded by Creative Tim
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>
<link href="/static/img/apple-icon.png" rel="apple-touch-icon" sizes="76x76"/>
<link href="/static/img/apple-icon.png" rel="icon" type="image/png"/>
<title>
Soft UI Dashboard PRO Tailwind by Creative Tim
</title>
<!-- Fonts and icons -->
<link href="/static/1dcb649ff20ae5310ea78a512b8c10e3" rel="stylesheet"/>
<!-- Nucleo Icons -->
<link href="/static/css/nucleo-icons.css" rel="stylesheet"/>
<link href="/static/css/nucleo-svg.css" rel="stylesheet"/>
<!-- Font Awesome Icons -->
<script crossorigin="anonymous" src="/static/js/42d5adcbca.js">
</script>
<!-- Main Styling -->
<link href="/static/css/soft-ui-dashboard-tailwind_2.css" rel="stylesheet"/>
<!-- Nepcha Analytics (nepcha.com) -->
<!-- Nepcha is a easy-to-use web analytics. No cookies and fully compliant with GDPR, CCPA and PECR. -->
<script data-site="YOUR_DOMAIN_HERE" defer="" src="/static/js/nepcha-analytics.js">
</script>
</head>
</head>
<body class="bg-gray-100 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/80">
<nav class="absolute top-0 z-30 flex flex-wrap items-center justify-between w-full px-4 py-2 mt-6 mb-4 shadow-none lg:flex-nowrap lg:justify-start">
<div class="container flex flex-wrap items-center justify-between lg:flex-nowrap">
<a class="py-2.5 text-sm mr-4 ml-4 whitespace-nowrap font-bold text-white lg:ml-0" href="../../../pages/dashboards/default.html">
Soft UI Dashboard PRO
</a>
<button aria-expanded="false" class="px-3 py-1 ml-2 leading-none bg-transparent rounded-lg shadow-none cursor-pointer lg:hidden text-lg text-slate-700" nav-collapse-trigger="">
<span class="inline-block mt-2 align-middle w-6 h-6 bg-none">
<span bar1="" class="block relative w-5.5 h-px rounded-px bg-white transition-all duration-200 mx-auto my-0 origin-10-10">
</span>
<span bar2="" class="block relative w-5.5 h-px rounded-px bg-white transition-all duration-200 mx-auto my-0 mt-1.75">
</span>
<span bar3="" class="block relative w-5.5 h-px rounded-px bg-white transition-all duration-200 mx-auto my-0 mt-1.75 origin-10-90">
</span>
</span>
</button>
<div class="items-center w-full pt-4 pb-2 transition-all duration-350 ease-soft-in-out lg-max:max-h-0 lg-max:overflow-auto lg-max:hidden lg-max:bg-white lg-max:shadow-soft-3xl md-max:relative grow basis-full rounded-2xl lg:flex lg:basis-auto lg:py-0">
<ul class="flex flex-col pl-0 mx-auto mb-0 list-none md-max:w-full lg:flex-row">
<li class="relative mx-2 group md-max:static lg:after:content-[''] lg:after:top-0 lg:hover:after:top-full lg:after:absolute lg:after:left-0 lg:after:-bottom-6 lg:after:w-full lg:after:h-full">
<a aria-expanded="false" class="flex items-center justify-between px-4 py-2 pl-2 font-normal text-white transition-all cursor-pointer select-none lg:group-hover:opacity-75 lg-max:text-slate-700 ease-soft-in-out lg:px-2 text-sm" nav-dropdown-trigger="pages" role="button">
Pages
<img alt="down-arrow" class="hidden ml-1 lg:block" src="/static/img/down-arrow-white.svg"/>
<img alt="down-arrow" class="block ml-1 lg:hidden" src="/static/img/down-arrow-dark.svg"/>
</a>
<div class="sm-max:right-auto md-max:left-0 md-max:right-0 lg-max:bg-transparent lg-max:overflow-scroll lg-max:relative lg-max:shadow-none lg-max:transform-none lg-max:block lg-max:h-0 lg-max:transition-all lg-max:duration-350 lg-max:ease-soft lg-max:pt-0 lg-max:pb-0 lg-max:opacity-0 lg-max:top-0 lg-max:origin-top lg-max:pointer-events-none static p-4 m-0 mt-0 text-left list-none bg-white rounded-2xl lg:mt-4 lg:min-w-160 lg:absolute z-100 text-sm text-slate-500 bg-clip-padding lg:shadow-soft-3xl lg:cursor-pointer lg:transition-all lg:duration-250 lg:block lg:group-focus:pointer-events-auto lg:group-focus:transform-dropdown-show lg:group-focus:opacity-100 lg:group-focus:before:-top-5 lg:group-hover:opacity-100 lg:opacity-0 lg:top-0 lg:origin-top lg:group-hover:pointer-events-auto lg:group-hover:transform-dropdown-show lg:pointer-events-none lg:transform-dropdown lg:before:font-awesome lg:before:content-['\f0d8'] lg:before:absolute lg:before:top-0 lg:group-hover:before:-top-4.8 lg:before:left-7 lg:before:right-auto lg:before:text-5.5 lg:before:text-white lg:before:transition-all lg:before:duration-350 lg:before:ease-soft" nav-dropdown="pages">
<div class="flex-wrap hidden -mx-3 lg:flex">
<div class="w-full max-w-full px-6 py-2 flex-0">
<div class="flex flex-wrap -mx-3">
<div class="relative w-4/12 max-w-full px-3 flex-0">
<div class="flex items-center px-0 py-2 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
<div class="inline-block">
<div class="flex items-center justify-center w-6 h-6 mr-2 text-center text-black bg-center rounded-lg fill-current stroke-none bg-gradient-to-tl from-purple-700 to-pink-500">
{% include 'svg/my_37.svg' %}
</div>
</div>
Dashboards
</div>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/dashboards/default.html">
<span class="pl-4">
Default
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/dashboards/automotive.html">
<span class="pl-4">
Automotive
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/dashboards/smart-home.html">
<span class="pl-4">
Smart Home
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/dashboards/vr/vr-default.html">
<span class="pl-4">
Virtual Reality
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/dashboards/crm.html">
<span class="pl-4">
CRM
</span>
</a>
<div class="flex items-center px-0 py-2 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
<div class="inline-block">
<div class="flex items-center justify-center w-6 h-6 mr-2 text-center text-black bg-center rounded-lg fill-current stroke-none bg-gradient-to-tl from-purple-700 to-pink-500">
{% include 'svg/my_38.svg' %}
</div>
</div>
Users
</div>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/pages/users/reports.html">
<span class="pl-4">
Reports
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/pages/users/new-user.html">
<span class="pl-4">
New User
</span>
</a>
<hr class="absolute top-0 right-0 w-px h-full bg-transparent bg-gradient-to-b from-transparent via-black/40 to-transparent"/>
</div>
<div class="relative w-4/12 max-w-full px-3 flex-0">
<div class="flex items-center px-0 py-2 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
<div class="inline-block">
<div class="flex items-center justify-center w-6 h-6 mr-2 text-center text-black bg-center rounded-lg fill-current stroke-none bg-gradient-to-tl from-purple-700 to-pink-500">
{% include 'svg/my_39.svg' %}
</div>
</div>
Profile
</div>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/pages/profile/overview.html">
<span class="pl-4">
Overview
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/pages/profile/teams.html">
<span class="pl-4">
Teams
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/pages/profile/projects.html">
<span class="pl-4">
Projects
</span>
</a>
<div class="flex items-center px-0 py-2 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
<div class="inline-block">
<div class="flex items-center justify-center w-6 h-6 mr-2 text-center text-black bg-center rounded-lg fill-current stroke-none bg-gradient-to-tl from-purple-700 to-pink-500">
{% include 'svg/my_40.svg' %}
</div>
</div>
Projects
</div>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/pages/projects/general.html">
<span class="pl-4">
General
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/pages/projects/timeline.html">
<span class="pl-4">
Timeline
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/pages/projects/new-project.html">
<span class="pl-4">
New Project
</span>
</a>
<hr class="absolute top-0 right-0 w-px h-full bg-transparent bg-gradient-to-b from-transparent via-black/40 to-transparent"/>
</div>
<div class="w-4/12 max-w-full px-3 flex-0">
<div class="flex items-center px-0 py-2 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
<div class="inline-block">
<div class="flex items-center justify-center w-6 h-6 mr-2 text-center text-black bg-center rounded-lg fill-current stroke-none bg-gradient-to-tl from-purple-700 to-pink-500">
{% include 'svg/my_41.svg' %}
</div>
</div>
Account
</div>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/pages/account/settings.html">
<span class="pl-4">
Settings
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/pages/account/billing.html">
<span class="pl-4">
Billing
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/pages/account/invoice.html">
<span class="pl-4">
Invoice
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/pages/account/security.html">
<span class="pl-4">
Security
</span>
</a>
<div class="flex items-center px-0 py-2 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
<div class="inline-block">
<div class="flex items-center justify-center w-6 h-6 mr-2 text-center text-black bg-center rounded-lg fill-current stroke-none bg-gradient-to-tl from-purple-700 to-pink-500">
{% include 'svg/my_42.svg' %}
</div>
</div>
Extra
</div>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/pages/pricing-page.html">
<span class="pl-4">
Pricing Page
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/pages/messages.html">
<span class="pl-4">
Messages
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/pages/rtl-page.html">
<span class="pl-4">
RTL Page
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/pages/widgets.html">
<span class="pl-4">
Widgets
</span>
</a>
</div>
</div>
</div>
</div>
<div class="lg:hidden">
<div class="flex items-center py-2 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
<div class="inline-block">
<div class="flex items-center justify-center w-6 h-6 mr-2 text-center text-black bg-center rounded-lg fill-current bg-gradient-to-tl from-purple-700 to-pink-500 stroke-none">
{% include 'svg/my_39.svg' %}
</div>
</div>
Dashboards
</div>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/dashboards/default.html">
Default
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/dashboards/automotive.html">
Automotive
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/dashboards/smart-home.html">
Smart Home
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/dashboards/vr/vr-default.html">
Virtual Reality
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/dashboards/crm.html">
CRM
</a>
<div class="flex items-center py-2 mt-4 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
<div class="inline-block">
<div class="flex items-center justify-center w-6 h-6 mr-2 text-center text-black bg-center rounded-lg fill-current bg-gradient-to-tl from-purple-700 to-pink-500 stroke-none">
{% include 'svg/my_38.svg' %}
</div>
</div>
Users
</div>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/pages/users/reports.html">
Reports
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/pages/users/new-user.html">
New user
</a>
<div class="flex items-center py-2 mt-4 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
<div class="inline-block">
<div class="flex items-center justify-center w-6 h-6 mr-2 text-center text-black bg-center rounded-lg fill-current bg-gradient-to-tl from-purple-700 to-pink-500 stroke-none">
{% include 'svg/my_41.svg' %}
</div>
</div>
Profile
</div>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/pages/profile/overview.html">
Overview
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/pages/profile/teams.html">
Teams
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/pages/profile/projects.html">
Projects
</a>
<div class="flex items-center py-2 mt-4 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
<div class="inline-block">
<div class="flex items-center justify-center w-6 h-6 mr-2 text-center text-black bg-center rounded-lg fill-current bg-gradient-to-tl from-purple-700 to-pink-500 stroke-none">
{% include 'svg/my_40.svg' %}
</div>
</div>
Projects
</div>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/pages/projects/general.html">
General
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/pages/projects/timeline.html">
Timeline
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/pages/projects/new-project.html">
New Project
</a>
<div class="flex items-center py-2 mt-4 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
<div class="inline-block">
<div class="flex items-center justify-center w-6 h-6 mr-2 text-center text-black bg-center rounded-lg fill-current bg-gradient-to-tl from-purple-700 to-pink-500 stroke-none">
{% include 'svg/my_42.svg' %}
</div>
</div>
Account
</div>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/pages/account/settings.html">
Settings
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/pages/account/billing.html">
Billing
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/pages/account/invoice.html">
Invoice
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/pages/account/security.html">
Security
</a>
<div class="flex items-center py-2 mt-4 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
<div class="inline-block">
<div class="flex items-center justify-center w-6 h-6 mr-2 text-center text-black bg-center rounded-lg fill-current bg-gradient-to-tl from-purple-700 to-pink-500 stroke-none">
{% include 'svg/my_43.svg' %}
</div>
</div>
Extra
</div>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/pages/pricing-page.html">
Pricing Page
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/pages/messages.html">
Messages
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/pages/rtl-page.html">
RTL Page
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/pages/widgets.html">
Widgets
</a>
</div>
</div>
</li>
<li class="relative mx-2 md-max:static group lg:after:content-[''] lg:after:top-0 lg:hover:after:top-full lg:after:absolute lg:after:left-0 lg:after:-bottom-6 lg:after:w-full lg:after:h-full">
<a aria-expanded="false" class="flex items-center justify-between px-4 py-2 pl-2 font-normal text-white transition-all cursor-pointer select-none lg:group-hover:opacity-75 lg-max:text-slate-700 ease-soft-in-out lg:px-2 text-sm" nav-dropdown-trigger="authentication" role="button">
Authentication
<img alt="down-arrow" class="hidden ml-1 lg:block" src="/static/img/down-arrow-white.svg"/>
<img alt="down-arrow" class="block ml-1 lg:hidden" src="/static/img/down-arrow-dark.svg"/>
</a>
<div class="lg:group-hover:pointer-events-auto lg:group-hover:transform-dropdown-show lg:group-hover:opacity-100 lg:group-hover:before:-top-4.8 sm-max:right-auto md-max:left-0 md-max:right-0 lg-max:bg-transparent lg-max:overflow-scroll lg-max:relative lg-max:shadow-none lg-max:transform-none lg-max:block lg-max:h-0 lg-max:transition-all lg-max:duration-350 lg-max:ease-soft lg-max:pt-0 lg-max:pb-0 lg-max:opacity-0 lg-max:top-0 lg-max:origin-top lg-max:pointer-events-none static p-4 m-0 mt-0 text-left list-none bg-white rounded-2xl lg:mt-4 lg:min-w-92 lg:absolute z-100 text-sm text-slate-500 bg-clip-padding lg:shadow-soft-3xl lg:cursor-pointer lg:transition-all lg:duration-250 lg:block lg:opacity-0 lg:top-0 lg:origin-top lg:pointer-events-none lg:transform-dropdown lg:before:font-awesome lg:before:content-['\f0d8'] lg:before:absolute lg:before:top-0 lg:before:left-7 lg:before:right-auto lg:before:text-5.5 lg:before:text-white lg:before:transition-all lg:before:duration-350 lg:before:ease-soft" nav-dropdown="authentication">
<div class="flex-wrap hidden -mx-3 lg:flex">
<div class="w-6/12 max-w-full px-3 flex-0">
<div class="flex relative w-full h-full py-16 rounded-xl bg-cover bg-[url('../../assets/img/curved-images/curved8.jpg')]">
<div class="absolute top-0 left-0 w-full h-full bg-center bg-cover opacity-80 rounded-xl bg-gradient-to-tl from-purple-700 to-pink-500">
</div>
<div class="flex flex-col items-center justify-center w-full font-semibold text-center text-white z-1">
<div class="inline-block w-12 h-12 text-center text-black bg-white bg-center fill-current stroke-none shadow-soft-2xl rounded-circle">
<i class="ni leading-none ni-diamond bg-gradient-to-tl from-purple-700 to-pink-500 bg-clip-text text-transparent opacity-80 relative z-1 text-lg top-3.5">
</i>
</div>
<span class="mt-2 text-lg">
Explore our
<br/>
utilities pages
</span>
</div>
</div>
</div>
<div class="flex flex-col justify-center w-6/12 max-w-full px-3 pl-0 flex-0">
<ul class="flex flex-col pl-0 mb-0 rounded-lg">
<li class="after:absolute after:content-[''] after:h-full after:left-full after:w-1/2 after:bottom-0 relative block p-0 bg-white border-0 rounded-t-lg" nav-nested-menu-trigger="">
<a class="select-none hover:text-slate-700 hover:bg-gray-200 flex w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit bg-transparent border-0 justify-between items-center mb-1 pl-4 rounded-lg lg:transition-colors lg:duration-300 lg:ease-soft">
<span>
Sign In
</span>
<img alt="down-arrow" class="lg:-rotate-90" src="/static/img/down-arrow.svg"/>
</a>
<div class="z-100 hidden min-w-44 px-2 py-4 m-0 text-sm text-left list-none bg-white bg-clip-padding rounded-lg mt-0 static lg:cursor-pointer lg:shadow-soft-3xl lg:transition-all lg:duration-250 lg:absolute lg:block lg:opacity-0 lg:origin-top lg:pointer-events-none lg:transform-dropdown-nested -right-50 left-auto top-0 lg:before:font-awesome lg:before:content-['\f0d8'] lg:before:absolute lg:before:top-0 lg:before:left-0 lg:before:right-auto lg:before:text-5.5 lg:before:text-white lg:before:transition-all lg:before:duration-350 lg:before:ease-soft lg:before:-z-1 lg:before:-rotate-90" nav-nested-menu="">
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg mb-1" href="../../../pages/authentication/signin/basic.html">
<span>
Basic
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg mb-1" href="../../../pages/authentication/signin/cover.html">
<span>
Cover
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg mb-1" href="../../../pages/authentication/signin/illustration.html">
<span>
Illustration
</span>
</a>
</div>
</li>
<li class="after:absolute after:content-[''] after:h-full after:left-full after:w-1/2 after:bottom-0 relative block p-0 bg-white border-0" nav-nested-menu-trigger="">
<a class="select-none hover:text-slate-700 hover:bg-gray-200 flex w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit bg-transparent border-0 justify-between items-center mb-1 pl-4 rounded-lg lg:transition-colors lg:duration-300 lg:ease-soft">
<span>
Sign Up
</span>
<img alt="down-arrow" class="lg:-rotate-90" src="/static/img/down-arrow.svg"/>
</a>
<div class="z-100 hidden min-w-44 px-2 py-4 m-0 text-sm text-left list-none bg-white bg-clip-padding rounded-lg mt-0 static lg:cursor-pointer lg:shadow-soft-3xl lg:transition-all lg:duration-250 lg:absolute lg:block lg:opacity-0 lg:origin-top lg:pointer-events-none lg:transform-dropdown-nested -right-50 left-auto top-0 lg:before:font-awesome lg:before:content-['\f0d8'] lg:before:absolute lg:before:top-0 lg:before:left-0 lg:before:right-auto lg:before:text-5.5 lg:before:text-white lg:before:transition-all lg:before:duration-350 lg:before:ease-soft lg:before:-z-1 lg:before:-rotate-90" nav-nested-menu="">
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg mb-1" href="../../../pages/authentication/signup/basic.html">
<span>
Basic
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg mb-1" href="../../../pages/authentication/signup/cover.html">
<span>
Cover
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg mb-1" href="../../../pages/authentication/signup/illustration.html">
<span>
Illustration
</span>
</a>
</div>
</li>
<li class="after:absolute after:content-[''] after:h-full after:left-full after:w-1/2 after:bottom-0 relative block p-0 bg-white border-0" nav-nested-menu-trigger="">
<a class="select-none hover:text-slate-700 hover:bg-gray-200 flex w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit bg-transparent border-0 justify-between items-center mb-1 pl-4 rounded-lg lg:transition-colors lg:duration-300 lg:ease-soft">
<span>
Reset Password
</span>
<img alt="down-arrow" class="lg:-rotate-90" src="/static/img/down-arrow.svg"/>
</a>
<div class="z-100 hidden min-w-44 px-2 py-4 m-0 text-sm text-left list-none bg-white bg-clip-padding rounded-lg mt-0 static lg:cursor-pointer lg:shadow-soft-3xl lg:transition-all lg:duration-250 lg:absolute lg:block lg:opacity-0 lg:origin-top lg:pointer-events-none lg:transform-dropdown-nested -right-50 left-auto top-0 lg:before:font-awesome lg:before:content-['\f0d8'] lg:before:absolute lg:before:top-0 lg:before:left-0 lg:before:right-auto lg:before:text-5.5 lg:before:text-white lg:before:transition-all lg:before:duration-350 lg:before:ease-soft lg:before:-z-1 lg:before:-rotate-90" nav-nested-menu="">
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg mb-1" href="../../../pages/authentication/reset/basic.html">
<span>
Basic
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg mb-1" href="../../../pages/authentication/reset/cover.html">
<span>
Cover
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg mb-1" href="../../../pages/authentication/reset/illustration.html">
<span>
Illustration
</span>
</a>
</div>
</li>
<li class="after:absolute after:content-[''] after:h-full after:left-full after:w-1/2 after:bottom-0 relative block p-0 bg-white border-0" nav-nested-menu-trigger="">
<a class="select-none hover:text-slate-700 hover:bg-gray-200 flex w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit bg-transparent border-0 justify-between items-center mb-1 pl-4 rounded-lg lg:transition-colors lg:duration-300 lg:ease-soft">
<span>
Lock
</span>
<img alt="down-arrow" class="lg:-rotate-90" src="/static/img/down-arrow.svg"/>
</a>
<div class="z-100 hidden min-w-44 px-2 py-4 m-0 text-sm text-left list-none bg-white bg-clip-padding rounded-lg mt-0 static lg:cursor-pointer lg:shadow-soft-3xl lg:transition-all lg:duration-250 lg:absolute lg:block lg:opacity-0 lg:origin-top lg:pointer-events-none lg:transform-dropdown-nested -right-50 left-auto top-0 lg:before:font-awesome lg:before:content-['\f0d8'] lg:before:absolute lg:before:top-0 lg:before:left-0 lg:before:right-auto lg:before:text-5.5 lg:before:text-white lg:before:transition-all lg:before:duration-350 lg:before:ease-soft lg:before:-z-1 lg:before:-rotate-90" nav-nested-menu="">
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg mb-1" href="../../../pages/authentication/lock/basic.html">
<span>
Basic
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg mb-1" href="../../../pages/authentication/lock/cover.html">
<span>
Cover
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg mb-1" href="../../../pages/authentication/lock/illustration.html">
<span>
Illustration
</span>
</a>
</div>
</li>
<li class="after:absolute after:content-[''] after:h-full after:left-full after:w-1/2 after:bottom-0 relative block p-0 bg-white border-0" nav-nested-menu-trigger="">
<a class="select-none hover:text-slate-700 hover:bg-gray-200 flex w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit bg-transparent border-0 justify-between items-center mb-1 pl-4 rounded-lg lg:transition-colors lg:duration-300 lg:ease-soft">
<span>
2-Step Verification
</span>
<img alt="down-arrow" class="lg:-rotate-90" src="/static/img/down-arrow.svg"/>
</a>
<div class="z-100 hidden min-w-44 px-2 py-4 m-0 text-sm text-left list-none bg-white bg-clip-padding rounded-lg mt-0 static lg:cursor-pointer lg:shadow-soft-3xl lg:transition-all lg:duration-250 lg:absolute lg:block lg:opacity-0 lg:origin-top lg:pointer-events-none lg:transform-dropdown-nested -right-50 left-auto top-0 lg:before:font-awesome lg:before:content-['\f0d8'] lg:before:absolute lg:before:top-0 lg:before:left-0 lg:before:right-auto lg:before:text-5.5 lg:before:text-white lg:before:transition-all lg:before:duration-350 lg:before:ease-soft lg:before:-z-1 lg:before:-rotate-90" nav-nested-menu="">
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg mb-1" href="../../../pages/authentication/verification/basic.html">
<span>
Basic
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg mb-1" href="../../../pages/authentication/verification/cover.html">
<span>
Cover
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg mb-1" href="../../../pages/authentication/verification/illustration.html">
<span>
Illustration
</span>
</a>
</div>
</li>
<li class="after:absolute after:content-[''] after:h-full after:left-full after:w-1/2 after:bottom-0 relative block p-0 bg-white border-0 rounded-b-lg" nav-nested-menu-trigger="">
<a class="select-none hover:text-slate-700 hover:bg-gray-200 flex w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit bg-transparent border-0 justify-between items-center mb-1 pl-4 rounded-lg lg:transition-colors lg:duration-300 lg:ease-soft">
<span>
Error
</span>
<img alt="down-arrow" class="lg:-rotate-90" src="/static/img/down-arrow.svg"/>
</a>
<div class="z-100 hidden min-w-44 px-2 py-4 m-0 text-sm text-left list-none bg-white bg-clip-padding rounded-lg mt-0 static lg:cursor-pointer lg:shadow-soft-3xl lg:transition-all lg:duration-250 lg:absolute lg:block lg:opacity-0 lg:origin-top lg:pointer-events-none lg:transform-dropdown-nested -right-50 left-auto top-0 lg:before:font-awesome lg:before:content-['\f0d8'] lg:before:absolute lg:before:top-0 lg:before:left-0 lg:before:right-auto lg:before:text-5.5 lg:before:text-white lg:before:transition-all lg:before:duration-350 lg:before:ease-soft lg:before:-z-1 lg:before:-rotate-90" nav-nested-menu="">
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg mb-1" href="../../../pages/authentication/error/404.html">
<span>
404
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg mb-1" href="../../../pages/authentication/error/500.html">
<span>
500
</span>
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="flex flex-wrap -mx-3 lg:hidden">
<div class="flex flex-col justify-center w-full max-w-full px-3 flex-0">
<h6 class="flex px-0 py-2 mb-0 font-bold text-sm text-slate-700 whitespace-nowrap">
Sign In
</h6>
<a class="block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/authentication/signin/basic.html">
Basic
</a>
<a class="block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/authentication/signin/cover.html">
Cover
</a>
<a class="block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/authentication/signin/illustration.html">
Illustration
</a>
<h6 class="flex px-0 py-2 mt-4 mb-0 font-bold text-sm text-slate-700 whitespace-nowrap">
Sign Up
</h6>
<a class="block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/authentication/signup/basic.html">
Basic
</a>
<a class="block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/authentication/signup/cover.html">
Cover
</a>
<a class="block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/authentication/signup/illustration.html">
Illustration
</a>
<h6 class="flex px-0 py-2 mt-4 mb-0 font-bold text-sm text-slate-700 whitespace-nowrap">
Reset Password
</h6>
<a class="block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/authentication/reset/basic.html">
Basic
</a>
<a class="block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/authentication/reset/cover.html">
Cover
</a>
<a class="block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/authentication/reset/illustration.html">
Illustation
</a>
<h6 class="flex px-0 py-2 mt-4 mb-0 font-bold text-sm text-slate-700 whitespace-nowrap">
Lock
</h6>
<a class="block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/authentication/lock/basic.html">
Basic
</a>
<a class="block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/authentication/lock/cover.html">
Cover
</a>
<a class="block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/authentication/lock/illustration.html">
Illustration
</a>
<h6 class="flex px-0 py-2 mt-4 mb-0 font-bold text-sm text-slate-700 whitespace-nowrap">
2-Step Verification
</h6>
<a class="block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/authentication/verification/basic.html">
Basic
</a>
<a class="block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/authentication/verification/cover.html">
Cover
</a>
<a class="block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/authentication/verification/illustration.html">
Illustration
</a>
<h6 class="flex px-0 py-2 mt-4 mb-0 font-bold text-sm text-slate-700 whitespace-nowrap">
Error
</h6>
<a class="block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/authentication/error/404.html">
404
</a>
<a class="block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/authentication/error/500.html">
500
</a>
</div>
</div>
</div>
</li>
<li class="relative mx-2 md-max:static group lg:after:content-[''] lg:after:top-0 lg:hover:after:top-full lg:after:absolute lg:after:left-0 lg:after:-bottom-6 lg:after:w-full lg:after:h-full">
<a aria-expanded="false" class="flex items-center justify-between px-4 py-2 pl-2 font-normal text-white transition-all cursor-pointer select-none lg:group-hover:opacity-75 lg-max:text-slate-700 ease-soft-in-out lg:px-2 text-sm" nav-dropdown-trigger="applications" role="button">
Applications
<img alt="down-arrow" class="hidden ml-1 lg:block" src="/static/img/down-arrow-white.svg"/>
<img alt="down-arrow" class="block ml-1 lg:hidden" src="/static/img/down-arrow-dark.svg"/>
</a>
<div class="lg:group-hover:pointer-events-auto lg:group-hover:transform-dropdown-show lg:group-hover:opacity-100 lg:group-hover:before:-top-4.8 sm-max:right-auto md-max:left-0 md-max:right-0 lg-max:bg-transparent lg-max:overflow-scroll lg-max:relative lg-max:shadow-none lg-max:transform-none lg-max:block lg-max:h-0 lg-max:transition-all lg-max:duration-350 lg-max:ease-soft lg-max:pt-0 lg-max:pb-0 lg-max:opacity-0 lg-max:top-0 lg-max:origin-top lg-max:pointer-events-none static p-4 m-0 mt-0 text-left list-none bg-white rounded-xl lg:mt-4 lg:min-w-60 lg:absolute z-100 text-sm text-slate-500 bg-clip-padding lg:shadow-soft-3xl lg:cursor-pointer lg:transition-all lg:duration-250 lg:block lg:opacity-0 lg:top-0 lg:origin-top lg:pointer-events-none lg:transform-dropdown lg:before:font-awesome lg:before:content-['\f0d8'] lg:before:absolute lg:before:top-0 lg:before:left-7 lg:before:right-auto lg:before:text-5.5 lg:before:text-white lg:before:transition-all lg:before:duration-350 lg:before:ease-soft" nav-dropdown="applications">
<div class="hidden lg:flex">
<ul class="flex flex-col w-full pl-0 mb-0 list-none">
<li class="relative block p-0 bg-white border-0 rounded-t-lg">
<a class="block clear-both w-full px-4 py-2 font-normal bg-transparent border-0 rounded-lg text-slate-500 hover:text-slate-700 hover:bg-gray-200 text-align-inherit whitespace-nowrap lg:transition-colors lg:duration-300 lg:ease-soft" href="../../../pages/applications/kanban.html">
<div class="flex">
<div class="flex mt-1 mr-4 text-black fill-current h-4 w-4 stroke-none">
<i class="relative text-transparent ni leading-none ni-single-copy-04 bg-gradient-to-tl from-purple-700 to-pink-500 bg-clip-text z-1">
</i>
</div>
<div class="flex items-center justify-between w-full">
<div>
<p class="block p-0 mb-0 text-sm whitespace-nowrap text-slate-700">
Kanban
</p>
</div>
</div>
</div>
</a>
</li>
<li class="relative block p-0 bg-white border-0">
<a class="block clear-both w-full px-4 py-2 font-normal bg-transparent border-0 rounded-lg text-slate-500 hover:text-slate-700 hover:bg-gray-200 text-align-inherit whitespace-nowrap lg:transition-colors lg:duration-300 lg:ease-soft" href="../../../pages/applications/wizard.html">
<div class="flex">
<div class="flex mt-1 mr-4 text-black fill-current h-4 w-4 stroke-none">
<i class="relative text-transparent ni leading-none ni-laptop bg-gradient-to-tl from-purple-700 to-pink-500 bg-clip-text z-1">
</i>
</div>
<div class="flex items-center justify-between w-full">
<div>
<p class="block p-0 mb-0 text-sm whitespace-nowrap text-slate-700">
Wizard
</p>
</div>
</div>
</div>
</a>
</li>
<li class="relative block p-0 bg-white border-0">
<a class="block clear-both w-full px-4 py-2 font-normal bg-transparent border-0 rounded-lg text-slate-500 hover:text-slate-700 hover:bg-gray-200 text-align-inherit whitespace-nowrap lg:transition-colors lg:duration-300 lg:ease-soft" href="../../../pages/applications/datatables.html">
<div class="flex">
<div class="flex mt-1 mr-4 text-black fill-current h-4 w-4 stroke-none">
<i class="relative text-transparent ni leading-none ni-badge bg-gradient-to-tl from-purple-700 to-pink-500 bg-clip-text z-1">
</i>
</div>
<div class="flex items-center justify-between w-full">
<div>
<p class="block p-0 mb-0 text-sm whitespace-nowrap text-slate-700">
DataTables
</p>
</div>
</div>
</div>
</a>
</li>
<li class="relative block p-0 bg-white border-0 rounded-b-lg">
<a class="block clear-both w-full px-4 py-2 font-normal bg-transparent border-0 rounded-lg text-slate-500 hover:text-slate-700 hover:bg-gray-200 text-align-inherit whitespace-nowrap lg:transition-colors lg:duration-300 lg:ease-soft" href="../../../pages/applications/calendar.html">
<div class="flex">
<div class="flex mt-1 mr-4 text-black fill-current h-4 w-4 stroke-none">
<i class="relative text-transparent ni leading-none ni-notification-70 bg-gradient-to-tl from-purple-700 to-pink-500 bg-clip-text z-1">
</i>
</div>
<div class="flex items-center justify-between w-full">
<div>
<p class="block p-0 mb-0 text-sm whitespace-nowrap text-slate-700">
Calendar
</p>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="flex flex-wrap -mx-3 lg:hidden">
<div class="w-full max-w-full px-3 md:w-full md:flex-0 shrink-0">
<a class="py-2 pl-4 rounded-lg" href="../../../pages/applications/kanban.html">
<div class="flex">
<div class="flex mt-1 mr-4 text-black fill-current stroke-none h-4 w-4">
<i class="relative text-transparent ni leading-none ni-single-copy-04 bg-gradient-to-tl from-purple-700 to-pink-500 bg-clip-text z-1">
</i>
</div>
<div class="flex items-center justify-between w-full">
<div>
<p class="block p-0 mb-0 text-sm whitespace-nowrap text-slate-700">
Kanban
</p>
</div>
</div>
</div>
</a>
<a class="py-2 pl-4 rounded-lg" href="../../../pages/applications/wizard.html">
<div class="flex">
<div class="flex mt-1 mr-4 text-black fill-current stroke-none h-4 w-4">
<i class="relative text-transparent ni leading-none ni-laptop bg-gradient-to-tl from-purple-700 to-pink-500 bg-clip-text z-1">
</i>
</div>
<div class="flex items-center justify-between w-full">
<div>
<p class="block p-0 mb-0 text-sm whitespace-nowrap text-slate-700">
Wizard
</p>
</div>
</div>
</div>
</a>
<a class="py-2 pl-4 rounded-lg" href="../../../pages/applications/datatables.html">
<div class="flex">
<div class="flex mt-1 mr-4 text-black fill-current stroke-none h-4 w-4">
<i class="relative text-transparent ni leading-none ni-badge bg-gradient-to-tl from-purple-700 to-pink-500 bg-clip-text z-1">
</i>
</div>
<div class="flex items-center justify-between w-full">
<div>
<p class="block p-0 mb-0 text-sm whitespace-nowrap text-slate-700">
DataTables
</p>
</div>
</div>
</div>
</a>
<a class="py-2 pl-4 rounded-lg" href="../../../pages/applications/calendar.html">
<div class="flex">
<div class="flex mt-1 mr-4 text-black fill-current stroke-none h-4 w-4">
<i class="relative text-transparent ni leading-none ni-notification-70 bg-gradient-to-tl from-purple-700 to-pink-500 bg-clip-text z-1">
</i>
</div>
<div class="flex items-center justify-between w-full">
<div>
<p class="block p-0 mb-0 text-sm whitespace-nowrap text-slate-700">
Calendar
</p>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="relative mx-2 md-max:static group lg:after:content-[''] lg:after:top-0 lg:hover:after:top-full lg:after:absolute lg:after:left-0 lg:after:-bottom-6 lg:after:w-full lg:after:h-full">
<a aria-expanded="false" class="flex items-center justify-between px-4 py-2 pl-2 font-normal text-white transition-all cursor-pointer select-none lg:group-hover:opacity-75 lg-max:text-slate-700 ease-soft-in-out lg:px-2 text-sm" nav-dropdown-trigger="ecommerce" role="button">
Ecommerce
<img alt="down-arrow" class="hidden ml-1 lg:block" src="/static/img/down-arrow-white.svg"/>
<img alt="down-arrow" class="block ml-1 lg:hidden" src="/static/img/down-arrow-dark.svg"/>
</a>
<div class="lg:group-hover:pointer-events-auto lg:group-hover:transform-dropdown-show lg:group-hover:opacity-100 lg:group-hover:before:-top-4.8 sm-max:right-auto md-max:left-0 md-max:right-0 lg-max:bg-transparent lg-max:overflow-scroll lg-max:relative lg-max:shadow-none lg-max:transform-none lg-max:block lg-max:h-0 lg-max:transition-all lg-max:duration-350 lg-max:ease-soft lg-max:pt-0 lg-max:pb-0 lg-max:opacity-0 lg-max:top-0 lg-max:origin-top lg-max:pointer-events-none static p-4 m-0 mt-0 text-left list-none bg-white rounded-2xl lg:mt-4 lg:min-w-92 lg:absolute z-100 text-sm text-slate-500 bg-clip-padding lg:shadow-soft-3xl lg:cursor-pointer lg:transition-all lg:duration-250 lg:block lg:opacity-0 lg:top-0 lg:origin-top lg:pointer-events-none lg:transform-dropdown lg:before:font-awesome lg:before:content-['\f0d8'] lg:before:absolute lg:before:top-0 lg:before:left-7 lg:before:right-auto lg:before:text-5.5 lg:before:text-white lg:before:transition-all lg:before:duration-350 lg:before:ease-soft" nav-dropdown="ecommerce">
<div class="flex-wrap hidden -mx-3 lg:flex">
<div class="w-full max-w-full px-6 py-2 flex-0">
<div class="flex flex-wrap -mx-3">
<div class="relative w-6/12 max-w-full px-3 flex-0">
<div class="flex items-center px-0 py-2 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
<div class="inline-block">
<div class="flex items-center justify-center w-6 h-6 mr-2 text-center text-black bg-center rounded-lg fill-current stroke-none bg-gradient-to-tl from-purple-700 to-pink-500">
{% include 'svg/my_42.svg' %}
</div>
</div>
Orders
</div>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/ecommerce/orders/list.html">
<span class="pl-4">
Order List
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/ecommerce/orders/details.html">
<span class="pl-4">
Order Details
</span>
</a>
<div class="flex items-center px-0 py-2 mt-4 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
<div class="inline-block">
<div class="flex items-center justify-center w-6 h-6 mr-2 text-center text-black bg-center rounded-lg fill-current stroke-none bg-gradient-to-tl from-purple-700 to-pink-500">
{% include 'svg/my_40.svg' %}
</div>
</div>
General
</div>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/ecommerce/overview.html">
<span class="pl-4">
Overview
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/ecommerce/referral.html">
<span class="pl-4">
Referral
</span>
</a>
<hr class="absolute top-0 right-0 w-px h-full bg-transparent bg-gradient-to-b from-transparent via-black/40 to-transparent"/>
</div>
<div class="relative w-6/12 max-w-full px-3 flex-0">
<div class="flex items-center px-0 py-2 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
<div class="inline-block">
<div class="flex items-center justify-center w-6 h-6 mr-2 text-center text-black bg-center rounded-lg fill-current stroke-none bg-gradient-to-tl from-purple-700 to-pink-500">
{% include 'svg/my_39.svg' %}
</div>
</div>
Products
</div>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/ecommerce/products/new-product.html">
<span class="pl-4">
New Product
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/ecommerce/products/edit-product.html">
<span class="pl-4">
Edit Product
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/ecommerce/products/product-page.html">
<span class="pl-4">
Product Page
</span>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="../../../pages/ecommerce/products/products-list.html">
<span class="pl-4">
Products List
</span>
</a>
</div>
</div>
</div>
</div>
<div class="lg:hidden">
<div class="flex items-center py-2 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
<div class="inline-block">
<div class="flex items-center justify-center w-6 h-6 mr-2 text-center text-black bg-center rounded-lg fill-current bg-gradient-to-tl from-purple-700 to-pink-500 stroke-none">
{% include 'svg/my_42.svg' %}
</div>
</div>
Orders
</div>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/ecommerce/orders/list.html">
Order List
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/ecommerce/orders/details.html">
Order Details
</a>
<div class="flex items-center py-2 mt-4 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
<div class="inline-block">
<div class="flex items-center justify-center w-6 h-6 mr-2 text-center text-black bg-center rounded-lg fill-current bg-gradient-to-tl from-purple-700 to-pink-500 stroke-none">
{% include 'svg/my_40.svg' %}
</div>
</div>
General
</div>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/ecommerce/overview.html">
Overview
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/ecommerce/referral.html">
Referral
</a>
<div class="flex items-center py-2 mt-4 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
<div class="inline-block">
<div class="flex items-center justify-center w-6 h-6 mr-2 text-center text-black bg-center rounded-lg fill-current bg-gradient-to-tl from-purple-700 to-pink-500 stroke-none">
{% include 'svg/my_39.svg' %}
</div>
</div>
Products
</div>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/ecommerce/products/new-product.html">
New Product
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/ecommerce/products/edit-product.html">
Edit Product
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/ecommerce/products/product-page.html">
Product Page
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 rounded-lg" href="../../../pages/ecommerce/products/products-list.html">
Products List
</a>
</div>
</div>
</li>
<li class="relative mx-2 md-max:static group lg:after:content-[''] lg:after:top-0 lg:hover:after:top-full lg:after:absolute lg:after:left-0 lg:after:-bottom-6 lg:after:w-full lg:after:h-full">
<a aria-expanded="false" class="flex items-center justify-between px-4 py-2 pl-2 font-normal text-white transition-all cursor-pointer select-none lg:group-hover:opacity-75 lg-max:text-slate-700 ease-soft-in-out lg:px-2 text-sm" nav-dropdown-trigger="docs" role="button">
Docs
<img alt="down-arrow" class="hidden ml-1 lg:block" src="/static/img/down-arrow-white.svg"/>
<img alt="down-arrow" class="block ml-1 lg:hidden" src="/static/img/down-arrow-dark.svg"/>
</a>
<div class="lg:group-hover:pointer-events-auto lg:group-hover:transform-dropdown-show lg:group-hover:opacity-100 lg:group-hover:before:-top-4.8 sm-max:right-auto md-max:left-0 md-max:right-0 lg-max:bg-transparent lg-max:overflow-scroll lg-max:relative lg-max:shadow-none lg-max:transform-none lg-max:block lg-max:h-0 lg-max:transition-all lg-max:duration-350 lg-max:ease-soft lg-max:pt-0 lg-max:pb-0 lg-max:opacity-0 lg-max:top-0 lg-max:origin-top lg-max:pointer-events-none static p-4 m-0 mt-0 text-left list-none bg-white rounded-2xl lg:mt-4 lg:min-w-92 lg:absolute z-100 text-sm text-slate-500 bg-clip-padding lg:shadow-soft-3xl lg:cursor-pointer lg:transition-all lg:duration-250 lg:block lg:opacity-0 lg:top-0 lg:origin-top lg:pointer-events-none lg:transform-dropdown lg:before:font-awesome lg:before:content-['\f0d8'] lg:before:absolute lg:before:top-0 lg:before:left-7 lg:before:right-auto lg:before:text-5.5 lg:before:text-white lg:before:transition-all lg:before:duration-350 lg:before:ease-soft" nav-dropdown="docs">
<div class="hidden lg:block">
<ul class="flex flex-col pl-0 mx-auto mb-0 list-none">
<li class="relative block p-0 bg-white border-0 rounded-t-lg">
<a class="block clear-both w-full px-4 py-2 font-normal bg-transparent border-0 rounded-lg hover:text-slate-700 hover:bg-gray-200 text-slate-500 text-align-inherit whitespace-nowrap lg:transition-colors lg:duration-300 lg:ease-soft" href="https://www.creative-tim.com/learning-lab/tailwind/html/what-is-tailwind-css/soft-ui-dashboard/">
<div class="flex">
<div class="flex mt-1 mr-4 text-black fill-current h-4 w-4 stroke-none">
{% include 'svg/my_44.svg' %}
</div>
<div>
<h6 class="flex p-0 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
Getting Started
</h6>
<span class="leading-normal text-sm">
All about overview, quick start, license and contents
</span>
</div>
</div>
</a>
</li>
<li class="relative block p-0 bg-white border-0">
<a class="block clear-both w-full px-4 py-2 font-normal bg-transparent border-0 rounded-lg hover:text-slate-700 hover:bg-gray-200 text-slate-500 text-align-inherit whitespace-nowrap lg:transition-colors lg:duration-300 lg:ease-soft" href="https://www.creative-tim.com/learning-lab/tailwind/html/colors/soft-ui-dashboard/">
<div class="flex">
<div class="flex mt-1 mr-4 text-black fill-current h-4 w-4 stroke-none">
{% include 'svg/my_45.svg' %}
</div>
<div>
<h6 class="flex p-0 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
Foundation
</h6>
<span class="leading-normal text-sm">
See our colors, icons and typography
</span>
</div>
</div>
</a>
</li>
<li class="relative block p-0 bg-white border-0">
<a class="block clear-both w-full px-4 py-2 font-normal bg-transparent border-0 rounded-lg hover:text-slate-700 hover:bg-gray-200 text-slate-500 text-align-inherit whitespace-nowrap lg:transition-colors lg:duration-300 lg:ease-soft" href="https://www.creative-tim.com/learning-lab/tailwind/html/alert/soft-ui-dashboard/">
<div class="flex">
<div class="flex mt-1 mr-4 text-black fill-current h-4 w-4 stroke-none">
{% include 'svg/my_46.svg' %}
</div>
<div>
<h6 class="flex p-0 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
Components
</h6>
<span class="leading-normal text-sm">
Explore our collection of fully designed components
</span>
</div>
</div>
</a>
</li>
<li class="relative block p-0 bg-white border-0">
<a class="block clear-both w-full px-4 py-2 font-normal bg-transparent border-0 rounded-lg hover:text-slate-700 hover:bg-gray-200 text-slate-500 text-align-inherit whitespace-nowrap lg:transition-colors lg:duration-300 lg:ease-soft" href="https://www.creative-tim.com/learning-lab/tailwind/html/charts/soft-ui-dashboard/">
<div class="flex">
<div class="flex mt-1 mr-4 text-black fill-current h-4 w-4 stroke-none">
{% include 'svg/my_47.svg' %}
</div>
<div>
<h6 class="flex p-0 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
Plugins
</h6>
<span class="leading-normal text-sm">
Check how you can integrate our plugins
</span>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="flex flex-wrap -mx-3 lg:hidden">
<div class="w-full max-w-full p-0 shrink-0 md:flex-0 md:w-full">
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="https://www.creative-tim.com/learning-lab/tailwind/html/what-is-tailwind-css/soft-ui-dashboard/">
<div class="flex">
<div class="flex mt-1 mr-4 text-black fill-current h-4 w-4 stroke-none">
{% include 'svg/my_44.svg' %}
</div>
<div>
<h6 class="flex p-0 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
Getting Started
</h6>
<span class="leading-normal text-sm">
All about overview, quick start, license and contents
</span>
</div>
</div>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="https://www.creative-tim.com/learning-lab/tailwind/html/colors/soft-ui-dashboard/">
<div class="flex">
<div class="flex mt-1 mr-4 text-black fill-current h-4 w-4 stroke-none">
{% include 'svg/my_45.svg' %}
</div>
<div>
<h6 class="flex p-0 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
Foundation
</h6>
<span class="leading-normal text-sm">
See our colors, icons and typography
</span>
</div>
</div>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="https://www.creative-tim.com/learning-lab/tailwind/html/alert/soft-ui-dashboard/">
<div class="flex">
<div class="flex mt-1 mr-4 text-black fill-current h-4 w-4 stroke-none">
{% include 'svg/my_46.svg' %}
</div>
<div>
<h6 class="flex p-0 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
Components
</h6>
<span class="leading-normal text-sm">
Explore our collection of fully designed components
</span>
</div>
</div>
</a>
<a class="hover:text-slate-700 hover:bg-gray-200 block w-full px-4 py-1.2 clear-both font-normal text-slate-500 text-align-inherit whitespace-nowrap bg-transparent border-0 lg:transition-colors lg:duration-300 lg:ease-soft rounded-lg" href="https://www.creative-tim.com/learning-lab/tailwind/html/charts/soft-ui-dashboard/">
<div class="flex">
<div class="flex mt-1 mr-4 text-black fill-current h-4 w-4 stroke-none">
{% include 'svg/my_47.svg' %}
</div>
<div>
<h6 class="flex p-0 mb-0 font-bold text-sm whitespace-nowrap text-slate-700">
Plugins
</h6>
<span class="leading-normal text-sm">
Check how you can integrate our plugins
</span>
</div>
</div>
</a>
</div>
</div>
</div>
</li>
</ul>
<ul class="hidden pl-0 mb-0 list-none lg:block lg:flex-row">
<li>
<a class="inline-block px-8 py-2 mb-0 mr-1 font-bold text-center text-white uppercase align-middle border-0 cursor-pointer text-xs leading-pro bg-gradient-to-tl from-purple-700 to-pink-500 tracking-tight-soft shadow-soft-md bg-150 bg-x-25 rounded-7" href="https://www.creative-tim.com/product/soft-ui-dashboard-pro-tailwind" target="_blank">
Buy Now
</a>
</li>
</ul>
</div>
</div>
</nav>
<main class="mt-0 transition-all duration-200 ease-soft-in-out">
<div class="pb-56 pt-12 m-4 min-h-50-screen items-start rounded-xl p-0 relative overflow-hidden flex bg-cover bg-center bg-[url('../../assets/img/curved-images/curved8.jpg')]">
<span class="absolute top-0 left-0 w-full h-full bg-center bg-cover opacity-60 bg-gradient-to-tl from-gray-900 to-slate-800">
</span>
</div>
<div class="container">
<div class="flex flex-wrap justify-center -mx-3 -mt-48 lg:-mt-48 md:-mt-56">
<div class="w-full max-w-full px-3 mx-auto shrink-0 md:flex-0 md:w-7/12 lg:w-5/12 xl:w-4/12">
<div class="relative flex flex-col min-w-0 break-words bg-white border-0 lg:py-4 dark:bg-gray-950 dark:shadow-soft-dark-xl shadow-soft-xl rounded-2xl bg-clip-border">
<div class="flex-auto p-6 text-center">
<div class="mb-6">
<img alt="Avatar image" class="inline-flex items-center justify-center text-white transition-all duration-200 text-base rounded-xl ease-soft-in-out w-28 h-28" src="/static/img/team-4.jpg"/>
</div>
<h4 class="mb-0 font-bold">
Mike Priesler
</h4>
<p class="mb-6">
Enter password to unlock your account.
</p>
<form role="form">
<div class="mb-4">
<input 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" placeholder="Password" type="password"/>
</div>
<div class="text-center">
<button class="inline-block px-16 py-3.5 mb-0 mt-4 font-bold text-center text-white uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:scale-102 active:opacity-85 hover:shadow-soft-xs 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-sm ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25" type="button">
Unlock
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="py-12">
<div class="container">
<div class="flex flex-wrap -mx-3">
<div class="w-full max-w-full px-3 mx-auto mb-6 text-center shrink-0 lg:flex-0 lg:w-8/12">
<a class="mb-2 mr-4 text-slate-400 sm:mb-0 xl:mr-12" href="javascript:;" target="_blank">
Company
</a>
<a class="mb-2 mr-4 text-slate-400 sm:mb-0 xl:mr-12" href="javascript:;" target="_blank">
About Us
</a>
<a class="mb-2 mr-4 text-slate-400 sm:mb-0 xl:mr-12" href="javascript:;" target="_blank">
Team
</a>
<a class="mb-2 mr-4 text-slate-400 sm:mb-0 xl:mr-12" href="javascript:;" target="_blank">
Products
</a>
<a class="mb-2 mr-4 text-slate-400 sm:mb-0 xl:mr-12" href="javascript:;" target="_blank">
Blog
</a>
<a class="mb-2 mr-4 text-slate-400 sm:mb-0 xl:mr-12" href="javascript:;" target="_blank">
Pricing
</a>
</div>
<div class="w-full max-w-full px-3 mx-auto mt-2 mb-6 text-center shrink-0 lg:flex-0 lg:w-8/12">
<a class="mr-6 text-slate-400" href="javascript:;">
<span aria-hidden="true" class="text-lg fab fa-dribbble">
</span>
</a>
<a class="mr-6 text-slate-400" href="javascript:;">
<span aria-hidden="true" class="text-lg fab fa-twitter">
</span>
</a>
<a class="mr-6 text-slate-400" href="javascript:;">
<span aria-hidden="true" class="text-lg fab fa-instagram">
</span>
</a>
<a class="mr-6 text-slate-400" href="javascript:;">
<span aria-hidden="true" class="text-lg fab fa-pinterest">
</span>
</a>
<a class="mr-6 text-slate-400" href="javascript:;">
<span aria-hidden="true" class="text-lg fab fa-github">
</span>
</a>
</div>
</div>
<div class="flex flex-wrap -mx-3">
<div class="w-8/12 max-w-full px-3 mx-auto mt-1 text-center flex-0">
<p class="mb-0 text-slate-400">
Copyright ©
<script>
document.write(new Date().getFullYear())
</script>
Soft by Creative Tim.
</p>
</div>
</div>
</div>
</footer>
<!-- main script file -->
<script src="/static/js/soft-ui-dashboard-pro-tailwind.js">
</script>
</body>
</html>