Argon Dashboard 2 Pro Tailwind by Creative Tim

<!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>Argon Dashboard 2 Pro Tailwind by Creative Tim</title> <link rel="canonical" href="https://www.creative-tim.com/product/argon-dashboard-pro-tailwind" /> <meta name="keywords" content="creative tim, html dashboard, html css dashboard, web dashboard, tailwind dashboard, tailwind, tailwindcss, tailwind css, css3 dashboard, tailwind admin, Argon Dashboard 2 Tailwind, frontend, responsive tailwind dashboard, premium dashboard, premium admin dashboard, premium tailwind admin dashboard"> <meta name="description" content="Download Argon Tailwind CSS, a premium Tailwind CSS Admin Template developed by Creative Tim. Over 70 components, see the live demo on our site and join over 1,800,000 creatives!"> <meta name="twitter:card" content="product"> <meta name="twitter:site" content="@creativetim"> <meta name="twitter:title" content="Argon Dashboard Pro Tailwind: Premium Tailwind CSS Admin Template"> <meta name="twitter:description" content="Download Argon Tailwind CSS, a Premium Tailwind CSS Admin Template developed by Creative Tim. Over 70 components, see the live demo on our site and join over 1,800,000 creatives!"> <meta name="twitter:creator" content="@creativetim"> <meta name="twitter:image" content="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/argon-dashboard-pro-tailwind/argon-dashboard-2-pro-tailwind.jpg"> <meta property="fb:app_id" content="655968634437471"> <meta property="og:title" content="Argon Dashboard Pro Tailwind: Premium Tailwind CSS Admin Template"> <meta property="og:description" content="Download Argon Tailwind CSS, a Premium Tailwind CSS Admin Template developed by Creative Tim. Over 70 components, see the live demo on our site and join over 1,800,000 creatives!"> <meta property="og:type" content="article" /> <meta property="og:url" content="http://demos.creative-tim.com/argon-dashboard-pro-tailwind/pages/dashboards/default" /> <meta property="og:image" content="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/argon-dashboard-pro-tailwind/argon-dashboard-2-pro-tailwind.jpg" /> <meta property="og:site_name" content="Creative Tim" />  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />  <link href="../../assets/css/nucleo-icons.css" rel="stylesheet" /> <link href="../../assets/css/nucleo-svg.css" rel="stylesheet" />  <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>  <script src="https://unpkg.com/@popperjs/core@2"></script>  <link href="../../assets/css/argon-dashboard-tailwind.min.css?v=1.0.0" rel="stylesheet" /> <script> (function(a, s, y, n, c, h, i, d, e) { s.className += ' ' + y; h.start = 1 * new Date; h.end = i = function() { s.className = s.className.replace(RegExp(' ?' + y), '') }; (a[n] = a[n] || []).hide = h; setTimeout(function() { i(); h.end = null }, c); h.timeout = c; })(window, document.documentElement, 'async-hide', 'dataLayer', 4000, { 'GTM-K9BGS8K': true }); </script> <script> (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-46172202-22', 'auto', { allowLinker: true }); ga('set', 'anonymizeIp', true); ga('require', 'GTM-K9BGS8K'); ga('require', 'displayfeatures'); ga('require', 'linker'); ga('linker:autoLink', ["2checkout.com", "avangate.com"]); </script> <script> (function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-NKDMSK6'); </script> </head> <body class="m-0 font-sans text-base antialiased font-normal text-left leading-default dark:bg-slate-950 bg-gray-50 text-slate-500 dark:bg-slate-900 dark:text-white"> <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"> </iframe> </noscript> <div class="absolute w-full bg-[radial-gradient(circle_at_bottom_right,#3c9add,#191452)] h-full"></div>  <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 ease-in-out -translate-x-full bg-transparent border-0 shadow-none xl:ml-6 dark:bg-slate-850 z-990 max-w-64 rounded-2xl xl:translate-x-0" id="sidenav-main">  <div class="h-20">  <i class="absolute top-0 right-0 p-4 text-white opacity-50 cursor-pointer fas fa-times dark:text-white xl:hidden" aria-hidden="true" sidenav-close-btn></i> <a class="block px-8 py-6 m-0 text-sm text-white whitespace-nowrap dark:text-white" href=" https://demos.creative-tim.com/argon-dashboard-pro-tailwind/pages/dashboards/default.html " target="_blank">  <img src="../../assets/img/logo-ct.png" class="inline-block h-full max-w-full transition-all duration-200 ease-in-out max-h-8" alt="main_logo" /> <span class="ml-1 font-semibold transition-all duration-200 ease-in-out">Argon Dashboard 2 PRO</span> </a> </div>  <hr class="h-px mt-0 bg-transparent bg-gradient-to-r from-transparent via-white to-transparent" /> <div class="items-center block w-full h-auto grow basis-full" id="sidenav-collapse-main">  <ul class="flex flex-col pl-0 mb-0 list-none">  <li class="mt-0.5 w-full">  <a active_primary collapse_trigger="primary" href="javascript:;" class="after:ease-in-out after:font-awesome-5-free ease-in-out text-sm leading-default py-2.7 my-0 mx-2 flex items-center whitespace-nowrap rounded-lg bg-blue-500/30 px-4 font-semibold text-white transition-all after:ml-auto after:inline-block after:rotate-180 after:font-bold dark:after:text-white after:text-white after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80" aria-expanded="true">  <div class="stroke-none flex h-8 w-8 items-center justify-center rounded-lg bg-center fill-current p-2.5 text-center text-black">  <i class="text-sm leading-normal text-white ni ni-shop"></i> </div>  <span class="ml-1 text-white duration-300 opacity-100 pointer-events-none ease dark:text-white">Dashboards</span> </a> <div class="h-auto overflow-hidden transition-all duration-200 ease-in-out" id="dashboardsExamples">  <ul class="flex flex-wrap mb-0 ml-6 list-none transition-all duration-200 ease-in-out">  <li class="w-full">  <a active_page active_secondary class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap rounded-lg bg-transparent pr-4 font-semibold text-white shadow-none transition-colors dark:text-white dark:opacity-100 " href="../../pages/dashboards/landing.html">  <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> L </span>  <span class="transition-all duration-100 pointer-events-none ease"> Landing </span> </a> </li> <li class="w-full">  <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="../../pages/dashboards/default.html">  <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> D </span>  <span class="transition-all duration-100 pointer-events-none ease"> Default </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="../../pages/dashboards/automotive.html"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> A </span> <span class="transition-all duration-100 pointer-events-none ease"> Automotive </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="../../pages/dashboards/smart-home.html"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> S </span> <span class="transition-all duration-100 pointer-events-none ease"> Smart Home </span> </a> </li> <li class="w-full">  <a collapse_trigger="secondary" class="after:ease-in-out after:font-awesome-5-free ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-white/80 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:after:text-white/80 dark:after:text-white" aria-expanded="false" href="javascript:;"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> V </span> <span class="transition-all duration-100 pointer-events-none ease"> Virtual Reality <b class="caret"></b></span> </a> <div class="h-auto overflow-hidden transition-all duration-200 ease-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-in-out"> <li class="w-full">  <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/dashboards/vr/vr-default.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> V </span> <span class="transition-all duration-100 pointer-events-none ease"> VR Default </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/dashboards/vr/vr-info.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> V </span> <span class="transition-all duration-100 pointer-events-none ease"> VR Info </span> </a> </li> </ul> </div> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="../../pages/dashboards/crm.html"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> C </span> <span class="transition-all duration-100 pointer-events-none ease"> CRM </span> </a> </li> </ul> </div> </li> <li class="w-full mt-4"> <h6 class="pl-6 ml-2 text-xs font-bold leading-tight text-white uppercase opacity-60">PAGES</h6> </li> <li class="mt-0.5 w-full"> <a collapse_trigger="primary" href="javascript:;" class="ease-in-out text-sm leading-default py-2.7 active after:ease-in-out after:font-awesome-5-free my-0 mx-2 flex items-center whitespace-nowrap px-4 font-medium text-white shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-white/80 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80 dark:after:text-white/80 dark:after:text-white" aria-controls="pagesExamples" role="button" aria-expanded="false"> <div class="stroke-none flex h-8 w-8 items-center justify-center rounded-lg bg-center fill-current p-2.5 text-center text-black"> <i class="text-sm leading-normal text-white ni ni-ungroup"></i> </div> <span class="ml-1 text-white duration-300 opacity-100 pointer-events-none ease">Pages</span> </a> <div class="h-auto overflow-hidden transition-all duration-200 ease-in-out max-h-0" id="pagesExamples"> <ul class="flex flex-wrap mb-0 ml-6 list-none transition-all duration-200 ease-in-out"> <li class="w-full"> <a collapse_trigger="secondary" class="after:ease-in-out after:font-awesome-5-free ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-white/80 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:after:text-white/80 dark:after:text-white" aria-expanded="false" href="javascript:;"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> P </span> <span class="transition-all duration-100 pointer-events-none ease"> Profile <b class="caret"></b></span> </a> <div class="h-auto overflow-hidden transition-all duration-200 ease-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-in-out"> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/pages/profile/overview.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> P </span> <span class="transition-all duration-100 pointer-events-none ease"> Profile Overview </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/pages/profile/teams.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> T </span> <span class="transition-all duration-100 pointer-events-none ease"> Teams </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/pages/profile/projects.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> A </span> <span class="transition-all duration-100 pointer-events-none ease"> All Projects </span> </a> </li> </ul> </div> </li> <li class="w-full"> <a collapse_trigger="secondary" class="after:ease-in-out after:font-awesome-5-free ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-white/80 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:after:text-white/80 dark:after:text-white" aria-expanded="false" href="javascript:;"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> U </span> <span class="transition-all duration-100 pointer-events-none ease"> Users <b class="caret"></b></span> </a> <div class="h-auto overflow-hidden transition-all duration-200 ease-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-in-out"> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/pages/users/reports.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> R </span> <span class="transition-all duration-100 pointer-events-none ease"> Reports </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/pages/users/new-user.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> N </span> <span class="transition-all duration-100 pointer-events-none ease"> New User </span> </a> </li> </ul> </div> </li> <li class="w-full"> <a collapse_trigger="secondary" class="after:ease-in-out after:font-awesome-5-free ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-white/80 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:after:text-white/80 dark:after:text-white" aria-expanded="false" href="javascript:;"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> A </span> <span class="transition-all duration-100 pointer-events-none ease"> Account <b class="caret"></b></span> </a> <div class="h-auto overflow-hidden transition-all duration-200 ease-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-in-out"> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/pages/account/settings.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> S </span> <span class="transition-all duration-100 pointer-events-none ease"> Settings </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/pages/account/billing.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> B </span> <span class="transition-all duration-100 pointer-events-none ease"> Billing </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/pages/account/invoice.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> I </span> <span class="transition-all duration-100 pointer-events-none ease"> Invoice </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/pages/account/security.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> S </span> <span class="transition-all duration-100 pointer-events-none ease"> Security </span> </a> </li> </ul> </div> </li> <li class="w-full"> <a collapse_trigger="secondary" class="after:ease-in-out after:font-awesome-5-free ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-white/80 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:after:text-white/80 dark:after:text-white" aria-expanded="false" href="javascript:;"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> P </span> <span class="transition-all duration-100 pointer-events-none ease"> Projects <b class="caret"></b></span> </a> <div class="h-auto overflow-hidden transition-all duration-200 ease-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-in-out"> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/pages/projects/general.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> G </span> <span class="transition-all duration-100 pointer-events-none ease"> General </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/pages/projects/timeline.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> T </span> <span class="transition-all duration-100 pointer-events-none ease"> Timeline </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/pages/projects/new-project.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> N </span> <span class="transition-all duration-100 pointer-events-none ease"> New Project </span> </a> </li> </ul> </div> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="../../pages/pages/pricing-page.html"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> P </span> <span class="transition-all duration-100 pointer-events-none ease"> Pricing Page </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="../../pages/pages/chat.html"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> C </span> <span class="transition-all duration-100 pointer-events-none ease"> Chat </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="../../pages/pages/rtl-page.html"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> R </span> <span class="transition-all duration-100 pointer-events-none ease"> RTL </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="../../pages/pages/widgets.html"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> W </span> <span class="transition-all duration-100 pointer-events-none ease"> Widgets </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="../../pages/pages/charts.html"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> C </span> <span class="transition-all duration-100 pointer-events-none ease"> Charts </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="../../pages/pages/sweet-alerts.html"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> S </span> <span class="transition-all duration-100 pointer-events-none ease"> Sweet Alerts </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="../../pages/pages/notifications.html"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> N </span> <span class="transition-all duration-100 pointer-events-none ease"> Notifications </span> </a> </li> </ul> </div> </li>  <li class="mt-0.5 w-full"> <a collapse_trigger="primary" href="javascript:;" class="ease-in-out text-sm leading-default py-2.7 active after:ease-in-out after:font-awesome-5-free my-0 mx-2 flex items-center whitespace-nowrap px-4 font-medium text-white shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-white/80 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80 dark:after:text-white/80 dark:after:text-white" aria-controls="applicationsExamples" role="button" aria-expanded="false"> <div class="stroke-none flex h-8 w-8 items-center justify-center rounded-lg bg-center fill-current p-2.5 text-center text-black"> <i class="text-sm leading-normal text-white ni ni-ui-04"></i> </div> <span class="ml-1 duration-300 opacity-100 pointer-events-none ease">Applications</span> </a> <div class="h-auto overflow-hidden transition-all duration-200 ease-in-out max-h-0" id="applicationsExamples"> <ul class="flex flex-wrap mb-0 ml-6 list-none transition-all duration-200 ease-in-out"> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="../../pages/applications/kanban.html"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> K </span> <span class="transition-all duration-100 pointer-events-none ease"> Kanban </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="../../pages/applications/wizard.html"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> W </span> <span class="transition-all duration-100 pointer-events-none ease"> Wizard </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="../../pages/applications/datatables.html"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> D </span> <span class="transition-all duration-100 pointer-events-none ease"> DataTables </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="../../pages/applications/calendar.html"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> C </span> <span class="transition-all duration-100 pointer-events-none ease"> Calendar </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="../../pages/applications/analytics.html"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> A </span> <span class="transition-all duration-100 pointer-events-none ease"> Analytics </span> </a> </li> </ul> </div> </li>  <li class="mt-0.5 w-full"> <a collapse_trigger="primary" href="javascript:;" class="ease-in-out text-sm leading-default py-2.7 active after:ease-in-out after:font-awesome-5-free my-0 mx-2 flex items-center whitespace-nowrap px-4 font-medium text-white shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-white/80 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80 dark:after:text-white/80 dark:after:text-white" aria-controls="ecommerceExamples" role="button" aria-expanded="false"> <div class="stroke-none flex h-8 w-8 items-center justify-center rounded-lg bg-center fill-current p-2.5 text-center text-black"> <i class="text-sm leading-normal text-white ni ni-archive-2"></i> </div> <span class="ml-1 duration-300 opacity-100 pointer-events-none ease">Ecommerce</span> </a> <div class="h-auto overflow-hidden transition-all duration-200 ease-in-out max-h-0" id="ecommerceExamples"> <ul class="flex flex-wrap mb-0 ml-6 list-none transition-all duration-200 ease-in-out"> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="../../pages/ecommerce/overview.html"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> O </span> <span class="transition-all duration-100 pointer-events-none ease"> Overview </span> </a> </li> <li class="w-full"> <a collapse_trigger="secondary" class="after:ease-in-out after:font-awesome-5-free ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-white/80 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:after:text-white/80 dark:after:text-white" aria-expanded="false" href="javascript:;"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> P </span> <span class="transition-all duration-100 pointer-events-none ease"> Products <b class="caret"></b></span> </a> <div class="h-auto overflow-hidden transition-all duration-200 ease-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-in-out"> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/ecommerce/products/new-product.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> N </span> <span class="transition-all duration-100 pointer-events-none ease"> New Product </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/ecommerce/products/edit-product.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> E </span> <span class="transition-all duration-100 pointer-events-none ease"> Edit Product </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/ecommerce/products/product-page.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> P </span> <span class="transition-all duration-100 pointer-events-none ease"> Product Page </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/ecommerce/products/products-list.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> P </span> <span class="transition-all duration-100 pointer-events-none ease"> Products List </span> </a> </li> </ul> </div> </li> <li class="w-full"> <a collapse_trigger="secondary" class="after:ease-in-out after:font-awesome-5-free ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-white/80 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:after:text-white/80 dark:after:text-white" aria-expanded="false" href="javascript:;"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> O </span> <span class="transition-all duration-100 pointer-events-none ease"> Orders <b class="caret"></b></span> </a> <div class="h-auto overflow-hidden transition-all duration-200 ease-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-in-out"> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/ecommerce/orders/list.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> O </span> <span class="transition-all duration-100 pointer-events-none ease"> Order List </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/ecommerce/orders/details.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> O </span> <span class="transition-all duration-100 pointer-events-none ease"> Order Details </span> </a> </li> </ul> </div> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="../../pages/ecommerce/referral.html"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> R </span> <span class="transition-all duration-100 pointer-events-none ease"> Referral </span> </a> </li> </ul> </div> </li> <li class="mt-0.5 w-full"> <a collapse_trigger="primary" href="javascript:;" class="ease-in-out text-sm leading-default py-2.7 active after:ease-in-out after:font-awesome-5-free my-0 mx-2 flex items-center whitespace-nowrap px-4 font-medium text-white shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-white/80 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80 dark:after:text-white/80 dark:after:text-white" aria-controls="authExamples" role="button" aria-expanded="false"> <div class="stroke-none flex h-8 w-8 items-center justify-center rounded-lg bg-center fill-current p-2.5 text-center text-black"> <i class="text-sm leading-normal text-white ni ni-single-copy-04"></i> </div> <span class="ml-1 duration-300 opacity-100 pointer-events-none ease">Authentication</span> </a> <div class="h-auto overflow-hidden transition-all duration-200 ease-in-out max-h-0" id="authExamples"> <ul class="flex flex-wrap mb-0 ml-6 list-none transition-all duration-200 ease-in-out"> <li class="w-full"> <a collapse_trigger="secondary" class="after:ease-in-out after:font-awesome-5-free ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-white/80 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:after:text-white/80 dark:after:text-white" aria-expanded="false" href="javascript:;"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> S </span> <span class="transition-all duration-100 pointer-events-none ease"> Sign In <b class="caret"></b></span> </a> <div class="h-auto overflow-hidden transition-all duration-200 ease-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-in-out"> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/authentication/signin/basic.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> B </span> <span class="transition-all duration-100 pointer-events-none ease"> Basic </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/authentication/signin/cover.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> C </span> <span class="transition-all duration-100 pointer-events-none ease"> Cover </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/authentication/signin/illustration.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> I </span> <span class="transition-all duration-100 pointer-events-none ease"> Illustration </span> </a> </li> </ul> </div> </li> <li class="w-full"> <a collapse_trigger="secondary" class="after:ease-in-out after:font-awesome-5-free ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-white/80 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:after:text-white/80 dark:after:text-white" aria-expanded="false" href="javascript:;"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> S </span> <span class="transition-all duration-100 pointer-events-none ease"> Sign Up <b class="caret"></b></span> </a> <div class="h-auto overflow-hidden transition-all duration-200 ease-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-in-out"> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/authentication/signup/basic.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> B </span> <span class="transition-all duration-100 pointer-events-none ease"> Basic </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/authentication/signup/cover.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> C </span> <span class="transition-all duration-100 pointer-events-none ease"> Cover </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/authentication/signup/illustration.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> I </span> <span class="transition-all duration-100 pointer-events-none ease"> Illustration </span> </a> </li> </ul> </div> </li> <li class="w-full"> <a collapse_trigger="secondary" class="after:ease-in-out after:font-awesome-5-free ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-white/80 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:after:text-white/80 dark:after:text-white" aria-expanded="false" href="javascript:;"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> R </span> <span class="transition-all duration-100 pointer-events-none ease"> Reset Password <b class="caret"></b></span> </a> <div class="h-auto overflow-hidden transition-all duration-200 ease-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-in-out"> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/authentication/reset/basic.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> B </span> <span class="transition-all duration-100 pointer-events-none ease"> Basic </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/authentication/reset/cover.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> C </span> <span class="transition-all duration-100 pointer-events-none ease"> Cover </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/authentication/reset/illustration.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> I </span> <span class="transition-all duration-100 pointer-events-none ease"> Illustration </span> </a> </li> </ul> </div> </li> <li class="w-full"> <a collapse_trigger="secondary" class="after:ease-in-out after:font-awesome-5-free ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-white/80 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:after:text-white/80 dark:after:text-white" aria-expanded="false" href="javascript:;"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> L </span> <span class="transition-all duration-100 pointer-events-none ease"> Lock <b class="caret"></b></span> </a> <div class="h-auto overflow-hidden transition-all duration-200 ease-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-in-out"> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/authentication/lock/basic.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> B </span> <span class="transition-all duration-100 pointer-events-none ease"> Basic </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/authentication/lock/cover.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> C </span> <span class="transition-all duration-100 pointer-events-none ease"> Cover </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/authentication/lock/illustration.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> I </span> <span class="transition-all duration-100 pointer-events-none ease"> Illustration </span> </a> </li> </ul> </div> </li> <li class="w-full"> <a collapse_trigger="secondary" class="after:ease-in-out after:font-awesome-5-free ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-white/80 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:after:text-white/80 dark:after:text-white" aria-expanded="false" href="javascript:;"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> 2 </span> <span class="transition-all duration-100 pointer-events-none ease"> 2-Step Verification <b class="caret"></b></span> </a> <div class="h-auto overflow-hidden transition-all duration-200 ease-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-in-out"> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/authentication/verification/basic.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> B </span> <span class="transition-all duration-100 pointer-events-none ease"> Basic </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/authentication/verification/cover.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> C </span> <span class="transition-all duration-100 pointer-events-none ease"> Cover </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/authentication/verification/illustration.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> I </span> <span class="transition-all duration-100 pointer-events-none ease"> Illustration </span> </a> </li> </ul> </div> </li> <li class="w-full"> <a collapse_trigger="secondary" class="after:ease-in-out after:font-awesome-5-free ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-white/80 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:after:text-white/80 dark:after:text-white" aria-expanded="false" href="javascript:;"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> E </span> <span class="transition-all duration-100 pointer-events-none ease"> Error <b class="caret"></b></span> </a> <div class="h-auto overflow-hidden transition-all duration-200 ease-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-in-out"> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/authentication/error/404.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> E </span> <span class="transition-all duration-100 pointer-events-none ease"> Error 404 </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="../../pages/authentication/error/500.html"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> E </span> <span class="transition-all duration-100 pointer-events-none ease"> 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-gradient-to-r from-transparent via-white to-transparent" /> <h6 class="pl-6 mb-2 ml-2 text-xs font-bold leading-tight text-white uppercase opacity-60">DOCS</h6> </li> <li class="mt-0.5 w-full"> <a collapse_trigger="primary" href="javascript:;" class="ease-in-out text-sm leading-default py-2.7 active after:ease-in-out after:font-awesome-5-free my-0 mx-2 flex items-center whitespace-nowrap px-4 font-medium text-white shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-white/80 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80 dark:after:text-white/80 dark:after:text-white" aria-controls="basicExamples" role="button" aria-expanded="false"> <div class="stroke-none flex h-8 w-8 items-center justify-center rounded-lg bg-center fill-current p-2.5 text-center text-black"> <i class="text-sm leading-normal ni ni-spaceship text-white/80"></i> </div> <span class="ml-1 duration-300 opacity-100 pointer-events-none ease">Basic</span> </a> <div class="h-auto overflow-hidden transition-all duration-200 ease-in-out max-h-0" id="basicExamples"> <ul class="flex flex-wrap mb-0 ml-6 list-none transition-all duration-200 ease-in-out"> <li class="w-full"> <a collapse_trigger="secondary" class="after:ease-in-out after:font-awesome-5-free ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-white/80 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:after:text-white/80 dark:after:text-white" aria-expanded="false" href="javascript:;"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> G </span> <span class="transition-all duration-100 pointer-events-none ease"> Getting Started <b class="caret"></b></span> </a> <div class="h-auto overflow-hidden transition-all duration-200 ease-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-in-out"> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="https://www.creative-tim.com/learning-lab/tailwind/html/quick-start/argon-dashboard/" target="_blank"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> Q </span> <span class="transition-all duration-100 pointer-events-none ease"> Quick Start </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="https://www.creative-tim.com/learning-lab/tailwind/html/license/argon-dashboard/" target="_blank"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> L </span> <span class="transition-all duration-100 pointer-events-none ease"> License </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="https://www.creative-tim.com/learning-lab/tailwind/html/what-is-tailwind-css/argon-dashboard/" target="_blank"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> C </span> <span class="transition-all duration-100 pointer-events-none ease"> Contents </span> </a> </li> </ul> </div> </li> <li class="w-full"> <a collapse_trigger="secondary" class="after:ease-in-out after:font-awesome-5-free ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-white/80 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-60 dark:after:text-white/80 dark:after:text-white" aria-expanded="false" href="javascript:;"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> F </span> <span class="transition-all duration-100 pointer-events-none ease"> Foundation <b class="caret"></b></span> </a> <div class="h-auto overflow-hidden transition-all duration-200 ease-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-in-out"> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="https://www.creative-tim.com/learning-lab/tailwind/html/colors/argon-dashboard/" target="_blank"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> C </span> <span class="transition-all duration-100 pointer-events-none ease"> Colors </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 text-3.2 relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60" href="https://www.creative-tim.com/learning-lab/tailwind/html/typography/argon-dashboard/" target="_blank"> <span class="w-0 text-xs leading-tight text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> T </span> <span class="transition-all duration-100 pointer-events-none ease"> Typography </span> </a> </li> </ul> </div> </li> </ul> </div> </li> <li class="mt-0.5 w-full"> <a collapse_trigger="primary" href="javascript:;" class="ease-in-out text-sm leading-default py-2.7 active after:ease-in-out after:font-awesome-5-free my-0 mx-2 flex items-center whitespace-nowrap px-4 font-medium text-white shadow-none transition-colors after:ml-auto after:inline-block after:font-bold after:text-white/80 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:text-white dark:opacity-80 dark:after:text-white/80 dark:after:text-white" aria-controls="componentsExamples" role="button" aria-expanded="false"> <div class="stroke-none flex h-8 w-8 items-center justify-center rounded-lg bg-center fill-current p-2.5 text-center text-black"> <i class="text-sm leading-normal ni ni-app text-white/80"></i> </div> <span class="ml-1 duration-300 opacity-100 pointer-events-none ease">Components</span> </a> <div class="h-auto overflow-hidden transition-all duration-200 ease-in-out max-h-0" id="componentsExamples"> <ul class="flex flex-wrap mb-0 ml-6 list-none transition-all duration-200 ease-in-out"> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="https://www.creative-tim.com/learning-lab/tailwind/html/alert/argon-dashboard/" target="_blank"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> A </span> <span class="transition-all duration-100 pointer-events-none ease"> Alerts </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="https://www.creative-tim.com/learning-lab/tailwind/html/chip/argon-dashboard/" target="_blank"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> B </span> <span class="transition-all duration-100 pointer-events-none ease"> Badge </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="https://www.creative-tim.com/learning-lab/tailwind/html/button/argon-dashboard/" target="_blank"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> B </span> <span class="transition-all duration-100 pointer-events-none ease"> Buttons </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="https://www.creative-tim.com/learning-lab/tailwind/html/card/argon-dashboard/" target="_blank"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> C </span> <span class="transition-all duration-100 pointer-events-none ease"> Card </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="https://www.creative-tim.com/learning-lab/tailwind/html/collapse/argon-dashboard/" target="_blank"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> C </span> <span class="transition-all duration-100 pointer-events-none ease"> Collapse </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="https://www.creative-tim.com/learning-lab/tailwind/html/dropdown/argon-dashboard/" target="_blank"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> D </span> <span class="transition-all duration-100 pointer-events-none ease"> Dropdowns </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="https://www.creative-tim.com/learning-lab/tailwind/html/input/argon-dashboard/" target="_blank"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> F </span> <span class="transition-all duration-100 pointer-events-none ease"> Forms </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="https://www.creative-tim.com/learning-lab/tailwind/html/modal/argon-dashboard/" target="_blank"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> M </span> <span class="transition-all duration-100 pointer-events-none ease"> Modal </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="https://www.creative-tim.com/learning-lab/tailwind/html/tabs/argon-dashboard/" target="_blank"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> N </span> <span class="transition-all duration-100 pointer-events-none ease"> Navs </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="https://www.creative-tim.com/learning-lab/tailwind/html/navbar/argon-dashboard/" target="_blank"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> N </span> <span class="transition-all duration-100 pointer-events-none ease"> Navbar </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="https://www.creative-tim.com/learning-lab/tailwind/html/progress/argon-dashboard/" target="_blank"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> P </span> <span class="transition-all duration-100 pointer-events-none ease"> Progress </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="https://www.creative-tim.com/learning-lab/tailwind/html/table/argon-dashboard/" target="_blank"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> T </span> <span class="transition-all duration-100 pointer-events-none ease"> Tables </span> </a> </li> <li class="w-full"> <a class="ease-in-out py-2.7 ml-5.4 pl-4 leading-default text-sm relative my-0 mr-2 flex items-center whitespace-nowrap bg-transparent pr-4 font-medium text-white/80 shadow-none transition-colors dark:text-white dark:opacity-60 " href="https://www.creative-tim.com/learning-lab/tailwind/html/tooltip/argon-dashboard/" target="_blank"> <span class="w-0 text-center transition-all duration-200 ease-in-out opacity-0 pointer-events-none"> T </span> <span class="transition-all duration-100 pointer-events-none ease"> Tooltips </span> </a> </li> </ul> </div> </li> <li class="mt-0.5 w-full"> <a class="ease-in-out text-sm leading-default py-2.7 my-0 mx-2 flex items-center whitespace-nowrap px-4 font-medium text-white shadow-none transition-colors dark:text-white dark:opacity-80" href="https://github.com/creativetimofficial/ct-argon-dashboard-pro-tailwind/blob/main/CHANGELOG.md" target="_blank"> <div class="stroke-none flex h-8 w-8 items-center justify-center rounded-lg bg-center fill-current p-2.5 text-center text-black"> <i class="text-sm leading-normal ni ni-align-left-2 text-white/80"></i> </div> <span class="ml-1 duration-300 opacity-100 pointer-events-none ease">Changelog</span> </a> </li> </ul> </div> </aside> <main class="relative h-full max-h-screen transition-all duration-200 ease-in-out xl:ml-68 rounded-xl"> <div class="container p-6"> <div class="flex flex-wrap -mx-3 min-h-80-screen"> <div class="hidden w-full max-w-full px-3 md:block shrink-0"> <div class="w-10/12 flex-0"> <div class="absolute p-4 rounded-2xl backdrop-saturate-200 backdrop-blur-2xl bg-white/80 z-30 shadow-xl mt-24 [transform:scale(1)_perspective(2000px)_rotateY(-35deg)_rotateX(2deg)_rotate(0deg)] hover:[transform:scale(1)_perspective(2000px)_rotateY(-15deg)_rotateX(0deg)_rotate(0deg)] right-75 cursor-pointer transition-all duration-350 ease-in-out"> <a href="../../index.html" class="w-full"> <img class="w-full rounded-xl" src="../../assets/img/default.jpg" alt="default page"> </a> </div> <div class="absolute p-4 shadow-xl rounded-2xl backdrop-saturate-200 backdrop-blur-2xl bg-white/80 z-20 mt-4 [transform:scale(.7)_perspective(2000px)_rotateY(-32deg)_rotateX(2deg)_rotate(0deg)] right-7.5"> <img class="w-full rounded-xl" src="../../assets/img/automotive.jpg" alt="automotive page"> </div> <div class="absolute p-4 shadow-xl rounded-2xl backdrop-saturate-200 backdrop-blur-2xl bg-white/80 z-10 [transform:scale(.5)_perspective(2000px)_rotateY(-30deg)_rotateX(2deg)_rotate(0deg)] -right-60 -top-7.5"> <img class="w-full rounded-xl" src="../../assets/img/crm.jpg" alt="crm page"> </div> </div> </div> <div class="block w-full max-w-full px-3 md:hidden shrink-0"> <div class="w-10/12 mx-auto flex-0"> <div class="p-4 mt-12 shadow-xl cursor-pointer rounded-2xl backdrop-saturate-200 backdrop-blur-2xl bg-white/80 z-3"> <a href="../../index.html" class="w-full"> <img class="w-full rounded-xl" src="../../assets/img/default.jpg" alt="default page"> </a> </div> <div class="p-4 mt-6 shadow-xl cursor-pointer rounded-2xl backdrop-saturate-200 backdrop-blur-2xl bg-white/80 z-2"> <img class="w-full rounded-xl" src="../../assets/img/automotive.jpg" alt="automotive page"> </div> <div class="p-4 mt-6 shadow-xl cursor-pointer rounded-2xl backdrop-saturate-200 backdrop-blur-2xl bg-white/80 z-1"> <img class="w-full rounded-xl" src="../../assets/img/crm.jpg" alt="crm page"> </div> </div> </div> </div> </div> </main> </body> <script src="../../assets/js/plugins/chartjs.min.js"></script> <script src="../../assets/js/plugins/threejs.js"></script> <script src="../../assets/js/plugins/orbit-controls.js"></script> <script src="../../assets/js/plugins/perfect-scrollbar.min.js"></script>  <script src="../../assets/js/argon-dashboard-pro-tailwind.min.js?v=1.0.0"></script> </html>

CINXE.COM

Argon Dashboard 2 Pro Tailwind by Creative Tim