Free handcrafted components
Sneak peeks are the best!
Explore a free collection of our carefully crafted UI Components through our neat Preview Pane. Grab one of the available Starter Kits and give them a go.
Application UILayoutsStackedLight Header and Footer
JS required
<!-- Page Container -->
<div
id="page-container"
class="mx-auto flex min-h-dvh w-full min-w-[320px] flex-col bg-gray-100 dark:bg-gray-900 dark:text-gray-100"
>
<!-- Page Header -->
<header
id="page-header"
class="z-1 flex flex-none items-center bg-white shadow-sm dark:bg-gray-800"
>
<div class="container mx-auto px-4 lg:px-8 xl:max-w-7xl">
<div class="flex justify-between py-4">
<!-- Left Section -->
<div class="flex items-center">
<!-- Logo -->
<a
href="javascript:void(0)"
class="group inline-flex items-center gap-2 text-lg font-bold tracking-wide text-gray-900 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-300"
>
<svg
class="hi-mini hi-cube-transparent inline-block size-5 text-blue-600 transition group-hover:scale-110 dark:text-blue-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M9.638 1.093a.75.75 0 01.724 0l2 1.104a.75.75 0 11-.724 1.313L10 2.607l-1.638.903a.75.75 0 11-.724-1.313l2-1.104zM5.403 4.287a.75.75 0 01-.295 1.019l-.805.444.805.444a.75.75 0 01-.724 1.314L3.5 7.02v.73a.75.75 0 01-1.5 0v-2a.75.75 0 01.388-.657l1.996-1.1a.75.75 0 011.019.294zm9.194 0a.75.75 0 011.02-.295l1.995 1.101A.75.75 0 0118 5.75v2a.75.75 0 01-1.5 0v-.73l-.884.488a.75.75 0 11-.724-1.314l.806-.444-.806-.444a.75.75 0 01-.295-1.02zM7.343 8.284a.75.75 0 011.02-.294L10 8.893l1.638-.903a.75.75 0 11.724 1.313l-1.612.89v1.557a.75.75 0 01-1.5 0v-1.557l-1.612-.89a.75.75 0 01-.295-1.019zM2.75 11.5a.75.75 0 01.75.75v1.557l1.608.887a.75.75 0 01-.724 1.314l-1.996-1.101A.75.75 0 012 14.25v-2a.75.75 0 01.75-.75zm14.5 0a.75.75 0 01.75.75v2a.75.75 0 01-.388.657l-1.996 1.1a.75.75 0 11-.724-1.313l1.608-.887V12.25a.75.75 0 01.75-.75zm-7.25 4a.75.75 0 01.75.75v.73l.888-.49a.75.75 0 01.724 1.313l-2 1.104a.75.75 0 01-.724 0l-2-1.104a.75.75 0 11.724-1.313l.888.49v-.73a.75.75 0 01.75-.75z"
clip-rule="evenodd"
/>
</svg>
<span>Company</span>
</a>
<!-- END Logo -->
</div>
<!-- END Left Section -->
<!-- Right Section -->
<div class="flex items-center gap-2 lg:gap-5">
<!-- Desktop Navigation -->
<nav class="hidden items-center gap-2 lg:flex">
<a
href="javascript:void(0)"
class="group flex items-center gap-2 rounded-lg border border-blue-100 bg-blue-50 px-3 py-2 text-sm font-medium text-blue-600 dark:border-transparent dark:bg-gray-700 dark:text-white"
>
<svg
class="hi-mini hi-home inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z"
clip-rule="evenodd"
/>
</svg>
<span>Dashboard</span>
</a>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 rounded-lg border border-transparent px-3 py-2 text-sm font-medium text-gray-800 hover:bg-blue-50 hover:text-blue-600 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:active:border-gray-600"
>
<svg
class="hi-mini hi-users inline-block size-5 opacity-25 group-hover:opacity-100"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M7 8a3 3 0 100-6 3 3 0 000 6zM14.5 9a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM1.615 16.428a1.224 1.224 0 01-.569-1.175 6.002 6.002 0 0111.908 0c.058.467-.172.92-.57 1.174A9.953 9.953 0 017 18a9.953 9.953 0 01-5.385-1.572zM14.5 16h-.106c.07-.297.088-.611.048-.933a7.47 7.47 0 00-1.588-3.755 4.502 4.502 0 015.874 2.636.818.818 0 01-.36.98A7.465 7.465 0 0114.5 16z"
/>
</svg>
<span>Customers</span>
</a>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 rounded-lg border border-transparent px-3 py-2 text-sm font-medium text-gray-800 hover:bg-blue-50 hover:text-blue-600 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:active:border-gray-600"
>
<svg
class="hi-mini hi-briefcase inline-block size-5 opacity-25 group-hover:opacity-100"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M6 3.75A2.75 2.75 0 018.75 1h2.5A2.75 2.75 0 0114 3.75v.443c.572.055 1.14.122 1.706.2C17.053 4.582 18 5.75 18 7.07v3.469c0 1.126-.694 2.191-1.83 2.54-1.952.599-4.024.921-6.17.921s-4.219-.322-6.17-.921C2.694 12.73 2 11.665 2 10.539V7.07c0-1.321.947-2.489 2.294-2.676A41.047 41.047 0 016 4.193V3.75zm6.5 0v.325a41.622 41.622 0 00-5 0V3.75c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25zM10 10a1 1 0 00-1 1v.01a1 1 0 001 1h.01a1 1 0 001-1V11a1 1 0 00-1-1H10z"
clip-rule="evenodd"
/>
<path
d="M3 15.055v-.684c.126.053.255.1.39.142 2.092.642 4.313.987 6.61.987 2.297 0 4.518-.345 6.61-.987.135-.041.264-.089.39-.142v.684c0 1.347-.985 2.53-2.363 2.686a41.454 41.454 0 01-9.274 0C3.985 17.585 3 16.402 3 15.055z"
/>
</svg>
<span>Projects</span>
</a>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 rounded-lg border border-transparent px-3 py-2 text-sm font-medium text-gray-800 hover:bg-blue-50 hover:text-blue-600 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:active:border-gray-600"
>
<svg
class="hi-mini hi-chart-bar inline-block size-5 opacity-25 group-hover:opacity-100"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M15.5 2A1.5 1.5 0 0014 3.5v13a1.5 1.5 0 001.5 1.5h1a1.5 1.5 0 001.5-1.5v-13A1.5 1.5 0 0016.5 2h-1zM9.5 6A1.5 1.5 0 008 7.5v9A1.5 1.5 0 009.5 18h1a1.5 1.5 0 001.5-1.5v-9A1.5 1.5 0 0010.5 6h-1zM3.5 10A1.5 1.5 0 002 11.5v5A1.5 1.5 0 003.5 18h1A1.5 1.5 0 006 16.5v-5A1.5 1.5 0 004.5 10h-1z"
/>
</svg>
<span>Sales</span>
</a>
</nav>
<!-- END Desktop Navigation -->
<!-- User Dropdown -->
<div class="relative inline-block">
<!-- Dropdown Toggle Button -->
<button
type="button"
id="tk-dropdown-layouts-user"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-semibold leading-5 text-gray-800 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:ring focus:ring-gray-300/25 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
aria-haspopup="true"
aria-expanded="true"
>
<span>John</span>
<svg
class="hi-mini hi-chevron-down inline-block size-5 opacity-40"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd"
/>
</svg>
</button>
<!-- END Dropdown Toggle Button -->
<!-- Dropdown -->
<!--
Visibility
Closed 'hidden'
Opened '' (no class)
Show/Hide with transitions
enter 'transition ease-out duration-100'
enter-start 'opacity-0 scale-90'
enter-end 'opacity-100 scale-100'
leave 'transition ease-in duration-75'
leave-start 'opacity-100 scale-100'
leave-end 'opacity-0 scale-90'
-->
<div
role="menu"
aria-labelledby="tk-dropdown-layouts-user"
class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-lg shadow-xl dark:shadow-gray-900"
>
<div
class="divide-y divide-gray-100 rounded-lg bg-white ring-1 ring-black/5 dark:divide-gray-700 dark:bg-gray-800 dark:ring-gray-700"
>
<div class="space-y-1 p-2.5">
<a
role="menuitem"
href="javascript:void(0)"
class="group flex items-center justify-between gap-2 rounded-lg border border-transparent px-2.5 py-2 text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-800 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700/75 dark:hover:text-white dark:active:border-gray-600"
>
<svg
class="hi-mini hi-inbox inline-block size-5 flex-none opacity-25 group-hover:opacity-50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M1 11.27c0-.246.033-.492.099-.73l1.523-5.521A2.75 2.75 0 015.273 3h9.454a2.75 2.75 0 012.651 2.019l1.523 5.52c.066.239.099.485.099.732V15a2 2 0 01-2 2H3a2 2 0 01-2-2v-3.73zm3.068-5.852A1.25 1.25 0 015.273 4.5h9.454a1.25 1.25 0 011.205.918l1.523 5.52c.006.02.01.041.015.062H14a1 1 0 00-.86.49l-.606 1.02a1 1 0 01-.86.49H8.236a1 1 0 01-.894-.553l-.448-.894A1 1 0 006 11H2.53l.015-.062 1.523-5.52z"
clip-rule="evenodd"
/>
</svg>
<span class="grow">Inbox</span>
<div
class="inline-flex rounded-full border border-blue-200 bg-blue-100 px-1.5 py-0.5 text-xs font-semibold leading-4 text-blue-700 dark:border-blue-700 dark:bg-blue-700 dark:text-blue-50"
>
2
</div>
</a>
<a
role="menuitem"
href="javascript:void(0)"
class="group flex items-center justify-between gap-2 rounded-lg border border-transparent px-2.5 py-2 text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-800 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700/75 dark:hover:text-white dark:active:border-gray-600"
>
<svg
class="hi-mini hi-flag inline-block size-5 flex-none opacity-25 group-hover:opacity-50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M3.5 2.75a.75.75 0 00-1.5 0v14.5a.75.75 0 001.5 0v-4.392l1.657-.348a6.449 6.449 0 014.271.572 7.948 7.948 0 005.965.524l2.078-.64A.75.75 0 0018 12.25v-8.5a.75.75 0 00-.904-.734l-2.38.501a7.25 7.25 0 01-4.186-.363l-.502-.2a8.75 8.75 0 00-5.053-.439l-1.475.31V2.75z"
/>
</svg>
<span class="grow">Notifications</span>
<div
class="inline-flex rounded-full border border-blue-200 bg-blue-100 px-1.5 py-0.5 text-xs font-semibold leading-4 text-blue-700 dark:border-blue-700 dark:bg-blue-700 dark:text-blue-50"
>
5
</div>
</a>
</div>
<div class="space-y-1 p-2.5">
<a
role="menuitem"
href="javascript:void(0)"
class="group flex items-center justify-between gap-2 rounded-lg border border-transparent px-2.5 py-2 text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-800 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700/75 dark:hover:text-white dark:active:border-gray-600"
>
<svg
class="hi-mini hi-user-circle inline-block size-5 flex-none opacity-25 group-hover:opacity-50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-5.5-2.5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zM10 12a5.99 5.99 0 00-4.793 2.39A6.483 6.483 0 0010 16.5a6.483 6.483 0 004.793-2.11A5.99 5.99 0 0010 12z"
clip-rule="evenodd"
/>
</svg>
<span class="grow">Account</span>
</a>
<a
role="menuitem"
href="javascript:void(0)"
class="group flex items-center justify-between gap-2 rounded-lg border border-transparent px-2.5 py-2 text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-800 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700/75 dark:hover:text-white dark:active:border-gray-600"
>
<svg
class="hi-mini hi-cog-6-tooth inline-block size-5 flex-none opacity-25 group-hover:opacity-50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M7.84 1.804A1 1 0 018.82 1h2.36a1 1 0 01.98.804l.331 1.652a6.993 6.993 0 011.929 1.115l1.598-.54a1 1 0 011.186.447l1.18 2.044a1 1 0 01-.205 1.251l-1.267 1.113a7.047 7.047 0 010 2.228l1.267 1.113a1 1 0 01.206 1.25l-1.18 2.045a1 1 0 01-1.187.447l-1.598-.54a6.993 6.993 0 01-1.929 1.115l-.33 1.652a1 1 0 01-.98.804H8.82a1 1 0 01-.98-.804l-.331-1.652a6.993 6.993 0 01-1.929-1.115l-1.598.54a1 1 0 01-1.186-.447l-1.18-2.044a1 1 0 01.205-1.251l1.267-1.114a7.05 7.05 0 010-2.227L1.821 7.773a1 1 0 01-.206-1.25l1.18-2.045a1 1 0 011.187-.447l1.598.54A6.993 6.993 0 017.51 3.456l.33-1.652zM10 13a3 3 0 100-6 3 3 0 000 6z"
clip-rule="evenodd"
/>
</svg>
<span class="grow">Settings</span>
</a>
</div>
<div class="space-y-1 p-2.5">
<form onsubmit="return false;">
<button
type="submit"
role="menuitem"
class="group flex w-full items-center justify-between gap-2 rounded-lg border border-transparent px-2.5 py-2 text-left text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-800 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700/75 dark:hover:text-white dark:active:border-gray-600"
>
<svg
class="hi-mini hi-lock-closed inline-block size-5 flex-none opacity-25 group-hover:opacity-50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z"
clip-rule="evenodd"
/>
</svg>
<span class="grow">Sign out</span>
</button>
</form>
</div>
</div>
</div>
<!-- END Dropdown -->
</div>
<!-- END User Dropdown -->
<!-- Toggle Mobile Navigation -->
<div class="lg:hidden">
<button
type="button"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-semibold leading-5 text-gray-800 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:ring focus:ring-gray-300/25 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
>
<svg
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
class="hi-solid hi-menu inline-block size-5"
>
<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>
</button>
</div>
<!-- END Toggle Mobile Navigation -->
</div>
<!-- END Right Section -->
</div>
<!-- Mobile Navigation -->
<!--
Visibility
Closed 'hidden'
Opened '' (no class)
-->
<div class="lg:hidden">
<nav
class="flex flex-col gap-2 border-t border-gray-200 py-4 dark:border-gray-700"
>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 rounded-lg border border-blue-50 bg-blue-50 px-3 py-2 text-sm font-semibold text-blue-600 dark:border-transparent dark:bg-gray-700/75 dark:text-white"
>
<svg
class="hi-mini hi-home inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z"
clip-rule="evenodd"
/>
</svg>
<span>Dashboard</span>
</a>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 rounded-lg border border-transparent px-3 py-2 text-sm font-medium text-gray-800 hover:bg-blue-50 hover:text-blue-600 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:active:border-gray-600"
>
<svg
class="hi-mini hi-users inline-block size-5 opacity-25 group-hover:opacity-100"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M7 8a3 3 0 100-6 3 3 0 000 6zM14.5 9a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM1.615 16.428a1.224 1.224 0 01-.569-1.175 6.002 6.002 0 0111.908 0c.058.467-.172.92-.57 1.174A9.953 9.953 0 017 18a9.953 9.953 0 01-5.385-1.572zM14.5 16h-.106c.07-.297.088-.611.048-.933a7.47 7.47 0 00-1.588-3.755 4.502 4.502 0 015.874 2.636.818.818 0 01-.36.98A7.465 7.465 0 0114.5 16z"
/>
</svg>
<span>Customers</span>
</a>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 rounded-lg border border-transparent px-3 py-2 text-sm font-medium text-gray-800 hover:bg-blue-50 hover:text-blue-600 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:active:border-gray-600"
>
<svg
class="hi-mini hi-briefcase inline-block size-5 opacity-25 group-hover:opacity-100"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M6 3.75A2.75 2.75 0 018.75 1h2.5A2.75 2.75 0 0114 3.75v.443c.572.055 1.14.122 1.706.2C17.053 4.582 18 5.75 18 7.07v3.469c0 1.126-.694 2.191-1.83 2.54-1.952.599-4.024.921-6.17.921s-4.219-.322-6.17-.921C2.694 12.73 2 11.665 2 10.539V7.07c0-1.321.947-2.489 2.294-2.676A41.047 41.047 0 016 4.193V3.75zm6.5 0v.325a41.622 41.622 0 00-5 0V3.75c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25zM10 10a1 1 0 00-1 1v.01a1 1 0 001 1h.01a1 1 0 001-1V11a1 1 0 00-1-1H10z"
clip-rule="evenodd"
/>
<path
d="M3 15.055v-.684c.126.053.255.1.39.142 2.092.642 4.313.987 6.61.987 2.297 0 4.518-.345 6.61-.987.135-.041.264-.089.39-.142v.684c0 1.347-.985 2.53-2.363 2.686a41.454 41.454 0 01-9.274 0C3.985 17.585 3 16.402 3 15.055z"
/>
</svg>
<span>Projects</span>
</a>
<a
href="javascript:void(0)"
class="group flex items-center gap-2 rounded-lg border border-transparent px-3 py-2 text-sm font-medium text-gray-800 hover:bg-blue-50 hover:text-blue-600 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:active:border-gray-600"
>
<svg
class="hi-mini hi-chart-bar inline-block size-5 opacity-25 group-hover:opacity-100"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M15.5 2A1.5 1.5 0 0014 3.5v13a1.5 1.5 0 001.5 1.5h1a1.5 1.5 0 001.5-1.5v-13A1.5 1.5 0 0016.5 2h-1zM9.5 6A1.5 1.5 0 008 7.5v9A1.5 1.5 0 009.5 18h1a1.5 1.5 0 001.5-1.5v-9A1.5 1.5 0 0010.5 6h-1zM3.5 10A1.5 1.5 0 002 11.5v5A1.5 1.5 0 003.5 18h1A1.5 1.5 0 006 16.5v-5A1.5 1.5 0 004.5 10h-1z"
/>
</svg>
<span>Sales</span>
</a>
</nav>
</div>
<!-- END Mobile Navigation -->
</div>
</header>
<!-- END Page Header -->
<!-- Page Content -->
<main id="page-content" class="flex max-w-full flex-auto flex-col">
<!-- Page Section -->
<div class="container mx-auto p-4 lg:p-8 xl:max-w-7xl">
<!--
ADD YOUR MAIN CONTENT BELOW
-->
<!-- Placeholder -->
<div
class="flex items-center justify-center rounded-xl border-2 border-dashed border-gray-200 bg-gray-50 py-64 text-gray-400 dark:border-gray-700 dark:bg-gray-800"
>
Content (max width 1280px)
</div>
<!--
ADD YOUR MAIN CONTENT ABOVE
-->
</div>
<!-- END Page Section -->
</main>
<!-- END Page Content -->
<!-- Page Footer -->
<footer
id="page-footer"
class="flex flex-none items-center bg-white dark:bg-gray-800"
>
<div
class="container mx-auto flex flex-col px-4 text-center text-sm md:flex-row md:justify-between md:text-left lg:px-8 xl:max-w-7xl"
>
<div class="pb-1 pt-4 md:pb-4">
<a
href="https://tailkit.com"
class="font-medium text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
target="_blank"
>Tailkit</a
>
©
</div>
<div class="inline-flex items-center justify-center pb-4 pt-1 md:pt-4">
<span>Crafted with</span>
<svg
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
class="hi-solid hi-heart mx-1 inline-block size-4 text-red-600"
>
<path
fill-rule="evenodd"
d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
clip-rule="evenodd"
></path>
</svg>
<span>
by
<a
href="https://pixelcave.com"
class="font-medium text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
target="_blank"
>pixelcave</a
></span
>
</div>
</div>
</footer>
<!-- END Page Footer -->
</div>
<!-- END Page Container -->
Application UIComponentsAlertsSuccess
<!-- Alerts: Success -->
<div
class="rounded bg-emerald-100 p-4 text-emerald-700 dark:bg-emerald-900/75 dark:text-emerald-100 md:p-5"
>
<div class="mb-2 flex items-center">
<svg
class="hi-solid hi-check-circle mr-3 inline-block size-5 flex-none text-emerald-500 dark:text-emerald-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
/>
</svg>
<h3 class="font-semibold">Project was added successfully!</h3>
</div>
<p class="ml-8">
Manage all available projects from your
<a
class="text-emerald-600 underline hover:text-emerald-400 dark:text-emerald-400 dark:hover:text-emerald-300"
href="javascript:void(0)"
>personal dashboard</a
>.
</p>
</div>
<!-- END Alerts: Success -->
Application UIComponentsDividersWith Heading
<!-- Divider: With Heading -->
<h3 class="my-8 flex items-center">
<span
aria-hidden="true"
class="h-0.5 grow rounded bg-gray-200 dark:bg-gray-700/75"
></span>
<span class="mx-3 text-lg font-medium">Title</span>
<span
aria-hidden="true"
class="h-0.5 grow rounded bg-gray-200 dark:bg-gray-700/75"
></span>
</h3>
<!-- END Divider: With Heading -->
Application UIComponentsDropdownsSimple
JS required
<!-- Dropdowns: Simple -->
<div class="flex justify-end">
<!-- Dropdown Container -->
<div class="relative inline-block">
<!-- Dropdown Toggle Button -->
<button
type="button"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-blue-700 bg-blue-700 px-3 py-2 text-sm font-semibold leading-5 text-white hover:border-blue-600 hover:bg-blue-600 hover:text-white focus:ring focus:ring-blue-400/50 active:border-blue-700 active:bg-blue-700 dark:focus:ring-blue-400/90"
id="tk-dropdown"
aria-haspopup="true"
aria-expanded="true"
>
<span>John Doe</span>
<svg
class="hi-mini hi-chevron-down inline-block size-4 opacity-50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
clip-rule="evenodd"
/>
</svg>
</button>
<!-- END Dropdown Toggle Button -->
<!-- Dropdown -->
<!--
Visibility
Closed 'hidden'
Opened '' (no class)
Show/Hide with transitions
enter 'transition ease-out duration-100'
enter-start 'opacity-0 scale-90'
enter-end 'opacity-100 scale-100'
leave 'transition ease-in duration-75'
leave-start 'opacity-100 scale-100'
leave-end 'opacity-0 scale-90'
-->
<div
role="menu"
aria-labelledby="tk-dropdown"
class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-lg shadow-xl dark:shadow-gray-900"
>
<div
class="divide-y divide-gray-100 rounded-lg bg-white ring-1 ring-black/5 dark:divide-gray-700 dark:bg-gray-800 dark:ring-gray-700"
>
<div class="space-y-1 p-2.5">
<a
role="menuitem"
href="javascript:void(0)"
class="group flex items-center justify-between gap-2 rounded-lg border border-transparent px-2.5 py-2 text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-800 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700/75 dark:hover:text-white dark:active:border-gray-600"
>
<svg
class="hi-mini hi-inbox inline-block size-5 flex-none opacity-25 group-hover:opacity-50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M1 11.27c0-.246.033-.492.099-.73l1.523-5.521A2.75 2.75 0 015.273 3h9.454a2.75 2.75 0 012.651 2.019l1.523 5.52c.066.239.099.485.099.732V15a2 2 0 01-2 2H3a2 2 0 01-2-2v-3.73zm3.068-5.852A1.25 1.25 0 015.273 4.5h9.454a1.25 1.25 0 011.205.918l1.523 5.52c.006.02.01.041.015.062H14a1 1 0 00-.86.49l-.606 1.02a1 1 0 01-.86.49H8.236a1 1 0 01-.894-.553l-.448-.894A1 1 0 006 11H2.53l.015-.062 1.523-5.52z"
clip-rule="evenodd"
/>
</svg>
<span class="grow">Inbox</span>
</a>
</div>
<div class="space-y-1 p-2.5">
<a
role="menuitem"
href="javascript:void(0)"
class="group flex items-center justify-between gap-2 rounded-lg border border-transparent px-2.5 py-2 text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-800 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700/75 dark:hover:text-white dark:active:border-gray-600"
>
<svg
class="hi-mini hi-user-circle inline-block size-5 flex-none opacity-25 group-hover:opacity-50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-5.5-2.5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zM10 12a5.99 5.99 0 00-4.793 2.39A6.483 6.483 0 0010 16.5a6.483 6.483 0 004.793-2.11A5.99 5.99 0 0010 12z"
clip-rule="evenodd"
/>
</svg>
<span class="grow">Account</span>
</a>
<a
role="menuitem"
href="javascript:void(0)"
class="group flex items-center justify-between gap-2 rounded-lg border border-transparent px-2.5 py-2 text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-800 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700/75 dark:hover:text-white dark:active:border-gray-600"
>
<svg
class="hi-mini hi-cog-6-tooth inline-block size-5 flex-none opacity-25 group-hover:opacity-50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M7.84 1.804A1 1 0 018.82 1h2.36a1 1 0 01.98.804l.331 1.652a6.993 6.993 0 011.929 1.115l1.598-.54a1 1 0 011.186.447l1.18 2.044a1 1 0 01-.205 1.251l-1.267 1.113a7.047 7.047 0 010 2.228l1.267 1.113a1 1 0 01.206 1.25l-1.18 2.045a1 1 0 01-1.187.447l-1.598-.54a6.993 6.993 0 01-1.929 1.115l-.33 1.652a1 1 0 01-.98.804H8.82a1 1 0 01-.98-.804l-.331-1.652a6.993 6.993 0 01-1.929-1.115l-1.598.54a1 1 0 01-1.186-.447l-1.18-2.044a1 1 0 01.205-1.251l1.267-1.114a7.05 7.05 0 010-2.227L1.821 7.773a1 1 0 01-.206-1.25l1.18-2.045a1 1 0 011.187-.447l1.598.54A6.993 6.993 0 017.51 3.456l.33-1.652zM10 13a3 3 0 100-6 3 3 0 000 6z"
clip-rule="evenodd"
/>
</svg>
<span class="grow">Settings</span>
</a>
</div>
<div class="space-y-1 p-2.5">
<form onsubmit="return false;">
<button
type="submit"
role="menuitem"
class="group flex w-full items-center justify-between gap-2 rounded-lg border border-transparent px-2.5 py-2 text-left text-sm font-medium text-gray-700 hover:bg-blue-50 hover:text-blue-800 active:border-blue-100 dark:text-gray-200 dark:hover:bg-gray-700/75 dark:hover:text-white dark:active:border-gray-600"
>
<svg
class="hi-mini hi-lock-closed inline-block size-5 flex-none opacity-25 group-hover:opacity-50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z"
clip-rule="evenodd"
/>
</svg>
<span class="grow">Sign out</span>
</button>
</form>
</div>
</div>
</div>
<!-- END Dropdown -->
</div>
<!-- Dropdown Container -->
</div>
<!-- END Dropdowns: Simple -->
<!-- Placeholder -->
<div
class="mt-2 flex items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 py-48 text-gray-400 dark:border-gray-700 dark:bg-gray-900"
>
Content
</div>
Application UIComponentsForm ElementsInputs
<!-- Form Elements: Inputs -->
<form class="space-y-6 dark:text-gray-100" onsubmit="return false;">
<!-- Text Input -->
<div class="space-y-1">
<label for="firstname" class="font-medium">Name</label>
<input
type="text"
id="firstname"
name="firstname"
placeholder="Enter your name"
class="block w-full rounded-lg border border-gray-200 px-3 py-2 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
/>
</div>
<!-- END Text Input -->
<!-- Email Input -->
<div class="space-y-1">
<label for="email" class="font-medium">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="Enter your email"
class="block w-full rounded-lg border border-gray-200 px-3 py-2 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
/>
</div>
<!-- END Email Input -->
<!-- Password Input -->
<div class="space-y-1">
<label for="password" class="font-medium">Password</label>
<input
type="password"
id="password"
name="password"
placeholder="Enter your password"
class="block w-full rounded-lg border border-gray-200 px-3 py-2 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
/>
</div>
<!-- END Password Input -->
</form>
<!-- END Form Elements: Inputs -->
Application UIComponentsForm LayoutsInline
<!-- Form Layouts: Inline -->
<form
class="flex flex-col gap-3 dark:text-gray-100 sm:flex-row sm:items-center sm:gap-2"
onsubmit="return false;"
>
<div>
<label for="email" class="sr-only">Email</label>
<input
class="block w-full rounded-lg border border-gray-200 px-3 py-2 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
type="email"
id="email"
name="email"
placeholder="Email"
/>
</div>
<div>
<label for="password" class="sr-only">Password</label>
<input
class="block w-full rounded-lg border border-gray-200 px-3 py-2 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
type="password"
id="password"
name="password"
placeholder="Password"
/>
</div>
<button
type="submit"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-blue-700 bg-blue-700 px-4 py-2 font-semibold leading-6 text-white hover:border-blue-600 hover:bg-blue-600 hover:text-white focus:ring focus:ring-blue-400/50 active:border-blue-700 active:bg-blue-700 dark:focus:ring-blue-400/90"
>
Login
</button>
</form>
<!-- END Form Layouts: Inline -->
Application UIComponentsForm LayoutsLabels On Top
<!-- Form Layouts: Labels On Top -->
<form class="space-y-6 dark:text-gray-100" onsubmit="return false;">
<div class="space-y-1">
<label for="email" class="font-medium">Email</label>
<input
class="block w-full rounded-lg border border-gray-200 px-3 py-2 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
type="email"
id="email"
name="email"
placeholder="Enter your email.."
/>
</div>
<div class="space-y-1">
<label for="password" class="font-medium">Password</label>
<input
class="block w-full rounded-lg border border-gray-200 px-3 py-2 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
type="password"
id="password"
name="password"
placeholder="Enter your password.."
/>
</div>
<button
type="submit"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-blue-700 bg-blue-700 px-3 py-2 text-sm font-semibold leading-5 text-white hover:border-blue-600 hover:bg-blue-600 hover:text-white focus:ring focus:ring-blue-400/50 active:border-blue-700 active:bg-blue-700 dark:focus:ring-blue-400/90"
>
Login
</button>
</form>
<!-- END Form Layouts: Labels On Top -->
Application UIComponentsList GroupsWith Badges
<!-- List Groups: With Badges -->
<ul
class="divide-y divide-gray-200 rounded-lg border border-gray-200 bg-white dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100"
>
<li class="flex items-center justify-between p-4">
<span class="text-sm font-semibold">Home</span>
<div
class="inline-flex rounded-full bg-emerald-200 px-2 py-1 text-xs font-semibold leading-4 text-emerald-700 dark:bg-emerald-700 dark:text-emerald-100"
>
3
</div>
</li>
<li class="flex items-center justify-between p-4">
<span class="text-sm font-semibold">Inbox</span>
<div
class="inline-flex rounded-full bg-orange-200 px-2 py-1 text-xs font-semibold leading-4 text-orange-700 dark:bg-orange-700 dark:text-orange-100"
>
8
</div>
</li>
<li class="flex items-center justify-between p-4">
<span class="text-sm font-semibold">Projects</span>
<div
class="inline-flex rounded-full bg-teal-200 px-2 py-1 text-xs font-semibold leading-4 text-teal-700 dark:bg-teal-700 dark:text-teal-100"
>
8
</div>
</li>
<li class="flex items-center justify-between p-4">
<span class="text-sm font-semibold">Customers</span>
<div
class="inline-flex rounded-full bg-rose-200 px-2 py-1 text-xs font-semibold leading-4 text-rose-700 dark:bg-rose-700 dark:text-rose-100"
>
5
</div>
</li>
<li class="flex items-center justify-between p-4">
<span class="text-sm font-semibold">Feedback</span>
<div
class="inline-flex rounded-full bg-gray-200 px-2 py-1 text-xs font-semibold leading-4 text-gray-700 dark:bg-gray-700 dark:text-gray-100"
>
6
</div>
</li>
</ul>
<!-- END List Groups: With Badges -->
Application UIComponentsMedia ObjectsComment
<!-- Media Objects: Comment -->
<div
class="flex flex-col overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-800 dark:text-gray-100"
>
<div class="grow p-5">
<div class="flex gap-4">
<!-- Avatar -->
<img
class="mt-1 inline-block size-8 flex-none rounded-full sm:size-12"
src="https://cdn.tailkit.com/media/placeholders/avatar-mEZ3PoFGs_k-160x160.jpg"
alt="User Avatar"
/>
<!-- Content -->
<div class="grow text-sm">
<p class="mb-1">
<a
href="javascript:void(0)"
class="font-semibold text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
>Lori Grant</a
>
I just started a new Tailwind CSS based project and I find it very
refreshing. Could you suggest any tools to help me out?
</p>
<p class="space-x-2">
<a
href="javascript:void(0)"
class="font-medium text-gray-500 hover:text-gray-400"
>
Like
</a>
<a
href="javascript:void(0)"
class="font-medium text-gray-500 hover:text-gray-400"
>
Reply
</a>
</p>
</div>
<!-- END Content -->
</div>
</div>
</div>
<!-- END Media Objects: Comment -->
Application UIComponentsPage HeadingsSimple
<!-- Page Headings: Simple -->
<h2
class="mb-4 border-b-2 border-gray-200 py-2 text-2xl font-bold dark:border-gray-700 lg:mb-8"
>
Dashboard
<span
class="block text-lg font-medium text-gray-600 dark:text-gray-400 sm:inline-block"
>Everything looks great!</span
>
</h2>
<!-- END Page Headings: Simple -->
<!-- Placeholder -->
<div
class="flex items-center justify-center rounded-xl border-2 border-dashed border-gray-200 bg-gray-50 py-32 text-gray-400 dark:border-gray-700 dark:bg-gray-800"
>
Content
</div>
Application UIComponentsPaginationSimple
<!-- Pagination: Simple -->
<div class="text-center dark:text-gray-100">
<!-- Visible on mobile -->
<nav class="flex sm:hidden">
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 font-semibold leading-6 text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:z-1 focus:ring focus:ring-gray-300/25 active:z-1 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
>
<svg
class="hi-mini hi-chevron-left -mx-1.5 inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
clip-rule="evenodd"
/>
</svg>
</a>
<div class="flex grow items-center justify-center px-2 sm:px-4">
<span
>Page <span class="font-semibold">2</span> of
<span class="font-semibold">20</span></span
>
</div>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 font-semibold leading-6 text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:z-1 focus:ring focus:ring-gray-300/25 active:z-1 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
>
<svg
class="hi-mini hi-chevron-right -mx-1.5 inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd"
/>
</svg>
</a>
</nav>
<!-- END Visible on mobile -->
<!-- Visible on desktop -->
<nav class="hidden sm:inline-flex">
<a
href="javascript:void(0)"
class="-mr-px inline-flex items-center justify-center gap-2 rounded-l-lg border border-gray-200 bg-white px-4 py-2 font-semibold leading-6 text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:z-1 focus:ring focus:ring-gray-300/25 active:z-1 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
>
<svg
class="hi-mini hi-chevron-left -mx-1.5 inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
clip-rule="evenodd"
/>
</svg>
</a>
<a
href="javascript:void(0)"
class="-mr-px inline-flex items-center justify-center gap-2 border border-gray-200 bg-white px-4 py-2 font-semibold leading-6 text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:z-1 focus:ring focus:ring-gray-300/25 active:z-1 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
>
1
</a>
<a
href="javascript:void(0)"
class="-mr-px inline-flex items-center justify-center gap-2 border border-gray-200 bg-gray-100 px-4 py-2 font-semibold leading-6 text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:z-1 focus:ring focus:ring-gray-300/25 active:z-1 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-700/75 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
>
2
</a>
<a
href="javascript:void(0)"
class="-mr-px inline-flex items-center justify-center gap-2 border border-gray-200 bg-white px-4 py-2 font-semibold leading-6 text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:z-1 focus:ring focus:ring-gray-300/25 active:z-1 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
>
3
</a>
<div
class="-mr-px flex items-center justify-center border border-gray-200 bg-white px-4 text-gray-800 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300"
>
...
</div>
<a
href="javascript:void(0)"
class="-mr-px inline-flex items-center justify-center gap-2 border border-gray-200 bg-white px-4 py-2 font-semibold leading-6 text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:z-1 focus:ring focus:ring-gray-300/25 active:z-1 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
>
19
</a>
<a
href="javascript:void(0)"
class="-mr-px inline-flex items-center justify-center gap-2 border border-gray-200 bg-white px-4 py-2 font-semibold leading-6 text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:z-1 focus:ring focus:ring-gray-300/25 active:z-1 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
>
20
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded-r-lg border border-gray-200 bg-white px-4 py-2 font-semibold leading-6 text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:z-1 focus:ring focus:ring-gray-300/25 active:z-1 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
>
<svg
class="hi-mini hi-chevron-right -mx-1.5 inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
clip-rule="evenodd"
/>
</svg>
</a>
</nav>
<!-- END Visible on desktop -->
</div>
<!-- END Pagination: Simple -->
Application UIComponentsStatisticsSimple with Action
<!-- Statistics: Simple with Action -->
<div class="grid grid-cols-1 gap-4 md:grid-cols-3 lg:gap-8">
<!-- Card -->
<div
class="flex flex-col overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-800 dark:text-gray-100"
>
<!-- Body -->
<div class="flex grow items-center justify-between p-5">
<dl class="space-y-1">
<dt class="text-2xl font-bold">146</dt>
<dd
class="text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
>
Sales
</dd>
</dl>
<div
class="inline-flex items-center gap-1 rounded-full bg-emerald-200 px-2 py-1 text-sm font-semibold leading-4 text-emerald-800"
>
<svg
class="hi-solid hi-arrow-circle-up inline-block size-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z"
clip-rule="evenodd"
/>
</svg>
<span>7.9%</span>
</div>
</div>
<!-- END Body -->
<!-- Action Link -->
<a
href="javascript:void(0)"
class="block bg-gray-50 p-3 text-center text-sm font-medium text-blue-600 hover:bg-gray-100/75 hover:text-blue-700 active:bg-gray-50 dark:bg-gray-900/50 dark:text-blue-400 dark:hover:bg-gray-900/75 dark:hover:text-blue-300 dark:active:bg-gray-900/50"
>
View All Sales
</a>
<!-- END Action Link -->
</div>
<!-- END Card -->
<!-- Card -->
<div
class="flex flex-col overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-800 dark:text-gray-100"
>
<!-- Body -->
<div class="flex grow items-center justify-between p-5">
<dl class="space-y-1">
<dt class="text-2xl font-bold">$5,128</dt>
<dd
class="text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
>
Earnings
</dd>
</dl>
<div
class="inline-flex items-center gap-1 rounded-full bg-rose-200 px-2 py-1 text-sm font-semibold leading-4 text-rose-800"
>
<svg
class="hi-solid hi-arrow-circle-down inline-block size-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z"
clip-rule="evenodd"
/>
</svg>
<span>6.9%</span>
</div>
</div>
<!-- END Body -->
<!-- Action Link -->
<a
href="javascript:void(0)"
class="block bg-gray-50 p-3 text-center text-sm font-medium text-blue-600 hover:bg-gray-100/75 hover:text-blue-700 active:bg-gray-50 dark:bg-gray-900/50 dark:text-blue-400 dark:hover:bg-gray-900/75 dark:hover:text-blue-300 dark:active:bg-gray-900/50"
>
View all Earnings
</a>
<!-- END Action Link -->
</div>
<!-- END Card -->
<!-- Card -->
<div
class="flex flex-col overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-800 dark:text-gray-100"
>
<!-- Body -->
<div class="flex grow items-center justify-between p-5">
<dl class="space-y-1">
<dt class="text-2xl font-bold">$2,670</dt>
<dd
class="text-sm font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400"
>
Wallet
</dd>
</dl>
<div
class="inline-flex items-center gap-1 rounded-full bg-emerald-200 px-2 py-1 text-sm font-semibold leading-4 text-emerald-800"
>
<svg
class="hi-solid hi-arrow-circle-up inline-block size-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z"
clip-rule="evenodd"
/>
</svg>
<span>5.6%</span>
</div>
</div>
<!-- END Body -->
<!-- Action Link -->
<a
href="javascript:void(0)"
class="block bg-gray-50 p-3 text-center text-sm font-medium text-blue-600 hover:bg-gray-100/75 hover:text-blue-700 active:bg-gray-50 dark:bg-gray-900/50 dark:text-blue-400 dark:hover:bg-gray-900/75 dark:hover:text-blue-300 dark:active:bg-gray-900/50"
>
Check your Balance
</a>
<!-- END Action Link -->
</div>
<!-- END Card -->
</div>
<!-- END Statistics: Simple with Action -->
Application UIPagesSign InBoxed
<!-- Pages: Sign In: Boxed -->
<!-- Page Container -->
<div
id="page-container"
class="mx-auto flex min-h-dvh w-full min-w-[320px] flex-col bg-gray-100 dark:bg-gray-900 dark:text-gray-100"
>
<!-- Page Content -->
<main id="page-content" class="flex max-w-full flex-auto flex-col">
<div
class="relative mx-auto flex min-h-dvh w-full max-w-10xl items-center justify-center overflow-hidden p-4 lg:p-8"
>
<!-- Sign In Section -->
<section class="w-full max-w-xl py-6">
<!-- Header -->
<header class="mb-10 text-center">
<h1 class="mb-2 inline-flex items-center gap-2 text-2xl font-bold">
<svg
class="hi-mini hi-cube-transparent inline-block size-5 text-blue-600 dark:text-blue-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M9.638 1.093a.75.75 0 01.724 0l2 1.104a.75.75 0 11-.724 1.313L10 2.607l-1.638.903a.75.75 0 11-.724-1.313l2-1.104zM5.403 4.287a.75.75 0 01-.295 1.019l-.805.444.805.444a.75.75 0 01-.724 1.314L3.5 7.02v.73a.75.75 0 01-1.5 0v-2a.75.75 0 01.388-.657l1.996-1.1a.75.75 0 011.019.294zm9.194 0a.75.75 0 011.02-.295l1.995 1.101A.75.75 0 0118 5.75v2a.75.75 0 01-1.5 0v-.73l-.884.488a.75.75 0 11-.724-1.314l.806-.444-.806-.444a.75.75 0 01-.295-1.02zM7.343 8.284a.75.75 0 011.02-.294L10 8.893l1.638-.903a.75.75 0 11.724 1.313l-1.612.89v1.557a.75.75 0 01-1.5 0v-1.557l-1.612-.89a.75.75 0 01-.295-1.019zM2.75 11.5a.75.75 0 01.75.75v1.557l1.608.887a.75.75 0 01-.724 1.314l-1.996-1.101A.75.75 0 012 14.25v-2a.75.75 0 01.75-.75zm14.5 0a.75.75 0 01.75.75v2a.75.75 0 01-.388.657l-1.996 1.1a.75.75 0 11-.724-1.313l1.608-.887V12.25a.75.75 0 01.75-.75zm-7.25 4a.75.75 0 01.75.75v.73l.888-.49a.75.75 0 01.724 1.313l-2 1.104a.75.75 0 01-.724 0l-2-1.104a.75.75 0 11.724-1.313l.888.49v-.73a.75.75 0 01.75-.75z"
clip-rule="evenodd"
/>
</svg>
<span>Company</span>
</h1>
<h2 class="text-sm font-medium text-gray-500 dark:text-gray-400">
Welcome, please sign in to your dashboard
</h2>
</header>
<!-- END Header -->
<!-- Sign In Form -->
<div
class="flex flex-col overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-800 dark:text-gray-100"
>
<div class="grow p-5 md:px-16 md:py-12">
<form class="space-y-6" onsubmit="return false;">
<div class="space-y-1">
<label for="email" class="text-sm font-medium">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="Enter your email"
class="block w-full rounded-lg border border-gray-200 px-5 py-3 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
/>
</div>
<div class="space-y-1">
<label for="password" class="text-sm font-medium"
>Password</label
>
<input
type="password"
id="password"
name="password"
placeholder="Enter your password"
class="block w-full rounded-lg border border-gray-200 px-5 py-3 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
/>
</div>
<div>
<div class="mb-5 flex items-center justify-between gap-2">
<label class="flex items-center">
<input
type="checkbox"
id="remember_me"
name="remember_me"
class="size-4 rounded border border-gray-200 text-blue-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-gray-900 dark:checked:border-transparent dark:checked:bg-blue-500 dark:focus:border-blue-500"
/>
<span class="ml-2 text-sm">Remember me</span>
</label>
<a
href="javascript:void(0)"
class="inline-block text-sm font-medium text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
>Forgot Password?</a
>
</div>
<button
type="submit"
class="inline-flex w-full items-center justify-center gap-2 rounded-lg border border-blue-700 bg-blue-700 px-6 py-3 font-semibold leading-6 text-white hover:border-blue-600 hover:bg-blue-600 hover:text-white focus:ring focus:ring-blue-400/50 active:border-blue-700 active:bg-blue-700 dark:focus:ring-blue-400/90"
>
<svg
class="hi-mini hi-arrow-uturn-right inline-block size-5 opacity-50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M12.207 2.232a.75.75 0 00.025 1.06l4.146 3.958H6.375a5.375 5.375 0 000 10.75H9.25a.75.75 0 000-1.5H6.375a3.875 3.875 0 010-7.75h10.003l-4.146 3.957a.75.75 0 001.036 1.085l5.5-5.25a.75.75 0 000-1.085l-5.5-5.25a.75.75 0 00-1.06.025z"
clip-rule="evenodd"
/>
</svg>
<span>Sign In</span>
</button>
<!-- Divider: With Label -->
<div class="my-5 flex items-center">
<span
aria-hidden="true"
class="h-0.5 grow rounded bg-gray-100 dark:bg-gray-700/75"
></span>
<span
class="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-200"
>or sign in with</span
>
<span
aria-hidden="true"
class="h-0.5 grow rounded bg-gray-100 dark:bg-gray-700/75"
></span>
</div>
<!-- END Divider: With Label -->
<div class="grid grid-cols-2 gap-2">
<button
type="button"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-semibold leading-5 text-gray-800 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:ring focus:ring-gray-300/25 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
>
<svg
class="bi bi-facebook inline-block size-4 text-[#1877f2]"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 16 16"
aria-hidden="true"
>
<path
d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"
/>
</svg>
<span>Facebook</span>
</button>
<button
type="button"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm font-semibold leading-5 text-gray-800 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:ring focus:ring-gray-300/25 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
>
<svg
class="bi bi-twitter-x inline-block size-4"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 16 16"
aria-hidden="true"
>
<path
d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z"
/>
</svg>
<span class="sr-only">X</span>
</button>
</div>
</div>
</form>
</div>
<div
class="grow bg-gray-50 p-5 text-center text-sm dark:bg-gray-700/50 md:px-16"
>
Don’t have an account yet?
<a
href="javascript:void(0)"
class="font-medium text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
>Sign up</a
>
</div>
</div>
<!-- END Sign In Form -->
<!-- Footer -->
<div class="mt-6 text-center text-sm text-gray-500 dark:text-gray-400">
Powered by
<a
href="javascript:void(0)"
class="font-medium text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
>Tailkit</a
>
</div>
<!-- END Footer -->
</section>
<!-- END Sign In Section -->
</div>
</main>
<!-- END Page Content -->
</div>
<!-- END Page Container -->
<!-- END Pages: Sign In: Boxed -->
MarketingSectionsHeroImage Side with Simple Header
<!-- Hero Section: Image Side with Simple Header -->
<div
class="relative overflow-hidden bg-white dark:bg-gray-900 dark:text-gray-100"
>
<!-- Main Header -->
<header id="page-header" class="relative flex flex-none items-center py-8">
<!-- Main Header Content -->
<div
class="container mx-auto flex flex-col gap-4 px-4 text-center sm:flex-row sm:items-center sm:justify-between sm:gap-0 lg:px-8 xl:max-w-7xl"
>
<div>
<a
href="javascript:void(0)"
class="group inline-flex items-center gap-2 text-lg font-bold tracking-wide text-gray-900 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-300"
>
<svg
class="hi-mini hi-cube-transparent inline-block size-5 text-blue-600 transition group-hover:scale-110 dark:text-blue-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M9.638 1.093a.75.75 0 01.724 0l2 1.104a.75.75 0 11-.724 1.313L10 2.607l-1.638.903a.75.75 0 11-.724-1.313l2-1.104zM5.403 4.287a.75.75 0 01-.295 1.019l-.805.444.805.444a.75.75 0 01-.724 1.314L3.5 7.02v.73a.75.75 0 01-1.5 0v-2a.75.75 0 01.388-.657l1.996-1.1a.75.75 0 011.019.294zm9.194 0a.75.75 0 011.02-.295l1.995 1.101A.75.75 0 0118 5.75v2a.75.75 0 01-1.5 0v-.73l-.884.488a.75.75 0 11-.724-1.314l.806-.444-.806-.444a.75.75 0 01-.295-1.02zM7.343 8.284a.75.75 0 011.02-.294L10 8.893l1.638-.903a.75.75 0 11.724 1.313l-1.612.89v1.557a.75.75 0 01-1.5 0v-1.557l-1.612-.89a.75.75 0 01-.295-1.019zM2.75 11.5a.75.75 0 01.75.75v1.557l1.608.887a.75.75 0 01-.724 1.314l-1.996-1.101A.75.75 0 012 14.25v-2a.75.75 0 01.75-.75zm14.5 0a.75.75 0 01.75.75v2a.75.75 0 01-.388.657l-1.996 1.1a.75.75 0 11-.724-1.313l1.608-.887V12.25a.75.75 0 01.75-.75zm-7.25 4a.75.75 0 01.75.75v.73l.888-.49a.75.75 0 01.724 1.313l-2 1.104a.75.75 0 01-.724 0l-2-1.104a.75.75 0 11.724-1.313l.888.49v-.73a.75.75 0 01.75-.75z"
clip-rule="evenodd"
/>
</svg>
<span>Company</span>
</a>
</div>
<nav class="space-x-3 md:space-x-6">
<a
href="javascript:void(0)"
class="text-sm font-semibold text-gray-900 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-400"
>
<span>Features</span>
</a>
<a
href="javascript:void(0)"
class="text-sm font-semibold text-gray-900 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-400"
>
<span>Pricing</span>
</a>
<a
href="javascript:void(0)"
class="text-sm font-semibold text-gray-900 hover:text-blue-600 dark:text-gray-100 dark:hover:text-blue-400"
>
<span>Support</span>
</a>
</nav>
</div>
<!-- END Main Header Content -->
</header>
<!-- END Main Header -->
<!-- Hero Content -->
<div
class="container relative mx-auto flex flex-col gap-16 px-4 py-16 text-center lg:flex-row lg:gap-0 lg:px-8 lg:py-32 lg:text-left xl:max-w-7xl"
>
<div class="lg:flex lg:w-1/2 lg:items-center">
<div>
<div
class="mb-2 inline-flex rounded border border-gray-200 bg-gray-100 px-2 py-1 text-sm font-medium leading-4 text-gray-800 dark:border-gray-600/50 dark:bg-gray-700/50 dark:text-gray-200"
>
v6.0 Latest Version
</div>
<h1 class="mb-4 text-4xl font-black text-black dark:text-white">
Next generation
<span class="text-blue-600 dark:text-blue-500">website builder</span>
</h1>
<h2
class="text-xl font-medium leading-relaxed text-gray-700 dark:text-gray-300"
>
Super fast and easy to use software to power your next idea or build
your client’s web projects. Get it today and profit.
</h2>
<div
class="flex flex-col justify-center gap-2 pb-16 pt-10 sm:flex-row sm:items-center lg:justify-start"
>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-blue-700 bg-blue-700 px-7 py-3.5 font-semibold leading-6 text-white hover:border-blue-600 hover:bg-blue-600 hover:text-white focus:ring focus:ring-blue-400/50 active:border-blue-700 active:bg-blue-700 dark:focus:ring-blue-400/90"
>
<svg
class="hi-mini hi-arrow-down-tray inline-block size-5 opacity-75"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M10.75 2.75a.75.75 0 00-1.5 0v8.614L6.295 8.235a.75.75 0 10-1.09 1.03l4.25 4.5a.75.75 0 001.09 0l4.25-4.5a.75.75 0 00-1.09-1.03l-2.955 3.129V2.75z"
/>
<path
d="M3.5 12.75a.75.75 0 00-1.5 0v2.5A2.75 2.75 0 004.75 18h10.5A2.75 2.75 0 0018 15.25v-2.5a.75.75 0 00-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5z"
/>
</svg>
<span>Download for free</span>
</a>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-7 py-3.5 font-semibold leading-6 text-gray-800 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:ring focus:ring-gray-300/25 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-transparent dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
>
<span>Learn more</span>
</a>
</div>
</div>
</div>
<div class="lg:ml-16 lg:flex lg:w-1/2 lg:items-center lg:justify-center">
<div class="relative mx-5 lg:w-96">
<div
class="bg-tranparent absolute left-0 top-0 -ml-20 -mt-16 size-40 rounded-full border border-blue-200 dark:border-blue-900 lg:size-72"
></div>
<div
class="bg-tranparent absolute left-0 top-0 -ml-14 -mt-20 size-40 rounded-full border border-blue-100 dark:border-blue-950 lg:size-72"
></div>
<div
class="bg-tranparent absolute bottom-0 right-0 -mb-16 -mr-20 size-40 rounded-full border border-blue-200 dark:border-blue-900 lg:size-72"
></div>
<div
class="bg-tranparent absolute bottom-0 right-0 -mb-20 -mr-14 size-40 rounded-full border border-blue-100 dark:border-blue-950 lg:size-72"
></div>
<div
class="absolute inset-0 -m-6 -rotate-2 rounded-xl bg-gray-200 dark:bg-gray-800"
></div>
<div
class="absolute inset-0 -m-6 rotate-1 rounded-xl bg-blue-800/75 shadow-inner dark:bg-blue-900/75"
></div>
<img
src="https://cdn.tailkit.com/media/placeholders/photo-RSCirJ70NDM-800x1000.jpg"
class="relative mx-auto rounded-lg shadow-lg"
alt="Hero Image"
/>
</div>
</div>
</div>
<!-- END Hero Content -->
</div>
<!-- END Hero Section: Image Side with Simple Header -->
MarketingSectionsPage HeadersSimple
<!-- Page Header Section: Simple -->
<div class="bg-white dark:bg-gray-900 dark:text-gray-100">
<div
class="container mx-auto space-y-16 px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl"
>
<div class="text-center">
<div
class="mb-1 text-sm font-bold uppercase tracking-wider text-blue-600 dark:text-blue-500"
>
Documentation
</div>
<h2 class="mb-4 text-4xl font-black text-black dark:text-white">
Getting Started with Tailkit
</h2>
<h3
class="mx-auto text-xl font-medium leading-relaxed text-gray-700 dark:text-gray-300 lg:w-2/3"
>
Get to know how it can help you build the User Interface of your website
and web application with the minimal effort.
</h3>
</div>
</div>
</div>
<!-- END Page Header Section: Simple -->
MarketingSectionsCTASimple with Illustration
<!-- CTA Section: Simple With Illustration -->
<div class="bg-white dark:bg-gray-800 dark:text-gray-100">
<div
class="container mx-auto grid grid-cols-1 gap-12 px-4 py-16 lg:grid-cols-2 lg:px-8 lg:py-32 xl:max-w-7xl"
>
<div class="flex items-center text-center lg:text-left">
<div class="space-y-8">
<!-- Heading -->
<div>
<div
class="mb-1 text-sm font-bold uppercase tracking-wider text-blue-600 dark:text-blue-500"
>
Get Started
</div>
<h2 class="mb-4 text-4xl font-black text-black dark:text-white">
Grow your business
<span class="text-blue-600 dark:text-blue-500">now</span>!
</h2>
<h3
class="text-xl font-medium leading-relaxed text-gray-700 dark:text-gray-300"
>
Inspiring results from day one without the pain. Get your own custom
dashboard and start building amazing services.
</h3>
</div>
<!-- END Heading -->
<!-- Action -->
<div>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-blue-700 bg-blue-700 px-6 py-3 font-semibold leading-6 text-white hover:border-blue-600 hover:bg-blue-600 hover:text-white focus:ring focus:ring-blue-400/50 active:border-blue-700 active:bg-blue-700 dark:focus:ring-blue-400/90"
>
<svg
class="hi-mini hi-plus-circle inline-block size-5 opacity-50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-11.25a.75.75 0 00-1.5 0v2.5h-2.5a.75.75 0 000 1.5h2.5v2.5a.75.75 0 001.5 0v-2.5h2.5a.75.75 0 000-1.5h-2.5v-2.5z"
clip-rule="evenodd"
/>
</svg>
<span>Create your Account</span>
</a>
</div>
<!-- END Action -->
</div>
</div>
<div class="flex items-center text-blue-500 lg:justify-end">
<svg
viewBox="0 0 753 480.951"
xmlns="http://www.w3.org/2000/svg"
class="w-full"
>
<path
d="M149.18 480.567l-2-.039a463.833 463.833 0 017.1-66.287c8.648-46.88 23.029-77.67 42.743-91.512l1.148 1.637C152.12 356.7 149.203 479.332 149.18 480.567zM174.18 480.089l-2-.04c.043-2.214 1.293-54.413 21.843-68.841l1.148 1.637c-19.72 13.845-20.981 66.711-20.991 67.244z"
fill="#374151"
></path>
<circle cx="209.549" cy="314.548" r="10" fill="currentColor"></circle>
<circle cx="204.597" cy="400.548" r="10" fill="currentColor"></circle>
<path
d="M169.519 330.542c1.879 12.004-3.02 22.74-3.02 22.74s-7.945-8.725-9.824-20.729 3.019-22.74 3.019-22.74 7.945 8.725 9.825 20.73zM202.206 359.696c-11.493 3.942-22.919.99-22.919.99s7.208-9.344 18.7-13.287 22.92-.99 22.92-.99-7.208 9.345-18.701 13.287zM202.575 435.857a31.135 31.135 0 01-16.064.694 28.374 28.374 0 0129.172-10.006 31.134 31.134 0 01-13.108 9.312z"
fill="#374151"
></path>
<path
fill="#9e616a"
d="M606.671 467.453h-13.14l-6.251-50.685 19.394.001-.003 50.684z"
></path>
<path
d="M610.023 480.19h-42.37v-.537a16.493 16.493 0 0116.491-16.491h.001l25.878.001z"
fill="#374151"
></path>
<path
fill="#9e616a"
d="M525.57 467.453h-13.141l-6.251-50.685 19.394.001-.002 50.684z"
></path>
<path
d="M528.921 480.19h-42.37v-.537a16.493 16.493 0 0116.491-16.491h.002l25.878.001z"
fill="#374151"
></path>
<path
d="M492.789 183.616l-18.2-2.812-5.88 9.464-63.272 16.129.172.872a11.904 11.904 0 102.587 12.31l76.625-15.982zM674.554 172.347a11.855 11.855 0 00-4.375.841l.363-.633-80.444-41.58-10.967 17.73 83.635 37.125a11.9 11.9 0 1011.788-13.483z"
fill="#9e616a"
></path>
<circle
cx="736.071"
cy="267.733"
r="35.538"
transform="rotate(-80.783 501.187 294.317)"
fill="#374151"
></circle>
<circle cx="512.264" cy="70.77" r="22.671" fill="#a0616a"></circle>
<ellipse
cx="512.571"
cy="48.405"
rx="24.509"
ry="14.705"
fill="#374151"
></ellipse>
<circle cx="515.021" cy="22.671" r="14.705" fill="#374151"></circle>
<path
d="M495.414 14.705A14.707 14.707 0 01508.588.08a14.87 14.87 0 00-1.532-.08 14.705 14.705 0 000 29.41 14.87 14.87 0 001.532-.079 14.707 14.707 0 01-13.174-14.626zM500.478 127.051l1.828-17.576s24.806-16.347 33.236-6.686l50.388 86.213s31.323 11.136 30.216 53.658l-1.498 205.54-35.517 3.894-21.568-160.25-19.487 166.026-41.35-1.295 3.72-109.376 19.717-106.027-.188-35.182-8.684-14.199s-15.908-6.39-16.352-24.45l-.349-25.386z"
fill="#374151"
></path>
<path
d="M526.488 107.615l.49-8.24s75.031 19.773 69.079 33.91-17.113 18.6-17.113 18.6l-43.155-17.112zM506.88 128.117l-5.645-6.02s-45.032 63.188-31.414 70.248 25.052 3.354 25.052 3.354l22.228-40.757z"
fill="#374151"
></path>
<path
d="M416.745 333.873l282.56-56.404-23.613-118.297-282.561 56.404z"
fill="#fff"
></path>
<path
d="M701.618 279.011l-286.416 57.174-24.384-122.152 286.417-57.173zm-283.33 52.55l278.705-55.635-22.844-114.441-278.706 55.634z"
fill="#9CA3AF"
></path>
<path
fill="#9CA3AF"
d="M427.715 242.718l228.672-45.647 1.19 5.962-228.672 45.647zM432.349 265.933l228.672-45.647 1.19 5.962-228.672 45.647zM437.01 289.282l228.672-45.647 1.19 5.962L438.2 295.244z"
></path>
<path
d="M547.129 234.12l-7.998 1.597a2.25 2.25 0 01-2.643-1.764l-3.781-18.942a2.25 2.25 0 011.763-2.643l7.998-1.597a2.25 2.25 0 012.643 1.764l3.781 18.942a2.25 2.25 0 01-1.763 2.643zM638.227 240.075l-7.998 1.597a2.25 2.25 0 01-2.643-1.764l-3.78-18.942a2.25 2.25 0 011.763-2.643l7.997-1.597a2.25 2.25 0 012.643 1.764l3.781 18.942a2.25 2.25 0 01-1.763 2.643zM588.893 274.202l-7.997 1.597a2.25 2.25 0 01-2.643-1.763l-3.782-18.943a2.25 2.25 0 011.764-2.643l7.998-1.597a2.25 2.25 0 012.643 1.764l3.78 18.942a2.25 2.25 0 01-1.763 2.643z"
fill="currentColor"
></path>
<path
d="M752 480.951H1a1 1 0 010-2h751a1 1 0 010 2z"
fill="#374151"
></path>
</svg>
</div>
</div>
</div>
<!-- END CTA Section: Simple With Illustration -->
MarketingSectionsFAQSimple
<!-- FAQ Section: Simple -->
<div class="bg-white dark:bg-gray-900 dark:text-gray-100">
<div
class="container mx-auto space-y-16 px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl"
>
<!-- Heading -->
<div class="text-center">
<div
class="mb-1 text-sm font-bold uppercase tracking-wider text-blue-600 dark:text-blue-500"
>
We Answer
</div>
<h2 class="text-4xl font-black text-black dark:text-white">
Frequently Asked Questions
</h2>
</div>
<!-- END Heading -->
<!-- FAQ -->
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 md:gap-12">
<div>
<h4 class="mb-2 font-semibold">What features are included?</h4>
<p class="leading-relaxed text-gray-600 dark:text-gray-400">
Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce
purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque
egestas nisl id lectus facilisis scelerisque.
</p>
</div>
<div>
<h4 class="mb-2 font-semibold">Can I use PayPal to pay you?</h4>
<p class="leading-relaxed text-gray-600 dark:text-gray-400">
Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce
purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque
egestas nisl id lectus facilisis scelerisque.
</p>
</div>
<div>
<h4 class="mb-2 font-semibold">Do I get access to the community?</h4>
<p class="leading-relaxed text-gray-600 dark:text-gray-400">
Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce
purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque
egestas nisl id lectus facilisis scelerisque.
</p>
</div>
<div>
<h4 class="mb-2 font-semibold">Can I get a refund just in case?</h4>
<p class="leading-relaxed text-gray-600 dark:text-gray-400">
Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce
purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque
egestas nisl id lectus facilisis scelerisque.
</p>
</div>
<div>
<h4 class="mb-2 font-semibold">Do you offer email support?</h4>
<p class="leading-relaxed text-gray-600 dark:text-gray-400">
Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce
purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque
egestas nisl id lectus facilisis scelerisque.
</p>
</div>
<div>
<h4 class="mb-2 font-semibold">Are the updates free for life?</h4>
<p class="leading-relaxed text-gray-600 dark:text-gray-400">
Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce
purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque
egestas nisl id lectus facilisis scelerisque.
</p>
</div>
</div>
<!-- END FAQ -->
<!-- Link -->
<div class="text-center">
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 font-semibold leading-6 text-gray-800 hover:border-gray-300 hover:text-gray-900 hover:shadow-sm focus:ring focus:ring-gray-300/25 active:border-gray-200 active:shadow-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-gray-600 dark:hover:text-gray-200 dark:focus:ring-gray-600/40 dark:active:border-gray-700"
>
<svg
class="hi-mini hi-arrow-top-right-on-square inline-block size-5 opacity-50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M4.25 5.5a.75.75 0 00-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 00.75-.75v-4a.75.75 0 011.5 0v4A2.25 2.25 0 0112.75 17h-8.5A2.25 2.25 0 012 14.75v-8.5A2.25 2.25 0 014.25 4h5a.75.75 0 010 1.5h-5z"
clip-rule="evenodd"
/>
<path
fill-rule="evenodd"
d="M6.194 12.753a.75.75 0 001.06.053L16.5 4.44v2.81a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.553l-9.056 8.194a.75.75 0 00-.053 1.06z"
clip-rule="evenodd"
/>
</svg>
<span>Go to support center</span>
</a>
</div>
<!-- END Link -->
</div>
</div>
<!-- END FAQ Section: Simple -->
MarketingSectionsFeaturesBoxes with Icons
<!-- Features Section: Boxes with Icons -->
<div
class="bg-gradient-to-tr from-indigo-100 via-purple-50 to-teal-100 dark:from-indigo-900 dark:via-purple-900 dark:to-teal-900 dark:text-gray-100"
>
<div class="container mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
<div
class="rounded-lg border border-white bg-white p-5 shadow-sm transition hover:border-blue-600 dark:border-gray-800 dark:bg-gray-800 dark:shadow-none dark:hover:border-blue-400 md:p-7 xl:p-10"
>
<svg
class="hi-outline hi-rectangle-stack mb-5 inline-block size-12 text-blue-600 dark:text-blue-500"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6 6.878V6a2.25 2.25 0 012.25-2.25h7.5A2.25 2.25 0 0118 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 004.5 9v.878m13.5-3A2.25 2.25 0 0119.5 9v.878m0 0a2.246 2.246 0 00-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0121 12v6a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 18v-6c0-.98.626-1.813 1.5-2.122"
/>
</svg>
<h4 class="mb-2 text-lg font-bold">1. UI Components Library</h4>
<p class="leading-relaxed text-gray-600 dark:text-gray-400">
We carefully handcrafted a vast collection of UI components to build
all kinds of web applications and websites. We keep designing and
adding new ones with each update.
</p>
</div>
<div
class="rounded-lg border border-white bg-white p-5 shadow-sm transition hover:border-blue-600 dark:border-gray-800 dark:bg-gray-800 dark:shadow-none dark:hover:border-blue-400 md:p-7 xl:p-10"
>
<svg
class="hi-outline hi-cube mb-5 inline-block size-12 text-blue-600 dark:text-blue-500"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
/>
</svg>
<h4 class="mb-2 text-lg font-bold">2. Self-Hosted Web App</h4>
<p class="leading-relaxed text-gray-600 dark:text-gray-400">
You’ll love working with the Tailkit web app! It’s a compiled Vue.js
based app which you can host on your own and use to explore and use
all available UI components.
</p>
</div>
<div
class="rounded-lg border border-white bg-white p-5 shadow-sm transition hover:border-blue-600 dark:border-gray-800 dark:bg-gray-800 dark:shadow-none dark:hover:border-blue-400 sm:col-span-2 md:p-7 lg:col-span-1 xl:p-10"
>
<svg
class="hi-outline hi-cog mb-5 inline-block size-12 text-blue-600 dark:text-blue-500"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.513M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205L12 12m6.894 5.785l-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864l-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495"
/>
</svg>
<h4 class="mb-2 text-lg font-bold">3. Helper Tools</h4>
<p class="leading-relaxed text-gray-600 dark:text-gray-400">
Search and copy SVG icons, build your button markup or copy your
favorite color classes with powerful tools. More are under development
to give you superpowers.
</p>
</div>
</div>
</div>
</div>
<!-- END Features Section: Boxes with Icons -->
MarketingSectionsLogosPlain
<!-- Logos Section: Plain -->
<div
class="bg-gradient-to-tr from-indigo-100 via-purple-50 to-cyan-100 dark:from-indigo-950 dark:via-purple-950 dark:to-teal-950 dark:text-gray-100"
>
<div class="container mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl">
<div
class="grid grid-cols-1 gap-4 text-center sm:grid-cols-2 lg:grid-cols-4"
>
<div class="flex h-20 items-center justify-center">
<div class="inline-flex items-center gap-2 text-2xl font-semibold">
<svg
class="hi-solid hi-cube inline-block size-8 text-indigo-600 dark:text-indigo-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
>
<path
d="M12.378 1.602a.75.75 0 00-.756 0L3 6.632l9 5.25 9-5.25-8.622-5.03zM21.75 7.93l-9 5.25v9l8.628-5.032a.75.75 0 00.372-.648V7.93zM11.25 22.18v-9l-9-5.25v8.57a.75.75 0 00.372.648l8.628 5.033z"
/>
</svg>
<span>boxspot</span>
</div>
</div>
<div class="flex h-20 items-center justify-center">
<div class="inline-flex items-center gap-2 text-2xl font-semibold">
<svg
class="hi-solid hi-code-bracket-square inline-block size-8 text-purple-600 dark:text-purple-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M3 6a3 3 0 013-3h12a3 3 0 013 3v12a3 3 0 01-3 3H6a3 3 0 01-3-3V6zm14.25 6a.75.75 0 01-.22.53l-2.25 2.25a.75.75 0 11-1.06-1.06L15.44 12l-1.72-1.72a.75.75 0 111.06-1.06l2.25 2.25c.141.14.22.331.22.53zm-10.28-.53a.75.75 0 000 1.06l2.25 2.25a.75.75 0 101.06-1.06L8.56 12l1.72-1.72a.75.75 0 10-1.06-1.06l-2.25 2.25z"
clip-rule="evenodd"
/>
</svg>
<span>TechCode</span>
</div>
</div>
<div class="flex h-20 items-center justify-center">
<div class="inline-flex items-center gap-2 text-2xl font-semibold">
<svg
class="hi-solid hi-cursor-arrow-rays inline-block size-8 text-rose-600 dark:text-rose-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M12 1.5a.75.75 0 01.75.75V4.5a.75.75 0 01-1.5 0V2.25A.75.75 0 0112 1.5zM5.636 4.136a.75.75 0 011.06 0l1.592 1.591a.75.75 0 01-1.061 1.06l-1.591-1.59a.75.75 0 010-1.061zm12.728 0a.75.75 0 010 1.06l-1.591 1.592a.75.75 0 01-1.06-1.061l1.59-1.591a.75.75 0 011.061 0zm-6.816 4.496a.75.75 0 01.82.311l5.228 7.917a.75.75 0 01-.777 1.148l-2.097-.43 1.045 3.9a.75.75 0 01-1.45.388l-1.044-3.899-1.601 1.42a.75.75 0 01-1.247-.606l.569-9.47a.75.75 0 01.554-.68zM3 10.5a.75.75 0 01.75-.75H6a.75.75 0 010 1.5H3.75A.75.75 0 013 10.5zm14.25 0a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5H18a.75.75 0 01-.75-.75zm-8.962 3.712a.75.75 0 010 1.061l-1.591 1.591a.75.75 0 11-1.061-1.06l1.591-1.592a.75.75 0 011.06 0z"
clip-rule="evenodd"
/>
</svg>
<span>Klickers</span>
</div>
</div>
<div class="flex h-20 items-center justify-center">
<div class="inline-flex items-center gap-2 text-2xl font-semibold">
<svg
class="hi-solid hi-map-pin inline-block size-8 text-teal-600 dark:text-teal-500"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z"
clip-rule="evenodd"
/>
</svg>
<span>freshloc</span>
</div>
</div>
</div>
</div>
</div>
<!-- END Logos Section: Plain -->
MarketingSectionsStatisticsSimple
<!-- Statistics Section: Simple -->
<div class="bg-white dark:bg-gray-900 dark:text-gray-100">
<div class="container mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl">
<div
class="grid grid-cols-1 divide-y text-center dark:divide-gray-700/75 sm:grid-cols-3 sm:divide-x sm:divide-y-0"
>
<dl class="space-y-1 px-5 py-8">
<dt class="text-4xl font-extrabold text-black dark:text-white">
8,600+
</dt>
<dd
class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-500"
>
Projects
</dd>
</dl>
<dl class="space-y-1 px-5 py-8">
<dt class="text-4xl font-extrabold text-black dark:text-white">
2,500+
</dt>
<dd
class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-500"
>
Clients
</dd>
</dl>
<dl class="space-y-1 px-5 py-8">
<dt class="text-4xl font-extrabold text-black dark:text-white">
760k+
</dt>
<dd
class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-500"
>
Earnings
</dd>
</dl>
</div>
</div>
</div>
<!-- END Statistics Section: Simple -->
MarketingSectionsTeamCircle Photos with Title
<!-- Team Section: Circle Photos with Title -->
<div class="bg-white dark:bg-gray-900 dark:text-gray-100">
<div
class="container mx-auto space-y-16 px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl"
>
<!-- Heading -->
<div class="text-center">
<div
class="mb-1 text-sm font-bold uppercase tracking-wider text-blue-600 dark:text-blue-500"
>
Real People
</div>
<h2 class="mb-4 text-4xl font-black text-black dark:text-white">
Meet our talented team
</h2>
<h3
class="mx-auto text-xl font-medium leading-relaxed text-gray-700 dark:text-gray-300 lg:w-2/3"
>
They are working nonstop behind the scenes to help you build better
products, web services and websites.
</h3>
</div>
<!-- END Heading -->
<!-- Team -->
<div
class="grid grid-cols-1 gap-8 text-center sm:grid-cols-2 md:grid-cols-3 md:gap-16"
>
<div>
<span
class="mb-5 inline-block rounded-full bg-white p-2 shadow-lg dark:bg-gray-700/75 dark:shadow-gray-950"
>
<img
src="https://cdn.tailkit.com/media/placeholders/avatar-bY4GXQKfZrA-320x320.jpg"
alt="User Avatar"
class="inline-block size-28 rounded-full"
/>
</span>
<h4 class="mb-0.5 text-xl font-bold">Irma Norton</h4>
<p class="font-medium text-gray-600 dark:text-gray-400">
Founder & CEO
</p>
</div>
<div>
<span
class="mb-5 inline-block rounded-full bg-white p-2 shadow-lg dark:bg-gray-700/75 dark:shadow-gray-950"
>
<img
src="https://cdn.tailkit.com/media/placeholders/avatar-iFgRcqHznqg-320x320.jpg"
alt="User Avatar"
class="inline-block size-28 rounded-full"
/>
</span>
<h4 class="mb-0.5 text-xl font-bold">Alejandro Lee</h4>
<p class="font-medium text-gray-600 dark:text-gray-400">
Product Design
</p>
</div>
<div>
<span
class="mb-5 inline-block rounded-full bg-white p-2 shadow-lg dark:bg-gray-700/75 dark:shadow-gray-950"
>
<img
src="https://cdn.tailkit.com/media/placeholders/avatar-mEZ3PoFGs_k-320x320.jpg"
alt="User Avatar"
class="inline-block size-28 rounded-full"
/>
</span>
<h4 class="mb-0.5 text-xl font-bold">Elsa King</h4>
<p class="font-medium text-gray-600 dark:text-gray-400">
Web Developer
</p>
</div>
<div>
<span
class="mb-5 inline-block rounded-full bg-white p-2 shadow-lg dark:bg-gray-700/75 dark:shadow-gray-950"
>
<img
src="https://cdn.tailkit.com/media/placeholders/avatar-sibVwORYqs0-320x320.jpg"
alt="User Avatar"
class="inline-block size-28 rounded-full"
/>
</span>
<h4 class="mb-0.5 text-xl font-bold">Alex Saunders</h4>
<p class="font-medium text-gray-600 dark:text-gray-400">Marketing</p>
</div>
<div>
<span
class="mb-5 inline-block rounded-full bg-white p-2 shadow-lg dark:bg-gray-700/75 dark:shadow-gray-950"
>
<img
src="https://cdn.tailkit.com/media/placeholders/avatar-euZ2n8dGUcQ-320x320.jpg"
alt="User Avatar"
class="inline-block size-28 rounded-full"
/>
</span>
<h4 class="mb-0.5 text-xl font-bold">Herman Reese</h4>
<p class="font-medium text-gray-600 dark:text-gray-400">
Support Specialist
</p>
</div>
<div>
<span
class="mb-5 inline-block rounded-full bg-white p-2 shadow-lg dark:bg-gray-700/75 dark:shadow-gray-950"
>
<img
src="https://cdn.tailkit.com/media/placeholders/avatar-DLKR_x3T_7s-320x320.jpg"
alt="User Avatar"
class="inline-block size-28 rounded-full"
/>
</span>
<h4 class="mb-0.5 text-xl font-bold">Sue Keller</h4>
<p class="font-medium text-gray-600 dark:text-gray-400">
Web Developer
</p>
</div>
</div>
<!-- END Team -->
</div>
</div>
<!-- END Team Section: Circle Photos with Title -->
MarketingSectionsTestimonialsSimple
<!-- Testimonials Section: Simple -->
<div class="bg-white dark:bg-gray-900 dark:text-gray-100">
<div class="container mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl">
<div class="relative">
<div
class="absolute right-0 top-0 -mt-5 font-serif text-9xl text-gray-200 opacity-75 dark:text-gray-700/75"
>
“
</div>
<div class="relative text-center">
<div class="mb-3">
<div
class="inline-flex items-center rounded-lg border border-amber-200 bg-amber-50 px-2 py-1 text-amber-500 dark:border-amber-900/50 dark:bg-amber-900/25"
>
<svg
class="hi-mini hi-star inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
/>
</svg>
<svg
class="hi-mini hi-star inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
/>
</svg>
<svg
class="hi-mini hi-star inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
/>
</svg>
<svg
class="hi-mini hi-star inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
/>
</svg>
<svg
class="hi-mini hi-star inline-block size-5"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
clip-rule="evenodd"
/>
</svg>
</div>
</div>
<blockquote class="mx-auto lg:w-2/3 xl:w-1/2">
<p class="mb-5 text-xl font-semibold leading-8">
I’ve been using pixelcave themes for years. The code is consistently
high-quality and pleasant to work with, so I highly recommended
them.
</p>
<footer class="space-y-4">
<a
href="javascript:void(0)"
class="mx-auto block size-20 overflow-hidden rounded-full border-2 border-gray-50 transition duration-150 ease-out hover:scale-125 hover:border-white hover:shadow-md active:scale-110 active:border-gray-50 active:shadow-sm dark:border-gray-900 dark:shadow-gray-950"
>
<img
src="https://cdn.tailkit.com/media/placeholders/avatar-iFgRcqHznqg-160x160.jpg"
alt="Avatar Photo"
/>
</a>
<div>
<a
href="javascript:void(0)"
class="text-lg font-semibold text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
>
John Smith
</a>
<div
class="mx-auto my-1 h-1 w-10 rounded-lg bg-blue-100 dark:bg-blue-500/25"
></div>
<p class="font-medium text-gray-500 dark:text-gray-400">
Founder and Lead Developer
</p>
</div>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
<!-- END Testimonials Section: Simple -->
EcommerceSectionsCheckoutSimple Box
<!-- Checkout Section: Simple Box -->
<div class="bg-gray-100 dark:bg-gray-900 dark:text-gray-100">
<div class="container mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl">
<!-- Box -->
<div
class="flex flex-col overflow-hidden rounded-lg bg-white shadow-sm dark:bg-gray-800 dark:text-gray-100"
>
<div class="mx-auto w-full max-w-lg grow p-5">
<!-- Heading -->
<div class="mt-5 text-center">
<h6
class="mb-1 text-sm font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400"
>
Checkout
</h6>
<h1 class="mb-1 text-2xl font-bold">Building a web app (Course)</h1>
<p class="mb-5 text-sm font-medium text-gray-600 dark:text-gray-400">
Enter your info to complete your purchase
</p>
<a
href="javascript:void(0)"
class="inline-flex w-full items-center justify-center gap-2 rounded-lg border border-gray-700 bg-gray-700 px-6 py-3 font-semibold leading-6 text-white hover:border-gray-600 hover:bg-gray-600 hover:text-white focus:ring focus:ring-gray-400/50 active:border-gray-700 active:bg-gray-700 dark:focus:ring-gray-400/90"
>
<svg
fill="currentColor"
viewBox="0 0 435.97 173.13"
xmlns="http://www.w3.org/2000/svg"
class="inline-block w-12"
>
<path
d="M206.2 84.58v50.75h-16.1V10h42.7a38.61 38.61 0 0 1 27.65 10.85A34.88 34.88 0 0 1 272 47.3a34.72 34.72 0 0 1-11.55 26.6q-11.2 10.68-27.65 10.67h-26.6Zm0-59.15v43.75h27a21.28 21.28 0 0 0 15.93-6.48 21.36 21.36 0 0 0 0-30.63 21 21 0 0 0-15.93-6.65h-27ZM309.1 46.78q17.85 0 28.18 9.54t10.32 26.16v52.85h-15.4v-11.9h-.7q-10 14.7-26.6 14.7-14.17 0-23.71-8.4a26.82 26.82 0 0 1-9.54-21q0-13.31 10.06-21.17t26.86-7.88q14.34 0 23.62 5.25v-3.68A18.33 18.33 0 0 0 325.54 67 22.8 22.8 0 0 0 310 61.13q-13.49 0-21.35 11.38l-14.18-8.93q11.7-16.8 34.63-16.8Zm-20.83 62.3a12.86 12.86 0 0 0 5.34 10.5 19.64 19.64 0 0 0 12.51 4.2 25.67 25.67 0 0 0 18.11-7.52q8-7.53 8-17.67-7.53-6-21-6-9.81 0-16.36 4.73c-4.41 3.2-6.6 7.09-6.6 11.76ZM436 49.58l-53.76 123.55h-16.62l19.95-43.23-35.35-80.32h17.5l25.55 61.6h.35l24.85-61.6Z"
fill="currentColor"
></path>
<path
d="M141.14 73.64A85.79 85.79 0 0 0 139.9 59H72v27.73h38.89a33.33 33.33 0 0 1-14.38 21.88v18h23.21c13.59-12.53 21.42-31.06 21.42-52.97Z"
fill="#4285f4"
></path>
<path
d="M72 144c19.43 0 35.79-6.38 47.72-17.38l-23.21-18C90.05 113 81.73 115.5 72 115.5c-18.78 0-34.72-12.66-40.42-29.72H7.67v18.55A72 72 0 0 0 72 144Z"
fill="#34a853"
></path>
<path
d="M31.58 85.78a43.14 43.14 0 0 1 0-27.56V39.67H7.67a72 72 0 0 0 0 64.66Z"
fill="#fbbc04"
></path>
<path
d="M72 28.5a39.09 39.09 0 0 1 27.62 10.8l20.55-20.55A69.18 69.18 0 0 0 72 0 72 72 0 0 0 7.67 39.67l23.91 18.55C37.28 41.16 53.22 28.5 72 28.5Z"
fill="#ea4335"
></path>
</svg>
</a>
<h3 class="my-5 flex items-center">
<span
aria-hidden="true"
class="h-0.5 grow rounded bg-gray-200 dark:bg-gray-700/75"
></span>
<span class="mx-3 text-sm font-medium text-gray-400">OR</span>
<span
aria-hidden="true"
class="h-0.5 grow rounded bg-gray-200 dark:bg-gray-700/75"
></span>
</h3>
</div>
<!-- END Heading -->
<!-- Checkout Form -->
<div class="space-y-6">
<form onsubmit="return false;" class="space-y-6">
<div
class="space-y-6 rounded border border-gray-200 bg-gray-50 p-4 dark:border-gray-700/75 dark:bg-gray-900/50"
>
<div class="space-y-1">
<input
type="email"
id="email"
name="email"
placeholder="Enter your email"
class="block w-full rounded-lg border border-gray-200 px-5 py-3 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
/>
</div>
<div class="space-y-1">
<input
type="text"
id="vat_id"
name="vat_id"
placeholder="Business VAT ID"
class="block w-full rounded-lg border border-gray-200 px-5 py-3 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
/>
</div>
</div>
<div
class="space-y-6 rounded border border-gray-200 bg-gray-50 p-4 dark:border-gray-700/75 dark:bg-gray-900/50"
>
<div class="space-y-1">
<label for="card_name" class="font-medium">Name on card</label>
<input
type="text"
id="card_name"
name="card_name"
class="block w-full rounded-lg border border-gray-200 px-5 py-3 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
/>
</div>
<div class="space-y-1">
<label for="card_number" class="font-medium">Card number</label>
<input
type="text"
id="card_number"
name="card_number"
class="block w-full rounded-lg border border-gray-200 px-5 py-3 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
/>
</div>
<div class="space-y-6 sm:flex sm:gap-3 sm:space-y-0">
<div class="grow space-y-1">
<label for="card_exp" class="font-medium"
>Expiration date (MM/YY)</label
>
<input
type="text"
id="card_exp"
name="card_exp"
class="block w-full rounded-lg border border-gray-200 px-5 py-3 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
/>
</div>
<div class="space-y-1 sm:w-40">
<label for="card_cvc" class="font-medium">CVC</label>
<input
type="text"
id="card_cvc"
name="card_cvc"
class="block w-full rounded-lg border border-gray-200 px-5 py-3 leading-6 placeholder-gray-500 focus:border-blue-500 focus:ring focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500"
/>
</div>
</div>
</div>
<div
class="rounded border border-gray-200 p-4 text-center text-sm font-medium text-gray-600 dark:border-gray-700/75 dark:text-gray-400"
>
You’ll be charged US$90.85 including VAT (15%).
</div>
<button
type="submit"
class="inline-flex w-full items-center justify-center gap-2 rounded-lg border border-blue-700 bg-blue-700 px-6 py-3 font-semibold leading-6 text-white hover:border-blue-600 hover:bg-blue-600 hover:text-white focus:ring focus:ring-blue-400/50 active:border-blue-700 active:bg-blue-700 dark:focus:ring-blue-400/90"
>
<span>Pay</span>
</button>
</form>
</div>
<!-- END Checkout Form -->
<!-- Footer -->
<div class="my-5 text-center">
<p class="text-sm font-medium text-gray-500 dark:text-gray-400">
Thanks for buying from our store.
</p>
</div>
<!-- Footer -->
</div>
</div>
<!-- END Box -->
</div>
</div>
<!-- END Checkout Section: Simple Box -->
EcommerceSectionsProduct ListsCategories Grid
<!-- Product List Section: Categories Grid -->
<div class="bg-white dark:bg-gray-900 dark:text-gray-100">
<div class="container mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
<a
href="javascript:void(0)"
class="group relative block overflow-hidden transition ease-out active:opacity-75 sm:col-span-2 md:col-span-1"
>
<img
src="https://cdn.tailkit.com/media/placeholders/photo-PDX_a_82obo-700x700.jpg"
alt="Product Image"
class="transition ease-out group-hover:scale-110"
/>
<div
class="absolute inset-0 bg-black/25 transition ease-out group-hover:bg-black/0"
></div>
<div class="absolute inset-0 flex items-center justify-center p-4">
<div
class="rounded-3xl bg-white/95 px-4 py-3 text-sm font-semibold uppercase tracking-wide transition ease-out group-hover:bg-blue-600 group-hover:text-white dark:border-gray-800 dark:bg-gray-900/90"
>
Electronics
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="group relative block overflow-hidden transition ease-out active:opacity-75"
>
<img
src="https://cdn.tailkit.com/media/placeholders/photo-1SAnrIxw5OY-700x700.jpg"
alt="Product Image"
class="transition ease-out group-hover:scale-110"
/>
<div
class="absolute inset-0 bg-black/25 transition ease-out group-hover:bg-black/0"
></div>
<div class="absolute inset-0 flex items-center justify-center p-4">
<div
class="rounded-3xl bg-white/95 px-4 py-3 text-sm font-semibold uppercase tracking-wide transition ease-out group-hover:bg-blue-600 group-hover:text-white dark:border-gray-800 dark:bg-gray-900/90"
>
Computers
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="group relative block overflow-hidden transition ease-out active:opacity-75"
>
<img
src="https://cdn.tailkit.com/media/placeholders/photo-gUPiTDBdRe4-700x700.jpg"
alt="Product Image"
class="transition ease-out group-hover:scale-110"
/>
<div
class="absolute inset-0 bg-black/25 transition ease-out group-hover:bg-black/0"
></div>
<div class="absolute inset-0 flex items-center justify-center p-4">
<div
class="rounded-3xl bg-white/95 px-4 py-3 text-sm font-semibold uppercase tracking-wide transition ease-out group-hover:bg-blue-600 group-hover:text-white dark:border-gray-800 dark:bg-gray-900/90"
>
Clothes
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="group relative block overflow-hidden transition ease-out active:opacity-75 sm:col-span-2 md:col-span-1"
>
<img
src="https://cdn.tailkit.com/media/placeholders/photo-ALpEkP29Eys-700x700.jpg"
alt="Product Image"
class="transition ease-out group-hover:scale-110"
/>
<div
class="absolute inset-0 bg-black/25 transition ease-out group-hover:bg-black/0"
></div>
<div class="absolute inset-0 flex items-center justify-center p-4">
<div
class="rounded-3xl bg-white/95 px-4 py-3 text-sm font-semibold uppercase tracking-wide transition ease-out group-hover:bg-blue-600 group-hover:text-white dark:border-gray-800 dark:bg-gray-900/90"
>
Smart Home
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="group relative block overflow-hidden transition ease-out active:opacity-75"
>
<img
src="https://cdn.tailkit.com/media/placeholders/photo-164_6wVEHfI-700x700.jpg"
alt="Product Image"
class="transition ease-out group-hover:scale-110"
/>
<div
class="absolute inset-0 bg-black/25 transition ease-out group-hover:bg-black/0"
></div>
<div class="absolute inset-0 flex items-center justify-center p-4">
<div
class="rounded-3xl bg-white/95 px-4 py-3 text-sm font-semibold uppercase tracking-wide transition ease-out group-hover:bg-blue-600 group-hover:text-white dark:border-gray-800 dark:bg-gray-900/90"
>
Shoes
</div>
</div>
</a>
<a
href="javascript:void(0)"
class="group relative block overflow-hidden transition ease-out active:opacity-75"
>
<img
src="https://cdn.tailkit.com/media/placeholders/photo-wW7XbWYoqK8-700x700.jpg"
alt="Product Image"
class="transition ease-out group-hover:scale-110"
/>
<div
class="absolute inset-0 bg-black/25 transition ease-out group-hover:bg-black/0"
></div>
<div class="absolute inset-0 flex items-center justify-center p-4">
<div
class="rounded-3xl bg-white/95 px-4 py-3 text-sm font-semibold uppercase tracking-wide transition ease-out group-hover:bg-blue-600 group-hover:text-white dark:border-gray-800 dark:bg-gray-900/90"
>
Wearables
</div>
</div>
</a>
</div>
</div>
</div>
<!-- END Product List Section: Categories Grid -->
Make them yours!