Files
flowbite-beardedtek.com/_gh_pages/index.html
2025-04-15 14:55:06 -08:00

1946 lines
174 KiB
HTML

<!doctype html>
<html lang="en" class="">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Get started with a collection of over 53 page templates based on Tailwind CSS for Marketing UI purposes including landing pages, contact pages, about pages, and more">
<meta name="author" content="Flowbite">
<meta name="generator" content="Hugo 0.145.0">
<title>Tailwind CSS Landing Pages - Flowbite</title>
<link rel="canonical" href="http://localhost:1313/">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="http://localhost:1313//app.css">
<link rel="apple-touch-icon" sizes="180x180" href="http://localhost:1313/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="http://localhost:1313/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="http://localhost:1313/favicon-16x16.png">
<link rel="icon" type="image/png" href="http://localhost:1313/favicon.ico">
<link rel="manifest" href="http://localhost:1313/site.webmanifest">
<link rel="mask-icon" href="http://localhost:1313/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@">
<meta name="twitter:creator" content="@">
<meta name="twitter:title" content="Tailwind CSS Landing Pages - Flowbite">
<meta name="twitter:description" content="Get started with a collection of over 53 page templates based on Tailwind CSS for Marketing UI purposes including landing pages, contact pages, about pages, and more">
<meta name="twitter:image" content="http://localhost:1313/">
<!-- Facebook -->
<meta property="og:url" content="http://localhost:1313/">
<meta property="og:title" content="Tailwind CSS Landing Pages - Flowbite">
<meta property="og:description" content="Get started with a collection of over 53 page templates based on Tailwind CSS for Marketing UI purposes including landing pages, contact pages, about pages, and more">
<meta property="og:type" content="website">
<meta property="og:image" content="http://localhost:1313/marketing-ui/demo/images/og-image.jpg">
<meta property="og:image:type" content="image/png">
<script>
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark')
}
</script>
</head>
<body class="bg-gray-50 dark:bg-gray-800">
<header>
<nav id="mainNavbar" data-sticky="false" class="dark:bg-transparent bg-transparent border-gray-200 py-2.5 fixed w-full z-40 top-0 start-0 data-[sticky=true]:bg-white data-[sticky=true]:border-b dark:data-[sticky=true]:bg-gray-800 dark:data-[sticky=true]:border-gray-700">
<div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl px-4">
<a href="http://localhost:1313/" class="flex items-center">
<img src="http://localhost:1313/images/logo/no-padding.svg" class="h-8 mr-3" alt="Flowbite Logo" />
<span class="self-center text-3xl kanit-bold whitespace-nowrap dark:text-white">The Bearded Tek</span>
</a>
<div class="flex items-center lg:order-2">
<button id="themeToggle" data-tooltip-target="tooltip-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 mr-2.5">
<svg id="themeToggleDarkIcon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
<svg id="themeToggleLightIcon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</button>
<div id="tooltip-toggle" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-xs opacity-0 tooltip">
Toggle dark mode
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
<button id="mobile-menu-button" data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
<div class="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1 bg-white dark:bg-gray-800 lg:bg-transparent lg:dark:bg-transparent mt-2 lg:mt-0" id="mobile-menu-2">
<ul class="flex flex-col rounded-lg font-medium lg:flex-row lg:space-x-8">
<li>
<a href="http://localhost:1313/" class="block py-2 pr-4 pl-3 text-gray-900 border-b border-gray-100 hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-white lg:dark:hover:text-primary-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700" aria-current="page">Home</a>
</li>
<li>
<a href="http://localhost:1313/services/services-1/" class="block py-2 pr-4 pl-3 text-gray-900 border-b border-gray-100 hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-white lg:dark:hover:text-primary-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Services</a>
</li>
<li>
<a href="http://localhost:1313/about/about-1/" class="block py-2 pr-4 pl-3 text-gray-900 border-b border-gray-100 hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-white lg:dark:hover:text-primary-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">About</a>
</li>
<li>
<a href="http://localhost:1313/pricing/pricing-1/" class="block py-2 pr-4 pl-3 text-gray-900 border-b border-gray-100 hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-white lg:dark:hover:text-primary-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Pricing</a>
</li>
<li>
<a href="http://localhost:1313/team/team-1/" class="block py-2 pr-4 pl-3 text-gray-900 border-b border-gray-100 hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-white lg:dark:hover:text-primary-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Team</a>
</li>
<li>
<a href="http://localhost:1313/blog/homepage/" class="block py-2 pr-4 pl-3 text-gray-900 hover:bg-gray-100 lg:hover:bg-transparent lg:hover:text-primary-700 lg:p-0 dark:text-white lg:dark:hover:text-primary-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Blog</a>
</li>
<li>
<a href="http://localhost:1313/contact/contact-1/" class="block py-2 pr-4 pl-3 text-gray-900 hover:bg-gray-100 lg:hover:bg-transparent lg:hover:text-primary-700 lg:p-0 dark:text-white lg:dark:hover:text-primary-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<header>
<nav id="mainNavbar" data-sticky="false" class="dark:bg-transparent bg-transparent border-gray-200 py-2.5 fixed w-full z-40 top-0 start-0 data-[sticky=true]:bg-white data-[sticky=true]:border-b dark:data-[sticky=true]:bg-gray-800 dark:data-[sticky=true]:border-gray-700">
<div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl px-4">
<a href="http://localhost:1313/" class="flex items-center">
<img src="https://flowbite.com/docs/images/logo.svg" class="h-8 mr-3" alt="Flowbite Logo" />
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
</a>
<div class="flex items-center lg:order-2">
<button id="themeToggle" data-tooltip-target="tooltip-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 mr-2.5">
<svg id="themeToggleDarkIcon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
<svg id="themeToggleLightIcon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</button>
<div id="tooltip-toggle" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-xs opacity-0 tooltip">
Toggle dark mode
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
<button id="mobile-menu-button" data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
<div class="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1 bg-white dark:bg-gray-800 lg:bg-transparent lg:dark:bg-transparent mt-2 lg:mt-0" id="mobile-menu-2">
<ul class="flex flex-col rounded-lg font-medium lg:flex-row lg:space-x-8">
<li>
<a href="http://localhost:1313/" class="block py-2 pr-4 pl-3 text-gray-900 border-b border-gray-100 hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-white lg:dark:hover:text-primary-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700" aria-current="page">Home</a>
</li>
<li>
<a href="http://localhost:1313/services/services-1/" class="block py-2 pr-4 pl-3 text-gray-900 border-b border-gray-100 hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-white lg:dark:hover:text-primary-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Services</a>
</li>
<li>
<a href="http://localhost:1313/about/about-1/" class="block py-2 pr-4 pl-3 text-gray-900 border-b border-gray-100 hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-white lg:dark:hover:text-primary-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">About</a>
</li>
<li>
<a href="http://localhost:1313/pricing/pricing-1/" class="block py-2 pr-4 pl-3 text-gray-900 border-b border-gray-100 hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-white lg:dark:hover:text-primary-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Pricing</a>
</li>
<li>
<a href="http://localhost:1313/team/team-1/" class="block py-2 pr-4 pl-3 text-gray-900 border-b border-gray-100 hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-primary-700 lg:p-0 dark:text-white lg:dark:hover:text-primary-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Team</a>
</li>
<li>
<a href="http://localhost:1313/blog/homepage/" class="block py-2 pr-4 pl-3 text-gray-900 hover:bg-gray-100 lg:hover:bg-transparent lg:hover:text-primary-700 lg:p-0 dark:text-white lg:dark:hover:text-primary-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Blog</a>
</li>
<li>
<a href="http://localhost:1313/contact/contact-1/" class="block py-2 pr-4 pl-3 text-gray-900 hover:bg-gray-100 lg:hover:bg-transparent lg:hover:text-primary-700 lg:p-0 dark:text-white lg:dark:hover:text-primary-500 dark:hover:bg-gray-700 dark:hover:text-white lg:dark:hover:bg-transparent dark:border-gray-700">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div id="drawer-navigation" class="fixed top-0 left-0 z-50 h-screen p-4 overflow-y-auto transition-transform -translate-x-full bg-white w-64 dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-navigation-label">
<h5 id="drawer-navigation-label" class="text-base font-semibold text-gray-500 uppercase dark:text-gray-400">All pages</h5>
<button type="button" data-drawer-hide="drawer-navigation" aria-controls="drawer-navigation" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 end-2.5 inline-flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white" >
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
<span class="sr-only">Close menu</span>
</button>
<div class="py-4 overflow-y-auto">
<ul class="space-y-2 font-medium">
<li>
<button type="button" class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" aria-controls="dropdown-landings" data-collapse-toggle="dropdown-landings">
<svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
</svg>
<span class="flex-1 text-left rtl:text-right whitespace-nowrap ml-4">Landings</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</button>
<ul id="dropdown-landings" class="hidden py-2 space-y-2">
<li>
<a href="http://localhost:1313/landing/agency/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Agency</a>
</li>
<li>
<a href="http://localhost:1313/landing/mobile-application/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Mobile app</a>
</li>
<li>
<a href="http://localhost:1313/landing/digital-product/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Digital product</a>
</li>
<li>
<a href="http://localhost:1313/landing/saas/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">SaaS product</a>
</li>
<li>
<a href="http://localhost:1313/landing/open-source/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Open-source</a>
</li>
<li>
<a href="http://localhost:1313/landing/pre-launch/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Pre-launch page</a>
</li>
<li>
<a href="http://localhost:1313/landing/physical-product/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Physical product</a>
</li>
<li>
<a href="http://localhost:1313/landing/crypto/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Crypto exchange</a>
</li>
<li>
<a href="http://localhost:1313/landing/event/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Event schedule</a>
</li>
<li>
<a href="http://localhost:1313/landing/ngo/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">NGO presentation</a>
</li>
</ul>
</li>
<li>
<button type="button" class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" aria-controls="dropdown-about" data-collapse-toggle="dropdown-about">
<svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
</svg>
<span class="flex-1 text-left rtl:text-right whitespace-nowrap ml-4">About</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</button>
<ul id="dropdown-about" class="hidden py-2 space-y-2">
<li>
<a href="http://localhost:1313/about/about-1/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">About feature list</a>
</li>
<li>
<a href="http://localhost:1313/about/about-2/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">About with video</a>
</li>
<li>
<a href="http://localhost:1313/about/about-3/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">About with statistics</a>
</li>
</ul>
</li>
<li>
<button type="button" class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" aria-controls="dropdown-services" data-collapse-toggle="dropdown-services">
<svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M19.728 10.686c-2.38 2.256-6.153 3.381-9.875 3.381-3.722 0-7.4-1.126-9.571-3.371L0 10.437V18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-7.6l-.272.286Z"/>
<path d="m.135 7.847 1.542 1.417c3.6 3.712 12.747 3.7 16.635.01L19.605 7.9A.98.98 0 0 1 20 7.652V6a2 2 0 0 0-2-2h-3V3a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v1H2a2 2 0 0 0-2 2v1.765c.047.024.092.051.135.082ZM10 10.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5ZM7 3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1H7V3Z"/>
</svg>
<span class="flex-1 text-left rtl:text-right whitespace-nowrap ml-4">Services</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</button>
<ul id="dropdown-services" class="hidden py-2 space-y-2">
<li>
<a href="http://localhost:1313/services/services-1/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Services feature icons</a>
</li>
<li>
<a href="http://localhost:1313/services/services-2/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Services with images</a>
</li>
<li>
<a href="http://localhost:1313/services/services-3/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Services image cards</a>
</li>
<li>
<a href="http://localhost:1313/services/services-4/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Services statistics</a>
</li>
</ul>
</li>
<li>
<button type="button" class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" aria-controls="dropdown-team" data-collapse-toggle="dropdown-team">
<svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
<path d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"/>
</svg>
<span class="flex-1 text-left rtl:text-right whitespace-nowrap ml-4">Team</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</button>
<ul id="dropdown-team" class="hidden py-2 space-y-2">
<li>
<a href="http://localhost:1313/team/team-1/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Team hover cards</a>
</li>
<li>
<a href="http://localhost:1313/team/team-2/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Team profile cards</a>
</li>
<li>
<a href="http://localhost:1313/team/team-3/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Team masonry grid</a>
</li>
<li>
<a href="http://localhost:1313/team/team-4/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Team outline cards</a>
</li>
</ul>
</li>
<li>
<button type="button" class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" aria-controls="dropdown-pricing" data-collapse-toggle="dropdown-pricing">
<svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 14">
<path d="M18 0H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2ZM2 12V6h16v6H2Z"/>
<path d="M6 8H4a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2Zm8 0H9a1 1 0 0 0 0 2h5a1 1 0 1 0 0-2Z"/>
</svg>
<span class="flex-1 text-left rtl:text-right whitespace-nowrap ml-4">Pricing</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</button>
<ul id="dropdown-pricing" class="hidden py-2 space-y-2">
<li>
<a href="http://localhost:1313/pricing/pricing-1/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Pricing single plan</a>
</li>
<li>
<a href="http://localhost:1313/pricing/pricing-2/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Pricing three plans</a>
</li>
<li>
<a href="http://localhost:1313/pricing/pricing-3/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Pricing price toggle</a>
</li>
<li>
<a href="http://localhost:1313/pricing/pricing-4/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Pricing comparison</a>
</li>
</ul>
</li>
<li>
<button type="button" class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" aria-controls="dropdown-contact" data-collapse-toggle="dropdown-contact">
<svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
<path d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z"/>
<path d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z"/>
</svg>
<span class="flex-1 text-left rtl:text-right whitespace-nowrap ml-4">Contact</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</button>
<ul id="dropdown-contact" class="hidden py-2 space-y-2">
<li>
<a href="http://localhost:1313/contact/contact-1/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Contact with search</a>
</li>
<li>
<a href="http://localhost:1313/contact/contact-2/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Contact with FAQ</a>
</li>
<li>
<a href="http://localhost:1313/contact/contact-3/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Contact with image</a>
</li>
<li>
<a href="http://localhost:1313/contact/contact-4/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Contact with options</a>
</li>
</ul>
</li>
<li>
<button type="button" class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" aria-controls="dropdown-blog" data-collapse-toggle="dropdown-blog">
<svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 21 20">
<path d="M20.168 6.136 14.325.293a1 1 0 0 0-1.414 0l-1.445 1.444a1 1 0 0 0 0 1.414l5.844 5.843a1 1 0 0 0 1.414 0l1.444-1.444a1 1 0 0 0 0-1.414Zm-4.205 2.927L11.4 4.5a1 1 0 0 0-1-.25L4.944 5.9a1 1 0 0 0-.652.624L.518 17.206a1 1 0 0 0 .236 1.04l.023.023 6.606-6.606a2.616 2.616 0 1 1 3.65 1.304 2.615 2.615 0 0 1-2.233.108l-6.61 6.609.024.023a1 1 0 0 0 1.04.236l10.682-3.773a1 1 0 0 0 .624-.653l1.653-5.457a.999.999 0 0 0-.25-.997Z"/>
<path d="M10.233 11.1a.613.613 0 1 0-.867-.868.613.613 0 0 0 .867.868Z"/>
</svg>
<span class="flex-1 text-left rtl:text-right whitespace-nowrap ml-4">Blog</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</button>
<ul id="dropdown-blog" class="hidden py-2 space-y-2">
<li>
<a href="http://localhost:1313/blog/homepage/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Main page</a>
</li>
<li>
<a href="http://localhost:1313/blog/article/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Article page</a>
</li>
</ul>
</li>
<li>
<button type="button" class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" aria-controls="dropdown-testimonials" data-collapse-toggle="dropdown-testimonials">
<svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
<path d="M18 0H2a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h2v4a1 1 0 0 0 1.707.707L10.414 13H18a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5 4h2a1 1 0 1 1 0 2h-2a1 1 0 1 1 0-2ZM5 4h5a1 1 0 1 1 0 2H5a1 1 0 0 1 0-2Zm2 5H5a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Zm9 0h-6a1 1 0 0 1 0-2h6a1 1 0 1 1 0 2Z"/>
</svg>
<span class="flex-1 text-left rtl:text-right whitespace-nowrap ml-4">Testimonials</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</button>
<ul id="dropdown-testimonials" class="hidden py-2 space-y-2">
<li>
<a href="http://localhost:1313/testimonials/testimonials-1/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Testimonial statistics</a>
</li>
<li>
<a href="http://localhost:1313/testimonials/testimonials-2/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Testimonial cards</a>
</li>
</ul>
</li>
<li>
<button type="button" class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" aria-controls="dropdown-portfolio" data-collapse-toggle="dropdown-portfolio">
<svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
<path d="M18 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2ZM6.5 3a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3.014 13.021l.157-.625A3.427 3.427 0 0 1 6.5 9.571a3.426 3.426 0 0 1 3.322 2.805l.159.622-6.967.023ZM16 12h-3a1 1 0 0 1 0-2h3a1 1 0 0 1 0 2Zm0-3h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Zm0-3h-3a1 1 0 1 1 0-2h3a1 1 0 1 1 0 2Z"/>
</svg>
<span class="flex-1 text-left rtl:text-right whitespace-nowrap ml-4">Portfolio</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</button>
<ul id="dropdown-portfolio" class="hidden py-2 space-y-2">
<li>
<a href="http://localhost:1313/portfolio/project-showcase/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Project Showcase</a>
</li>
</ul>
</li>
<li>
<button type="button" class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" aria-controls="dropdown-auth" data-collapse-toggle="dropdown-auth">
<svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 18">
<path d="M8 18A18.55 18.55 0 0 1 0 3l8-3 8 3a18.549 18.549 0 0 1-8 15Z"/>
</svg>
<span class="flex-1 text-left rtl:text-right whitespace-nowrap ms-3">Authentication</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</button>
<ul id="dropdown-auth" class="hidden py-2 space-y-2">
<li>
<a href="http://localhost:1313/authentication/login-1/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Login feature list</a>
</li>
<li>
<a href="http://localhost:1313/authentication/login-2/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Login illustration</a>
</li>
<li>
<a href="http://localhost:1313/authentication/login-3/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Login background</a>
</li>
<li>
<a href="http://localhost:1313/authentication/register-1/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Register feature list</a>
</li>
<li>
<a href="http://localhost:1313/authentication/register-2/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Register illustration</a>
</li>
<li>
<a href="http://localhost:1313/authentication/register-3/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Register background</a>
</li>
</ul>
</li>
<li>
<button type="button" class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" aria-controls="dropdown-forgot" data-collapse-toggle="dropdown-forgot">
<svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm0 16a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm1-5.034V12a1 1 0 0 1-2 0v-1.418a1 1 0 0 1 1.038-.999 1.436 1.436 0 0 0 1.488-1.441 1.501 1.501 0 1 0-3-.116.986.986 0 0 1-1.037.961 1 1 0 0 1-.96-1.037A3.5 3.5 0 1 1 11 11.466Z"/>
</svg>
<span class="flex-1 text-left rtl:text-right whitespace-nowrap ms-3">Forgot password</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</button>
<ul id="dropdown-forgot" class="hidden py-2 space-y-2">
<li>
<a href="http://localhost:1313/authentication/forgot-password-1/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Feature list</a>
</li>
<li>
<a href="http://localhost:1313/authentication/forgot-password-2/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Illustration</a>
</li>
<li>
<a href="http://localhost:1313/authentication/forgot-password-3/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Background image</a>
</li>
</ul>
</li>
<li>
<button type="button" class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" aria-controls="dropdown-reset" data-collapse-toggle="dropdown-reset">
<svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z"/>
<path d="M6.737 11.061a2.961 2.961 0 0 1 .81-1.515l6.117-6.116A4.839 4.839 0 0 1 16 2.141V2a1.97 1.97 0 0 0-1.933-2H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18v-3.093l-1.546 1.546c-.413.413-.94.695-1.513.81l-3.4.679a2.947 2.947 0 0 1-1.85-.227 2.96 2.96 0 0 1-1.635-3.257l.681-3.397Z"/>
<path d="M8.961 16a.93.93 0 0 0 .189-.019l3.4-.679a.961.961 0 0 0 .49-.263l6.118-6.117a2.884 2.884 0 0 0-4.079-4.078l-6.117 6.117a.96.96 0 0 0-.263.491l-.679 3.4A.961.961 0 0 0 8.961 16Zm7.477-9.8a.958.958 0 0 1 .68-.281.961.961 0 0 1 .682 1.644l-.315.315-1.36-1.36.313-.318Zm-5.911 5.911 4.236-4.236 1.359 1.359-4.236 4.237-1.7.339.341-1.699Z"/>
</svg>
<span class="flex-1 text-left rtl:text-right whitespace-nowrap ms-3">Reset password</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</button>
<ul id="dropdown-reset" class="hidden py-2 space-y-2">
<li>
<a href="http://localhost:1313/authentication/reset-password-1/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Feature list</a>
</li>
<li>
<a href="http://localhost:1313/authentication/reset-password-2/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Illustration</a>
</li>
<li>
<a href="http://localhost:1313/authentication/reset-password-3/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Background image</a>
</li>
</ul>
</li>
<li>
<button type="button" class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" aria-controls="dropdown-status" data-collapse-toggle="dropdown-status">
<svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"/>
</svg>
<span class="flex-1 text-left rtl:text-right whitespace-nowrap ml-4">Status</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</button>
<ul id="dropdown-status" class="hidden py-2 space-y-2">
<li>
<a href="http://localhost:1313/status/404-1/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">404 with search</a>
</li>
<li>
<a href="http://localhost:1313/status/404-2/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">404 with illustration</a>
</li>
<li>
<a href="http://localhost:1313/status/404-3/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">404 with home button</a>
</li>
<li>
<a href="http://localhost:1313/status/500-1/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">500 with illustration</a>
</li>
<li>
<a href="http://localhost:1313/status/500-2/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">500 with background</a>
</li>
</ul>
</li>
<li>
<button type="button" class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" aria-controls="dropdown-legal" data-collapse-toggle="dropdown-legal">
<svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 21 20">
<path d="M20.168 6.136 14.325.293a1 1 0 0 0-1.414 0l-1.445 1.444a1 1 0 0 0 0 1.414l5.844 5.843a1 1 0 0 0 1.414 0l1.444-1.444a1 1 0 0 0 0-1.414Zm-4.205 2.927L11.4 4.5a1 1 0 0 0-1-.25L4.944 5.9a1 1 0 0 0-.652.624L.518 17.206a1 1 0 0 0 .236 1.04l.023.023 6.606-6.606a2.616 2.616 0 1 1 3.65 1.304 2.615 2.615 0 0 1-2.233.108l-6.61 6.609.024.023a1 1 0 0 0 1.04.236l10.682-3.773a1 1 0 0 0 .624-.653l1.653-5.457a.999.999 0 0 0-.25-.997Z"/>
<path d="M10.233 11.1a.613.613 0 1 0-.867-.868.613.613 0 0 0 .867.868Z"/>
</svg>
<span class="flex-1 text-left rtl:text-right whitespace-nowrap ml-4">Legal</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</button>
<ul id="dropdown-legal" class="hidden py-2 space-y-2">
<li>
<a href="http://localhost:1313/legal/terms-1/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Page with sidebar</a>
</li>
<li>
<a href="http://localhost:1313/legal/terms-2/" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Page with contact</a>
</li>
</ul>
</li>
<li>
<button type="button" class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" aria-controls="dropdown-resources" data-collapse-toggle="dropdown-resources">
<svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
<path d="M16 14V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v15a3 3 0 0 0 3 3h12a1 1 0 0 0 0-2h-1v-2a2 2 0 0 0 2-2ZM4 2h2v12H4V2Zm8 16H3a1 1 0 0 1 0-2h9v2Z"/>
</svg>
<span class="flex-1 text-left rtl:text-right whitespace-nowrap ml-4">Resources</span>
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</button>
<ul id="dropdown-resources" class="hidden py-2 space-y-2">
<li>
<a href="https://flowbite.com/docs/getting-started/introduction/" target="_blank" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Flowbite Library</a>
</li>
<li>
<a href="https://flowbite.com/blocks/" target="_blank" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Flowbite Blocks</a>
</li>
<li>
<a href="https://flowbite.com/figma/" target="_blank" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Flowbite Figma</a>
</li>
<li>
<a href="https://flowbite.com/icons/" target="_blank" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Flowbite Icons</a>
</li>
<li>
<a href="https://chat.openai.com/g/g-y7yC35HB9-flowbite-gpt" target="_blank" class="flex items-center w-full p-2 pl-11 text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">Flowbite GPT</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<main class="w-full antialiased">
<section class="bg-white dark:bg-gray-900">
<div class="grid max-w-screen-xl px-4 py-8 mx-auto lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12 pt-20 lg:pt-32 relative">
<div class="mr-auto place-self-center lg:col-span-7">
<h1 class="max-w-2xl mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl xl:text-6xl dark:text-white">Premium pages built with Tailwind CSS</h1>
<p class="max-w-2xl mb-6 text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400">Get started with 53 premium UI pages built with the utility classes from Tailwind CSS to upgrade your web development stack and customize the colors, fonts.</p>
<a href="#pages" class="inline-flex items-center justify-center px-5 py-3 mr-3 text-base font-medium text-center text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900 dark:bg-primary-600 dark:hover:bg-primary-700">
Explore pages
<svg class="w-5 h-5 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
<a href="https://flowbite.com/pro/#pricing" target="_blank" class="inline-flex items-center justify-center bg-white px-5 py-3 text-base font-medium text-center text-gray-900 border border-gray-200 rounded-lg hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 hover:text-primary-700 dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-800">
Pricing & FAQ
</a>
</div>
<div class="hidden lg:mt-0 lg:col-span-5 lg:flex">
<img src="http://localhost:1313/images/templates.png" class="dark:hidden xl:absolute xl:bottom-0 xl:right-0 max-w-xl w-full" alt="Tailwind CSS Marketing UI Templates">
<img src="http://localhost:1313/images/templates-dark.png" class="hidden dark:block max-w-xl xl:absolute xl:bottom-0 xl:right-0 w-full" alt="Tailwind CSS Marketing UI Templates Dark Mode">
</div>
</div>
</section>
<section id="pages" class="py-8 bg-gray-50 dark:bg-gray-800 lg:py-24">
<div class="px-4 mx-auto max-w-screen-xl lg:px-4 lg:text-center">
<h2 class="mb-4 text-2xl font-bold tracking-tight text-gray-900 lg:font-extrabold lg:text-4xl lg:leading-snug dark:text-white lg:text-center 2xl:px-48">Explore all pages</h2>
<p class="mb-10 text-lg font-normal text-gray-500 dark:text-gray-400 lg:text-center lg:text-xl lg:px-64 lg:mb-16">Explore the whole collection of official 53 premium landing and marketing UI pages coded with Tailwind CSS and Flowbite</p>
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-3">
<a href="http://localhost:1313/landing/agency/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Agency Landing</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Agency Landing thumbnail" src="http://localhost:1313/images/components/agency.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Agency Landing dark thumbnail" src="http://localhost:1313/images/components/agency-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/landing/mobile-application/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Mobile App Landing</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-52">
<img alt="Mobile App Landing thumbnail" src="http://localhost:1313/images/components/mobile.svg">
</div>
<div class="hidden relative dark:block w-52">
<img alt="Mobile App Landing dark thumbnail" src="http://localhost:1313/images/components/mobile-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/landing/digital-product/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Digital Product Landing</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Digital Product Landing thumbnail" src="http://localhost:1313/images/components/digital-product.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Digital Product Landing dark thumbnail" src="http://localhost:1313/images/components/digital-product-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/landing/saas/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">SaaS Product Landing</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="SaaS Product Landing thumbnail" src="http://localhost:1313/images/components/saas.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="SaaS Product Landing dark thumbnail" src="http://localhost:1313/images/components/saas-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/landing/open-source/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Open-source Project Landing</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Open-source Project Landing thumbnail" src="http://localhost:1313/images/components/open-source.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Open-source Project Landing dark thumbnail" src="http://localhost:1313/images/components/open-source-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/landing/pre-launch/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Pre-launch Landing</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Pre-launch Landing thumbnail" src="http://localhost:1313/images/components/pre-launch.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Pre-launch Landing dark thumbnail" src="http://localhost:1313/images/components/pre-launch-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/landing/physical-product/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Physical Product Landing</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Physical Product Landing thumbnail" src="http://localhost:1313/images/components/physical-product.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Physical Product Landing dark thumbnail" src="http://localhost:1313/images/components/physical-product-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/landing/crypto/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Crypto Landing</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Crypto Landing thumbnail" src="http://localhost:1313/images/components/crypto.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Crypto Landing dark thumbnail" src="http://localhost:1313/images/components/crypto-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/landing/event/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Event Schedule Landing</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Event Schedule Landing thumbnail" src="http://localhost:1313/images/components/event.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Event Schedule Landing dark thumbnail" src="http://localhost:1313/images/components/event-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/landing/ngo/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">NGO Presentation Landing</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="NGO Presentation Landing thumbnail" src="http://localhost:1313/images/components/ngo.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="NGO Presentation Landing dark thumbnail" src="http://localhost:1313/images/components/ngo-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/about/about-1/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">About page with feature list</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="About page with feature list thumbnail" src="http://localhost:1313/images/components/about-1.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="About page with feature list dark thumbnail" src="http://localhost:1313/images/components/about-1-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/about/about-2/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">About page with video</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="About page with video thumbnail" src="http://localhost:1313/images/components/about-2.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="About page with video dark thumbnail" src="http://localhost:1313/images/components/about-2-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/about/about-3/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">About page with statistics</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="About page with statistics thumbnail" src="http://localhost:1313/images/components/about-3.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="About page with statistics dark thumbnail" src="http://localhost:1313/images/components/about-3-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/services/services-1/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Services page with icon features</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Services page with icon features thumbnail" src="http://localhost:1313/images/components/services-1.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Services page with icon features dark thumbnail" src="http://localhost:1313/images/components/services-1-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/services/services-2/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Services page with image content</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Services page with image content thumbnail" src="http://localhost:1313/images/components/services-2.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Services page with image content dark thumbnail" src="http://localhost:1313/images/components/services-2-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/services/services-3/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Services page with image cards</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Services page with image cards thumbnail" src="http://localhost:1313/images/components/services-3.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Services page with image cards dark thumbnail" src="http://localhost:1313/images/components/services-3-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/services/services-4/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Services page with statistics and FAQ</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Services page with statistics and FAQ thumbnail" src="http://localhost:1313/images/components/services-4.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Services page with statistics and FAQ dark thumbnail" src="http://localhost:1313/images/components/services-4-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/team/team-1/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Team page with hover cards</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Team page with hover cards thumbnail" src="http://localhost:1313/images/components/team-1.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Team page with hover cards dark thumbnail" src="http://localhost:1313/images/components/team-1-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/team/team-2/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Team page with profile cards</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Team page with profile cards thumbnail" src="http://localhost:1313/images/components/team-2.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Team page with profile cards dark thumbnail" src="http://localhost:1313/images/components/team-2-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/team/team-3/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Team page with masonry grid</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Team page with masonry grid thumbnail" src="http://localhost:1313/images/components/team-3.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Team page with masonry grid dark thumbnail" src="http://localhost:1313/images/components/team-3-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/team/team-4/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Team page with outline cards</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Team page with outline cards thumbnail" src="http://localhost:1313/images/components/team-4.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Team page with outline cards dark thumbnail" src="http://localhost:1313/images/components/team-4-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/pricing/pricing-1/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Pricing page with single plan</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Pricing page with single plan thumbnail" src="http://localhost:1313/images/components/pricing-1.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Pricing page with single plan dark thumbnail" src="http://localhost:1313/images/components/pricing-1-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/pricing/pricing-2/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Pricing page with three plans</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Pricing page with three plans thumbnail" src="http://localhost:1313/images/components/pricing-2.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Pricing page with three plans dark thumbnail" src="http://localhost:1313/images/components/pricing-2-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/pricing/pricing-3/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Pricing page with price toggle</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Pricing page with price toggle thumbnail" src="http://localhost:1313/images/components/pricing-3.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Pricing page with price toggle dark thumbnail" src="http://localhost:1313/images/components/pricing-3-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/pricing/pricing-4/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Pricing page with comparison table</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Pricing page with comparison table thumbnail" src="http://localhost:1313/images/components/pricing-4.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Pricing page with comparison table dark thumbnail" src="http://localhost:1313/images/components/pricing-4-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/contact/contact-1/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Contact page with search</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Contact page with search thumbnail" src="http://localhost:1313/images/components/contact-1.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Contact page with search dark thumbnail" src="http://localhost:1313/images/components/contact-1-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/contact/contact-2/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Contact page with FAQ</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Contact page with FAQ thumbnail" src="http://localhost:1313/images/components/contact-2.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Contact page with FAQ dark thumbnail" src="http://localhost:1313/images/components/contact-2-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/contact/contact-3/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Contact page with background</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Contact page with background thumbnail" src="http://localhost:1313/images/components/contact-3.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Contact page with background dark thumbnail" src="http://localhost:1313/images/components/contact-3-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/contact/contact-4/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Contact page with options</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Contact page with options thumbnail" src="http://localhost:1313/images/components/contact-4.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Contact page with options dark thumbnail" src="http://localhost:1313/images/components/contact-4-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/blog/homepage/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Blog Landing Page</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Blog Landing Page thumbnail" src="http://localhost:1313/images/components/blog.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Blog Landing Page dark thumbnail" src="http://localhost:1313/images/components/blog-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/blog/article/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Blog Article Page</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Blog Article Page thumbnail" src="http://localhost:1313/images/components/article.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Blog Article Page dark thumbnail" src="http://localhost:1313/images/components/article-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/testimonials/testimonials-1/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Testimonials page with statistics</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Testimonials page with statistics thumbnail" src="http://localhost:1313/images/components/testimonials-1.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Testimonials page with statistics dark thumbnail" src="http://localhost:1313/images/components/testimonials-1-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/testimonials/testimonials-2/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Testimonials page with cards</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Testimonials page with cards thumbnail" src="http://localhost:1313/images/components/testimonials-2.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Testimonials page with cards dark thumbnail" src="http://localhost:1313/images/components/testimonials-2-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/portfolio/project-showcase/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Project Showcase page</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Project Showcase page thumbnail" src="http://localhost:1313/images/components/portfolio-1.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Project Showcase page dark thumbnail" src="http://localhost:1313/images/components/portfolio-1-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/authentication/login-1/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Login page with feature list</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Login page with feature list thumbnail" src="http://localhost:1313/images/components/login-1.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Login page with feature list dark thumbnail" src="http://localhost:1313/images/components/login-1-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/authentication/login-2/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Login page with illustration</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Login page with illustration thumbnail" src="http://localhost:1313/images/components/login-2.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Login page with illustration dark thumbnail" src="http://localhost:1313/images/components/login-2-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/authentication/login-3/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Login page with background image</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Login page with background image thumbnail" src="http://localhost:1313/images/components/login-3.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Login page with background image dark thumbnail" src="http://localhost:1313/images/components/login-3-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/authentication/register-1/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Register page with feature list</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Register page with feature list thumbnail" src="http://localhost:1313/images/components/register-1.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Register page with feature list dark thumbnail" src="http://localhost:1313/images/components/register-1-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/authentication/register-2/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Register page with illustration</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Register page with illustration thumbnail" src="http://localhost:1313/images/components/register-2.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Register page with illustration dark thumbnail" src="http://localhost:1313/images/components/register-2-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/authentication/register-3/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Register page with background image</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Register page with background image thumbnail" src="http://localhost:1313/images/components/register-3.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Register page with background image dark thumbnail" src="http://localhost:1313/images/components/register-3-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/authentication/forgot-password-1/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Forgot password with feature list</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Forgot password with feature list thumbnail" src="http://localhost:1313/images/components/forgot-password-1.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Forgot password with feature list dark thumbnail" src="http://localhost:1313/images/components/forgot-password-1-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/authentication/forgot-password-2/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Forgot password with illustration</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Forgot password with illustration thumbnail" src="http://localhost:1313/images/components/forgot-password-2.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Forgot password with illustration dark thumbnail" src="http://localhost:1313/images/components/forgot-password-2-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/authentication/forgot-password-3/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Forgot password with background image</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Forgot password with background image thumbnail" src="http://localhost:1313/images/components/forgot-password-3.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Forgot password with background image dark thumbnail" src="http://localhost:1313/images/components/forgot-password-3-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/authentication/reset-password-1/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Reset password with feature list</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Reset password with feature list thumbnail" src="http://localhost:1313/images/components/reset-password-1.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Reset password with feature list dark thumbnail" src="http://localhost:1313/images/components/reset-password-1-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/authentication/reset-password-2/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Reset password with illustration</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Reset password with illustration thumbnail" src="http://localhost:1313/images/components/reset-password-2.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Reset password with illustration dark thumbnail" src="http://localhost:1313/images/components/reset-password-2-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/authentication/reset-password-3/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Reset password with background image</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Reset password with background image thumbnail" src="http://localhost:1313/images/components/reset-password-3.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Reset password with background image dark thumbnail" src="http://localhost:1313/images/components/reset-password-3-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/status/404-1/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">404 page with search bar</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="404 page with search bar thumbnail" src="http://localhost:1313/images/components/404-1.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="404 page with search bar dark thumbnail" src="http://localhost:1313/images/components/404-1-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/status/404-2/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">404 page with illustration</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="404 page with illustration thumbnail" src="http://localhost:1313/images/components/404-2.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="404 page with illustration dark thumbnail" src="http://localhost:1313/images/components/404-2-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/status/404-3/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">404 page with homepage button</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="404 page with homepage button thumbnail" src="http://localhost:1313/images/components/404-3.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="404 page with homepage button dark thumbnail" src="http://localhost:1313/images/components/404-3-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/status/500-1/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">500 page with illustration</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="500 page with illustration thumbnail" src="http://localhost:1313/images/components/500-1.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="500 page with illustration dark thumbnail" src="http://localhost:1313/images/components/500-1-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/status/500-2/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">500 page with background image</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="500 page with background image thumbnail" src="http://localhost:1313/images/components/500-2.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="500 page with background image dark thumbnail" src="http://localhost:1313/images/components/500-2-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/legal/terms-1/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Legal page with sidebar</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Legal page with sidebar thumbnail" src="http://localhost:1313/images/components/terms-1.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Legal page with sidebar dark thumbnail" src="http://localhost:1313/images/components/terms-1-dark.svg">
</div>
</div>
</a>
<a href="http://localhost:1313/legal/terms-2/" class="h-64 bg-white rounded-lg border border-gray-100 hover:border-gray-100 dark:border-gray-800 dark:hover:border-gray-700 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900">
<div class="bg-gray-100 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
<span class="text-base font-medium text-gray-900 dark:text-white">Legal page with contact button</span>
<span class="text-gray-500 dark:text-gray-400">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"></path>
</svg>
</span>
</div>
<div class="flex justify-center items-center h-52">
<div class="relative dark:hidden w-56">
<img alt="Legal page with contact button thumbnail" src="http://localhost:1313/images/components/terms-2.svg">
</div>
<div class="hidden relative dark:block w-56">
<img alt="Legal page with contact button dark thumbnail" src="http://localhost:1313/images/components/terms-2-dark.svg">
</div>
</div>
</a>
</div>
</div>
</section>
<section class="bg-white dark:bg-gray-900 border-y border-gray-100 dark:border-gray-700">
<div class="mx-auto max-w-screen-xl px-4 py-8 lg:py-24">
<div class="mx-auto grid max-w-screen-xl grid-cols-1 items-start justify-between gap-24 py-1 lg:grid-cols-2">
<div class="flex flex-col gap-8">
<div class="flex w-full flex-col items-start justify-center gap-6">
<h2 class="text-3xl font-extrabold leading-none text-gray-900 dark:text-white lg:text-4xl">Design with Figma</h2>
<p class="text-lg text-gray-500 dark:text-gray-400">Get started with the definitive design system for building web applications with Tailwind CSS and Flowbite with Figma by leveraging hundreds of UI components, sections, and pages based on variants, properties, auto-layout, dark mode, responsive support, and more.</p>
</div>
<div class="flex flex-col items-center gap-4">
<div class="max-w-l isolate flex flex-col items-start gap-4 self-stretch">
<a rel="nofollow noreferrer noopener" target="_blank" class="inline-flex lg:max-w-sm items-center justify-start gap-5 self-stretch rounded-lg border border-gray-200 bg-white px-4 py-3.5 text-center text-base font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700 sm:gap-7" href="https://www.figma.com/file/SrvjS6Pmn04fT6ZEUa1spW/flowbite-pro-figma-v2.9.0?type=design&mode=design">
<img src="http://localhost:1313/images/technologies/figma.svg" class="w-8 h-8 rounded-lg" alt="Figma logo">Preview in Figma
<div class="ml-auto block">
<svg class="w-4 h-4 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"></path>
</svg>
</div>
</a>
<a class="inline-flex lg:max-w-sm items-center justify-start gap-4 self-stretch rounded-lg border border-gray-200 bg-white px-4 py-3.5 text-center text-base font-medium text-gray-900 placeholder:py-3.5 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-700 sm:gap-6" href="https://flowbite.com/figma/">
<img src="http://localhost:1313/images/logo.svg" class="w-8 h-8 rounded-lg" alt="Flowbite logo">Learn more
<div class="ml-auto block">
<svg class="w-4 h-4 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"></path>
</svg>
</div>
</a>
</div>
</div>
</div>
<div class="hidden h-full flex-col items-center justify-center lg:flex">
<div class="relative rounded-xl dark:hidden"><img src="http://localhost:1313/images/figma-mockup-light.svg" class="max-w-auto w-full" alt="Flowbite Figma Design System mockup"></div>
<div class="relative hidden dark:block"><img src="http://localhost:1313/images/figma-mockup-dark.svg" class="max-w-auto w-full rounded-xl" alt="Flowbite Figma Design System mockup (dark mode)"></div>
</div>
</div>
</div>
</section>
<section class="bg-gray-50 dark:bg-gray-800">
<div class="mx-auto w-full max-w-screen-xl px-4 py-8 lg:py-24">
<div class="flex w-full flex-row self-stretch py-6 lg:gap-16 lg:py-10">
<div class="hidden w-1/2 items-center lg:flex"><img src="http://localhost:1313/images/dark-mode.svg" class="dark:hidden w-full" alt="Flowbite Dark Mode"><img src="http://localhost:1313/images/dark-mode-dark.svg" class="hidden dark:block w-full" alt="Flowbite Dark Mode (dark)"></div>
<div class="flex w-1/2 flex-grow flex-col items-start gap-4 divide-y dark:divide-gray-700 lg:gap-8">
<div class="flex flex-col items-start gap-3 self-stretch sm:gap-4">
<h2 class="text-3xl font-extrabold leading-tight text-gray-900 dark:text-white lg:text-4xl">Dark mode integration</h2>
<p class="text-lg text-gray-500 dark:text-gray-400">Flowbite has native built-in support for <a href="https://flowbite.com/docs/customize/dark-mode/" class="text-lg font-medium text-gray-900 underline hover:no-underline dark:text-white">dark mode</a> by using the variants from Tailwind CSS and the Flowbite Design System.</p>
<p class="text-lg text-gray-500 dark:text-gray-400">All of the UI components and templates from Flowbite will automatically switch to dark mode based on your browser settings or custom project configuration.</p>
</div>
<div class="flex flex-col items-start self-stretch pt-8">
<ul class="mb-6 list-inside list-none space-y-4 font-medium text-gray-900 dark:text-white lg:mb-8">
<li class="flex items-center gap-2">
<svg class="h-5 w-5 rounded-full bg-blue-100 p-1 text-blue-700 dark:text-blue-600 dark:bg-gray-700" width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.99992 8.29289L4.64637 7.93934L1.35697 4.64995C1.26295 4.56044 1.13776 4.51096 1.00786 4.51209C0.876764 4.51323 0.751358 4.56582 0.658654 4.65852C0.56595 4.75122 0.513365 4.87663 0.512226 5.00773C0.511097 5.13763 0.560568 5.26282 0.650079 5.35684L4.64642 9.35318C4.64644 9.3532 4.64645 9.35322 4.64647 9.35323C4.74023 9.44693 4.86736 9.49957 4.99992 9.49957C5.13248 9.49957 5.25961 9.44693 5.35337 9.35323L4.99992 8.29289ZM4.99992 8.29289L5.35347 7.93934L12.6464 0.646393C12.6464 0.646376 12.6465 0.646358 12.6465 0.64634C12.7402 0.552638 12.8674 0.5 12.9999 0.5C13.1325 0.5 13.2597 0.552658 13.3534 0.646393C13.4471 0.740146 13.4997 0.867253 13.4997 0.999786C13.4997 1.13234 13.4471 1.25947 13.3534 1.35323C13.3533 1.35325 13.3533 1.35327 13.3533 1.35329L5.35342 9.35318L4.99992 8.29289Z" stroke="currentColor"></path>
</svg>
Increased accessibility based on room brightness
</li>
<li class="flex items-center gap-2">
<svg class="h-5 w-5 rounded-full bg-blue-100 p-1 text-blue-700 dark:text-blue-600 dark:bg-gray-700" width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.99992 8.29289L4.64637 7.93934L1.35697 4.64995C1.26295 4.56044 1.13776 4.51096 1.00786 4.51209C0.876764 4.51323 0.751358 4.56582 0.658654 4.65852C0.56595 4.75122 0.513365 4.87663 0.512226 5.00773C0.511097 5.13763 0.560568 5.26282 0.650079 5.35684L4.64642 9.35318C4.64644 9.3532 4.64645 9.35322 4.64647 9.35323C4.74023 9.44693 4.86736 9.49957 4.99992 9.49957C5.13248 9.49957 5.25961 9.44693 5.35337 9.35323L4.99992 8.29289ZM4.99992 8.29289L5.35347 7.93934L12.6464 0.646393C12.6464 0.646376 12.6465 0.646358 12.6465 0.64634C12.7402 0.552638 12.8674 0.5 12.9999 0.5C13.1325 0.5 13.2597 0.552658 13.3534 0.646393C13.4471 0.740146 13.4997 0.867253 13.4997 0.999786C13.4997 1.13234 13.4471 1.25947 13.3534 1.35323C13.3533 1.35325 13.3533 1.35327 13.3533 1.35329L5.35342 9.35318L4.99992 8.29289Z" stroke="currentColor"></path>
</svg>
Better visibility for users with low vision
</li>
<li class="flex items-center gap-2">
<svg class="h-5 w-5 rounded-full bg-blue-100 p-1 text-blue-700 dark:text-blue-600 dark:bg-gray-700" width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.99992 8.29289L4.64637 7.93934L1.35697 4.64995C1.26295 4.56044 1.13776 4.51096 1.00786 4.51209C0.876764 4.51323 0.751358 4.56582 0.658654 4.65852C0.56595 4.75122 0.513365 4.87663 0.512226 5.00773C0.511097 5.13763 0.560568 5.26282 0.650079 5.35684L4.64642 9.35318C4.64644 9.3532 4.64645 9.35322 4.64647 9.35323C4.74023 9.44693 4.86736 9.49957 4.99992 9.49957C5.13248 9.49957 5.25961 9.44693 5.35337 9.35323L4.99992 8.29289ZM4.99992 8.29289L5.35347 7.93934L12.6464 0.646393C12.6464 0.646376 12.6465 0.646358 12.6465 0.64634C12.7402 0.552638 12.8674 0.5 12.9999 0.5C13.1325 0.5 13.2597 0.552658 13.3534 0.646393C13.4471 0.740146 13.4997 0.867253 13.4997 0.999786C13.4997 1.13234 13.4471 1.25947 13.3534 1.35323C13.3533 1.35325 13.3533 1.35327 13.3533 1.35329L5.35342 9.35318L4.99992 8.29289Z" stroke="currentColor"></path>
</svg>
Improved readability for users with light sensitivity
</li>
<li class="flex items-center gap-2">
<svg class="h-5 w-5 rounded-full bg-blue-100 p-1 text-blue-700 dark:text-blue-600 dark:bg-gray-700" width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.99992 8.29289L4.64637 7.93934L1.35697 4.64995C1.26295 4.56044 1.13776 4.51096 1.00786 4.51209C0.876764 4.51323 0.751358 4.56582 0.658654 4.65852C0.56595 4.75122 0.513365 4.87663 0.512226 5.00773C0.511097 5.13763 0.560568 5.26282 0.650079 5.35684L4.64642 9.35318C4.64644 9.3532 4.64645 9.35322 4.64647 9.35323C4.74023 9.44693 4.86736 9.49957 4.99992 9.49957C5.13248 9.49957 5.25961 9.44693 5.35337 9.35323L4.99992 8.29289ZM4.99992 8.29289L5.35347 7.93934L12.6464 0.646393C12.6464 0.646376 12.6465 0.646358 12.6465 0.64634C12.7402 0.552638 12.8674 0.5 12.9999 0.5C13.1325 0.5 13.2597 0.552658 13.3534 0.646393C13.4471 0.740146 13.4997 0.867253 13.4997 0.999786C13.4997 1.13234 13.4471 1.25947 13.3534 1.35323C13.3533 1.35325 13.3533 1.35327 13.3533 1.35329L5.35342 9.35318L4.99992 8.29289Z" stroke="currentColor"></path>
</svg>
High quality UI/UX design for modern applications
</li>
</ul>
<a class="flex w-full sm:w-auto sm:inline-flex items-center mb-3 sm:mb-0 text-white bg-blue-700 dark:bg-blue-600 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:hover:bg-blue-700 dark:focus:ring-blue-800 font-medium rounded-lg text-base px-5 py-2.5 text-center inline-block mr-4" href="https://flowbite.com/docs/customize/dark-mode/">
Learn how to integrate dark mode
<svg class="w-3.5 h-3.5 ml-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
<section class="bg-white dark:bg-gray-900">
<div class="mx-auto w-full max-w-screen-xl px-4 py-8 lg:py-24">
<div class="flex w-full flex-row self-stretch py-6 lg:gap-16 lg:py-10">
<div class="flex w-1/2 flex-grow flex-col items-start gap-4 divide-y dark:divide-gray-700 lg:gap-8">
<div class="flex flex-col items-start gap-3 self-stretch sm:gap-4">
<h2 class="text-3xl font-extrabold leading-tight text-gray-900 dark:text-white lg:text-4xl">Compatible with Tailwind CSS</h2>
<p class="text-lg text-gray-500 dark:text-gray-400">
Flowbite uses the utility classes from Tailwind CSS under the hood and provides hundreds of UI components and templates that you can use to quickly develop websites directly from your HTML.
</p>
<p class="text-lg text-gray-500 dark:text-gray-400">The Flowbite Library also powers the interactivity of your UI components such as the modals, drawers, dropdowns, and navbars so that you barely have to write any JavaScript.</p>
<p class="text-lg text-gray-500 dark:text-gray-400">
<a href="https://tailwindcss.com" class="text-lg font-medium text-gray-900 underline hover:no-underline dark:text-white">Tailwind CSS</a> <!-- -->is the most popular and open-source utility-first CSS framework on the market and the<!-- --> <a href="https://flowbite.com" class="text-lg font-medium text-gray-900 underline hover:no-underline dark:text-white">Flowbite ecosystem</a> <!-- -->uses this framework in all of the libraries including the vanilla JS, Svelte, Vue, and React one.
</p>
<div class="flex flex-row gap-4">
<a class="flex items-center gap-2 font-medium text-primary-600 dark:text-primary-500 hover:underline" href="https://flowbite.com">
Learn more about Flowbite
<svg width="16" height="11" viewBox="0 0 16 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.293 0.792787C10.4805 0.605316 10.7348 0.5 11 0.5C11.2652 0.5 11.5195 0.605316 11.707 0.792787L15.707 4.79279C15.8945 4.98031 15.9998 5.23462 15.9998 5.49979C15.9998 5.76495 15.8945 6.01926 15.707 6.20679L11.707 10.2068C11.5184 10.3889 11.2658 10.4897 11.0036 10.4875C10.7414 10.4852 10.4906 10.38 10.3052 10.1946C10.1198 10.0092 10.0146 9.75838 10.0123 9.49619C10.01 9.23399 10.1108 8.98139 10.293 8.79279L12.586 6.49979H1C0.734784 6.49979 0.48043 6.39443 0.292893 6.20689C0.105357 6.01936 0 5.765 0 5.49979C0 5.23457 0.105357 4.98022 0.292893 4.79268C0.48043 4.60514 0.734784 4.49979 1 4.49979H12.586L10.293 2.20679C10.1055 2.01926 10.0002 1.76495 10.0002 1.49979C10.0002 1.23462 10.1055 0.980314 10.293 0.792787Z" fill="currentColor"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="hidden w-1/2 items-center lg:flex">
<img alt="Tailwind CSS library" class="dark:hidden" src="http://localhost:1313/images/tailwind-library.svg">
<img alt="Tailwind CSS library dark" class="hidden dark:block" src="http://localhost:1313/images/tailwind-library-dark.svg">
</div>
</div>
</div>
</section>
<section class="bg-gray-50 dark:bg-gray-800">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<div class="mx-auto max-w-screen-md text-center">
<h2 class="mb-4 text-3xl lg:text-4xl tracking-tight font-extrabold leading-tight text-gray-900 dark:text-white">Just a glimpse of Flowbite Pro</h2>
<p class="mb-6 lg:text-lg text-gray-500 dark:text-gray-400">This collection of templates is just a small part of what you get from the Flowbite Pro license from where you can get access to over 600 premium UI components, blocks, and templates available in Tailwind CSS and Flowbite.</p>
<a href="https://flowbite.com/pro/" target="_blank" class="inline-flex items-center text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-base px-5 py-2.5 mr-2 border border-primary-700 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800 dark:border-primary-600">Learn more about the pro version</a>
<a href="https://flowbite.com/pro/#pricing" target="_blank" class="inline-flex items-center py-2.5 px-5 me-2 mb-2 text-base font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Pricing & FAQ</a>
</div>
</div>
</section>
<footer class="border-t border-b border-gray-100 bg-white dark:bg-gray-900 dark:border-gray-700">
<div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-16 lg:py-24">
<div class="grid grid-cols-2 gap-8 lg:grid-cols-6">
<div class="col-span-2">
<a href="http://localhost:1313/" class="flex items-center mb-2 text-2xl font-semibold text-gray-900 sm:mb-0 dark:text-white">
<svg class="h-8 mr-2" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25.2696 13.126C25.1955 13.6364 24.8589 14.3299 24.4728 14.9328C23.9856 15.6936 23.2125 16.2264 22.3276 16.4114L18.43 17.2265C17.8035 17.3575 17.2355 17.6853 16.8089 18.1621L14.2533 21.0188C13.773 21.5556 13.4373 21.4276 13.4373 20.7075C13.4315 20.7342 12.1689 23.9903 15.5149 25.9202C16.8005 26.6618 18.6511 26.3953 19.9367 25.6538L26.7486 21.7247C29.2961 20.2553 31.0948 17.7695 31.6926 14.892C31.7163 14.7781 31.7345 14.6639 31.7542 14.5498L25.2696 13.126Z"
fill="url(#paint0_linear_11430_22515)" />
<path
d="M23.5028 9.20133C24.7884 9.94288 25.3137 11.0469 25.3137 12.53C25.3137 12.7313 25.2979 12.9302 25.2694 13.1261L28.0141 14.3051L31.754 14.5499C32.2329 11.7784 31.2944 8.92561 29.612 6.65804C28.3459 4.9516 26.7167 3.47073 24.7581 2.34097C23.167 1.42325 21.5136 0.818599 19.8525 0.486816L17.9861 2.90382L17.3965 5.67918L23.5028 9.20133Z"
fill="url(#paint1_linear_11430_22515)" />
<path
d="M1.5336 11.2352C1.5329 11.2373 1.53483 11.238 1.53556 11.2358C1.67958 10.8038 1.86018 10.3219 2.08564 9.80704C3.26334 7.11765 5.53286 5.32397 8.32492 4.40943C11.117 3.49491 14.1655 3.81547 16.7101 5.28323L17.3965 5.67913L19.8525 0.486761C12.041 -1.07341 4.05728 3.51588 1.54353 11.2051C1.54233 11.2087 1.53796 11.2216 1.5336 11.2352Z"
fill="url(#paint2_linear_11430_22515)" />
<path
d="M19.6699 25.6538C18.3843 26.3953 16.8003 26.3953 15.5147 25.6538C15.3402 25.5531 15.1757 25.4399 15.0201 25.3174L12.7591 26.8719L10.8103 30.0209C12.9733 31.821 15.7821 32.3997 18.589 32.0779C20.7013 31.8357 22.7995 31.1665 24.7582 30.0368C26.3492 29.1191 27.7 27.9909 28.8182 26.7195L27.6563 23.8962L25.7762 22.1316L19.6699 25.6538Z"
fill="url(#paint3_linear_11430_22515)" />
<path
d="M15.0201 25.3175C14.0296 24.5373 13.4371 23.3406 13.4371 22.0588V21.931V11.2558C13.4371 10.6521 13.615 10.5494 14.1384 10.8513C13.3323 10.3864 11.4703 8.79036 9.17118 10.1165C7.88557 10.858 6.8269 12.4949 6.8269 13.978V21.8362C6.8269 24.775 8.34906 27.8406 10.5445 29.7966C10.6313 29.874 10.7212 29.9469 10.8103 30.0211L15.0201 25.3175Z"
fill="url(#paint4_linear_11430_22515)" />
<path
d="M28.6604 5.49565C28.6589 5.49395 28.6573 5.49532 28.6589 5.49703C28.9613 5.83763 29.2888 6.23485 29.6223 6.68734C31.3648 9.05099 32.0158 12.0447 31.4126 14.9176C30.8093 17.7906 29.0071 20.2679 26.4625 21.7357L25.7761 22.1316L28.8181 26.7195C34.0764 20.741 34.09 11.5388 28.6815 5.51929C28.6789 5.51641 28.67 5.50622 28.6604 5.49565Z"
fill="url(#paint5_linear_11430_22515)" />
<path
d="M7.09355 13.978C7.09354 12.4949 7.88551 11.1244 9.17113 10.3829C9.34564 10.2822 9.52601 10.1965 9.71002 10.1231L9.49304 7.38962L7.96861 4.26221C5.32671 5.23364 3.1897 7.24125 2.06528 9.83067C1.2191 11.7793 0.75001 13.9294 0.75 16.1888C0.75 18.0243 1.05255 19.7571 1.59553 21.3603L4.62391 21.7666L7.09355 21.0223V13.978Z"
fill="url(#paint6_linear_11430_22515)" />
<path
d="M9.71016 10.1231C10.8817 9.65623 12.2153 9.74199 13.3264 10.3829L13.4372 10.4468L22.3326 15.5777C22.9566 15.9376 22.8999 16.2918 22.1946 16.4392L22.7078 16.332C23.383 16.1908 23.9999 15.8457 24.4717 15.3428C25.2828 14.4782 25.5806 13.4351 25.5806 12.5299C25.5806 11.0468 24.7886 9.67634 23.503 8.93479L16.6911 5.00568C14.1436 3.53627 11.0895 3.22294 8.29622 4.14442C8.18572 4.18087 8.07756 4.2222 7.96875 4.26221L9.71016 10.1231Z"
fill="url(#paint7_linear_11430_22515)" />
<path
d="M20.0721 31.8357C20.0744 31.8352 20.0739 31.8332 20.0717 31.8337C19.6252 31.925 19.1172 32.0097 18.5581 32.0721C15.638 32.3978 12.7174 31.4643 10.5286 29.5059C8.33986 27.5474 7.09347 24.7495 7.09348 21.814L7.09347 21.0222L1.59546 21.3602C4.1488 28.8989 12.1189 33.5118 20.0411 31.8421C20.0449 31.8413 20.0582 31.8387 20.0721 31.8357Z"
fill="url(#paint8_linear_11430_22515)" />
<defs>
<linearGradient id="paint0_linear_11430_22515" x1="20.8102" y1="23.9532" x2="23.9577" y2="12.9901"
gradientUnits="userSpaceOnUse">
<stop stop-color="#1724C9" />
<stop offset="1" stop-color="#1C64F2" />
</linearGradient>
<linearGradient id="paint1_linear_11430_22515" x1="28.0593" y1="10.5837" x2="19.7797" y2="2.33321"
gradientUnits="userSpaceOnUse">
<stop stop-color="#1C64F2" />
<stop offset="1" stop-color="#0092FF" />
</linearGradient>
<linearGradient id="paint2_linear_11430_22515" x1="16.9145" y1="5.2045" x2="4.42432" y2="5.99375"
gradientUnits="userSpaceOnUse">
<stop stop-color="#0092FF" />
<stop offset="1" stop-color="#45B2FF" />
</linearGradient>
<linearGradient id="paint3_linear_11430_22515" x1="16.0698" y1="28.846" x2="27.2866" y2="25.8192"
gradientUnits="userSpaceOnUse">
<stop stop-color="#1C64F2" />
<stop offset="1" stop-color="#0092FF" />
</linearGradient>
<linearGradient id="paint4_linear_11430_22515" x1="8.01881" y1="15.8661" x2="15.9825" y2="24.1181"
gradientUnits="userSpaceOnUse">
<stop stop-color="#1724C9" />
<stop offset="1" stop-color="#1C64F2" />
</linearGradient>
<linearGradient id="paint5_linear_11430_22515" x1="26.2004" y1="21.8189" x2="31.7569" y2="10.6178"
gradientUnits="userSpaceOnUse">
<stop stop-color="#0092FF" />
<stop offset="1" stop-color="#45B2FF" />
</linearGradient>
<linearGradient id="paint6_linear_11430_22515" x1="6.11387" y1="9.31427" x2="3.14054" y2="20.4898"
gradientUnits="userSpaceOnUse">
<stop stop-color="#1C64F2" />
<stop offset="1" stop-color="#0092FF" />
</linearGradient>
<linearGradient id="paint7_linear_11430_22515" x1="21.2932" y1="8.78271" x2="10.4278" y2="11.488"
gradientUnits="userSpaceOnUse">
<stop stop-color="#1724C9" />
<stop offset="1" stop-color="#1C64F2" />
</linearGradient>
<linearGradient id="paint8_linear_11430_22515" x1="7.15667" y1="21.5399" x2="14.0824" y2="31.9579"
gradientUnits="userSpaceOnUse">
<stop stop-color="#0092FF" />
<stop offset="1" stop-color="#45B2FF" />
</linearGradient>
</defs>
</svg>
Flowbite
</a>
<p class="my-4 text-gray-500 dark:text-gray-400">
We are an open-source library of over 400+ web components and interactive elements built with the utility
classes from
Tailwind CSS.
</p>
<ul class="flex mt-5 space-x-6">
<li>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
</li>
<li>
<a href="#" class="text-gray-500 hover:text-gray-900 dark:hover:text-white dark:text-gray-400">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
clip-rule="evenodd" />
</svg>
</a>
</li>
</ul>
</div>
<div class="lg:mx-auto">
<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Company</h2>
<ul class="text-gray-500 dark:text-gray-400">
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">About</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Careers</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Brand Center</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Blog</a>
</li>
</ul>
</div>
<div class="lg:mx-auto">
<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Help center</h2>
<ul class="text-gray-500 dark:text-gray-400">
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Discord Server</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Twitter</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Facebook
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Contact Us</a>
</li>
</ul>
</div>
<div class="lg:mx-auto">
<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Legal</h2>
<ul class="text-gray-500 dark:text-gray-400">
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Privacy Policy</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Licensing</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Terms</a>
</li>
</ul>
</div>
<div class="lg:mx-auto">
<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Download</h2>
<ul class="text-gray-500 dark:text-gray-400">
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">iOS</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Android</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">Windows</a>
</li>
<li class="mb-4">
<a href="#" class="hover:underline hover:text-gray-900 dark:hover:text-white">MacOS</a>
</li>
</ul>
</div>
</div>
<hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-800 lg:my-8">
<span class="block text-sm text-center text-gray-500 dark:text-gray-400">© 2021-<span id="currentYear">2023</span> <a <a href="https://flowbite.com"
class="hover:underline">Flowbite™</a>. All Rights Reserved.</span>
</div>
</footer>
</main>
<script src="http://localhost:1313//app.bundle.js"></script>
</body>
</html>