v5.0 launch sale - limited time offer!
Sneak peeks are the best!
Yes, these are free Tailwind Components.
Explore a free collection of our carefully crafted Tailwind Components through the neat Preview Pane. Grab one of the available Starter Kits and give them a go. Do you want them all? Get access now!
Application UILayoutsStackedLight Header and Heading
JS required
<!-- Page Container -->
<div
id="page-container"
class="mx-auto flex min-h-dvh w-full min-w-80 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-xs 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 gap-2 lg:gap-6">
<!-- 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 -->
<!-- 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"
>
<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"
>
<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"
>
<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"
>
<span>Sales</span>
</a>
</nav>
<!-- END Desktop Navigation -->
</div>
<!-- END Left Section -->
<!-- Right Section -->
<div class="flex items-center gap-2">
<!-- Notifications -->
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm leading-5 font-semibold text-gray-800 hover:border-gray-300 hover:text-gray-900 hover:shadow-xs focus:ring-3 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-outline hi-bell-alert inline-block size-5"
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="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5"
/>
</svg>
</a>
<!-- END Notifications -->
<!-- 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 leading-5 font-semibold text-gray-800 hover:border-gray-300 hover:text-gray-900 hover:shadow-xs focus:ring-3 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"
>
<svg
class="hi-mini hi-user-circle inline-block size-5 sm:hidden"
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="hidden sm:inline">John</span>
<svg
class="hi-mini hi-chevron-down hidden size-5 opacity-40 sm:inline-block"
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 leading-4 font-semibold 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 leading-4 font-semibold 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 leading-5 font-semibold text-gray-800 hover:border-gray-300 hover:text-gray-900 hover:shadow-xs focus:ring-3 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"
>
<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"
>
<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"
>
<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"
>
<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 Heading -->
<div class="bg-gray-50 dark:bg-gray-800/50">
<div class="container mx-auto p-4 lg:p-8 xl:max-w-7xl">
<div
class="space-y-2 py-2 text-center sm:flex sm:items-center sm:justify-between sm:space-y-0 sm:text-left lg:py-0"
>
<div class="grow">
<h1 class="mb-1 text-xl font-bold">Dashboard</h1>
<h2
class="text-sm font-medium text-gray-500 dark:text-gray-400"
>
Welcome
<a
href="javascript:void(0)"
class="text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
>John</a
>, everything seems great!
</h2>
</div>
<div
class="flex flex-none items-center justify-center gap-2 rounded-sm px-2 py-3 sm:justify-end sm:bg-transparent sm:px-0"
>
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-blue-700 bg-blue-700 px-3 py-2 text-sm leading-5 font-semibold text-white hover:border-blue-600 hover:bg-blue-600 hover:text-white focus:ring-3 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 inline-block size-5 opacity-50"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
/>
</svg>
<span>New Project</span>
</a>
</div>
</div>
</div>
</div>
<!-- END Page Heading -->
<!-- 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="pt-4 pb-1 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 pt-1 pb-4 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="flex items-start gap-4 rounded-xl border border-emerald-100/75 bg-emerald-50 p-4 md:p-6 dark:border-emerald-900/50 dark:bg-emerald-950/25 dark:text-gray-100"
>
<div class="flex-none">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-check-circle inline-block size-5 text-emerald-600 dark:text-emerald-400"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
clip-rule="evenodd"
/>
</svg>
</div>
<div class="grow">
<h4 class="text-lg font-semibold">Project was added successfully!</h4>
<p class="mt-1 text-sm/relaxed">
Manage all available projects from your
<a
href="javascript:void(0)"
class="text-emerald-600 underline hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300"
>personal dashboard</a
>.
</p>
</div>
</div>
<!-- END Alerts: Success -->
Application UIComponentsCardsUser
<!-- Cards: User -->
<div
class="flex flex-col overflow-hidden rounded-lg bg-white shadow-xs dark:bg-gray-800 dark:text-gray-100"
>
<!-- Card Cover/Avatar -->
<div
class="mb-8 bg-cover"
style="
background-image: url("https://cdn.tailkit.com/media/placeholders/photo-JgOeRuGD_Y4-800x400.jpg");
"
>
<div class="flex h-32 items-end justify-center">
<div
class="-mb-12 rounded-full bg-gray-200/50 p-2 dark:bg-gray-600/50"
>
<img
src="https://cdn.tailkit.com/media/placeholders/avatar-c_GmwfHBDzk-160x160.jpg"
alt="User Avatar"
class="inline-block size-20 rounded-full"
/>
</div>
</div>
</div>
<!-- END Card Cover/Avatar -->
<!-- Card Body -->
<div class="grow p-5 text-center">
<h3 class="mt-3 mb-1 text-lg font-semibold">Antony Jaramillo</h3>
<p class="text-sm font-medium text-gray-600 dark:text-gray-400">
Web Developer ∙ 12 Projects
</p>
</div>
<!-- END Card Body -->
</div>
<!-- END Cards: User -->
Application UIComponentsDividersWith Heading
<!-- Divider: With Heading -->
<h3 class="my-8 flex items-center">
<span
aria-hidden="true"
class="h-0.5 grow rounded-sm 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-sm 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 leading-5 font-semibold text-white hover:border-blue-600 hover:bg-blue-600 hover:text-white focus:ring-3 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 ActionsWith Link
<!-- Form Actions: With Link -->
<form onsubmit="return false;">
<!-- Card -->
<div
class="flex flex-col overflow-hidden rounded-lg bg-white shadow-xs dark:bg-gray-800 dark:text-gray-100"
>
<!-- Card Body -->
<div
class="w-full grow space-y-4 border-l-4 border-blue-500 p-5 sm:flex sm:items-center sm:justify-between sm:gap-2 sm:space-y-0"
>
<div class="sm:w-1/2">
<h3 class="mb-1 text-lg font-semibold">Upgrade to the Agency plan</h3>
<p class="mb-4 text-gray-500 dark:text-gray-400">
Power up your current plan with only $9,99 per month and receive tons
of new features including but not limited to:
</p>
<ul
class="list-inside list-disc space-y-2 text-sm text-gray-500 dark:text-gray-400"
>
<li>10GB storage</li>
<li>1TB bandwith</li>
<li>Exclusive 24/7 email, phone and chat support</li>
</ul>
</div>
<div class="flex-none">
<a
href="javascript:void(0)"
class="inline-flex items-center gap-1 text-sm font-semibold text-blue-600 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300"
>
<svg
class="hi-mini hi-arrow-up 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="M10 17a.75.75 0 01-.75-.75V5.612L5.29 9.77a.75.75 0 01-1.08-1.04l5.25-5.5a.75.75 0 011.08 0l5.25 5.5a.75.75 0 11-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0110 17z"
clip-rule="evenodd"
/>
</svg>
<span>Upgrade your plan</span>
</a>
</div>
</div>
<!-- END Card Body -->
</div>
<!-- END Card -->
</form>
<!-- END Form Actions: With Link -->
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="inline-block 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-3 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="inline-block 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-3 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="inline-block 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-3 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 sm:flex-row sm:items-center sm:gap-2 dark:text-gray-100"
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-3 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-3 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 leading-6 font-semibold text-white hover:border-blue-600 hover:bg-blue-600 hover:text-white focus:ring-3 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="inline-block 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-3 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="inline-block 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-3 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 leading-5 font-semibold text-white hover:border-blue-600 hover:bg-blue-600 hover:text-white focus:ring-3 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 Text
<!-- List Groups: With Text -->
<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="mr-1 text-sm font-semibold">Website</span>
<span class="text-sm font-medium text-emerald-500">Operational</span>
</li>
<li class="flex items-center justify-between p-4">
<span class="mr-1 text-sm font-semibold">Desktop Application</span>
<span class="text-sm font-medium text-emerald-500">Operational</span>
</li>
<li class="flex items-center justify-between p-4">
<span class="mr-1 text-sm font-semibold">Mobile Application</span>
<span class="text-sm font-medium text-emerald-500">Operational</span>
</li>
<li class="flex items-center justify-between p-4">
<span class="mr-1 text-sm font-semibold">API</span>
<span class="text-sm font-medium text-emerald-500">Operational</span>
</li>
<li class="flex items-center justify-between p-4">
<span class="mr-1 text-sm font-semibold">Documentation</span>
<span class="text-sm font-medium text-emerald-500">Operational</span>
</li>
</ul>
<!-- END List Groups: With Text -->
Application UIComponentsMedia ObjectsComment
<!-- Media Objects: Comment -->
<div
class="flex flex-col overflow-hidden rounded-lg bg-white shadow-xs 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 HeadingsWith Icon
<!-- Page Headings: With Icon -->
<h2
class="mb-4 flex flex-col border-b-2 border-gray-200 py-2 text-2xl font-bold sm:flex-row sm:items-end sm:gap-2 lg:mb-8 dark:border-gray-700"
>
<span class="inline-flex items-center gap-2">
<svg
class="hi-outline hi-presentation-chart-line inline-block size-6 opacity-50"
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="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"
/>
</svg>
<span>Analytics</span>
</span>
<span class="text-lg font-medium text-gray-600 dark:text-gray-400"
>Welcome back!</span
>
</h2>
<!-- END Page Headings: With Icon -->
<!-- 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 leading-6 font-semibold text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-xs focus:z-1 focus:ring-3 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 leading-6 font-semibold text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-xs focus:z-1 focus:ring-3 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 leading-6 font-semibold text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-xs focus:z-1 focus:ring-3 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 leading-6 font-semibold text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-xs focus:z-1 focus:ring-3 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 leading-6 font-semibold text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-xs focus:z-1 focus:ring-3 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 leading-6 font-semibold text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-xs focus:z-1 focus:ring-3 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 leading-6 font-semibold text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-xs focus:z-1 focus:ring-3 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 leading-6 font-semibold text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-xs focus:z-1 focus:ring-3 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 leading-6 font-semibold text-gray-800 hover:z-1 hover:border-gray-300 hover:text-gray-900 hover:shadow-xs focus:z-1 focus:ring-3 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-xs 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 tracking-wider text-gray-500 uppercase 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 leading-4 font-semibold 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-xs 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 tracking-wider text-gray-500 uppercase 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 leading-4 font-semibold 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-xs 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 tracking-wider text-gray-500 uppercase 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 leading-4 font-semibold 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-80 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-xs 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="inline-block 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-3 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="inline-block 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-3 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-sm border border-gray-200 text-blue-500 checked:border-blue-500 focus:border-blue-500 focus:ring-3 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 leading-6 font-semibold text-white hover:border-blue-600 hover:bg-blue-600 hover:text-white focus:ring-3 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-sm 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-sm 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 leading-5 font-semibold text-gray-800 hover:border-gray-300 hover:text-gray-900 hover:shadow-xs focus:ring-3 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 leading-5 font-semibold text-gray-800 hover:border-gray-300 hover:text-gray-900 hover:shadow-xs focus:ring-3 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 md:px-16 dark:bg-gray-700/50"
>
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 -->
MarketingSectionsHeroCentered with Simple Header
<!-- Hero Section: Centered 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 text-gray-900 hover:text-gray-600 dark:text-gray-100 dark:hover:text-gray-300"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
class="lucide lucide-bolt inline-block size-6 text-blue-600 transition group-hover:scale-110 dark:text-blue-400"
>
<path
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
/>
<circle cx="12" cy="12" r="4" />
</svg>
<span>Flow</span>
</a>
</div>
<nav class="flex flex-wrap items-center justify-center gap-3 md:gap-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>Solutions</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>Resources</span>
</a>
</nav>
</div>
<!-- END Main Header Content -->
</header>
<!-- END Main Header -->
<!-- Hero Content -->
<div
class="relative container mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl"
>
<div class="text-center">
<div
class="mb-5 font-['Caveat'] text-3xl text-blue-600 dark:text-blue-400"
>
Create your own website in minutes.
</div>
<h1 class="mb-4 text-4xl font-black lg:text-5xl dark:text-white">
Next generation website builder
</h1>
<p
class="mx-auto max-w-2xl text-lg/relaxed font-medium text-gray-700 lg:text-xl/relaxed 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.
</p>
</div>
<div class="mt-10 flex flex-wrap items-center justify-center gap-4 pb-28">
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center gap-2 rounded-xl border border-blue-700 bg-blue-700 px-5 py-3.5 leading-6 font-semibold text-white hover:border-blue-600 hover:bg-blue-600 hover:text-white focus:ring-3 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-xl border border-gray-200 bg-white px-5 py-3.5 leading-6 font-semibold text-gray-800 hover:border-gray-300 hover:text-gray-900 hover:shadow-xs focus:ring-3 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 class="relative mx-auto max-w-4xl">
<div
class="bg-tranparent absolute top-0 left-0 -mt-16 -ml-20 size-40 rounded-full border border-gray-500/10 lg:size-64 dark:border-white/5"
></div>
<div
class="bg-tranparent absolute top-0 left-0 -mt-20 -ml-14 size-40 rounded-full border border-gray-500/20 lg:size-64 dark:border-white/15"
></div>
<div
class="bg-tranparent absolute right-0 bottom-0 -mr-20 -mb-16 size-40 rounded-full border border-gray-500/10 lg:size-64 dark:border-white/5"
></div>
<div
class="bg-tranparent absolute right-0 bottom-0 -mr-14 -mb-20 size-40 rounded-full border border-gray-500/20 lg:size-64 dark:border-white/15"
></div>
<div
class="absolute inset-0 -m-3 rounded-3xl border border-gray-200 bg-gray-200/20 shadow-lg shadow-gray-200/50 backdrop-blur-xs dark:border-white/10 dark:bg-white/5 dark:shadow-black/10"
></div>
<img
src="https://cdn.tailkit.com/media/placeholders/photo-SYTO3xs06fU-1440x960.jpg"
class="relative mx-auto aspect-4/3 w-full rounded-2xl object-cover shadow-sm shadow-gray-300/50 dark:shadow-gray-700/50"
alt="Hero Image"
/>
</div>
</div>
<!-- END Hero Content -->
</div>
<!-- END Hero Section: Centered 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 tracking-wider text-blue-600 uppercase dark:text-blue-500"
>
Documentation
</div>
<h2 class="mb-4 text-4xl font-black text-black dark:text-white">
Getting Started with Tailkit
</h2>
<p
class="mx-auto text-xl leading-relaxed font-medium text-gray-700 lg:w-2/3 dark:text-gray-300"
>
Get to know how it can help you build the User Interface of your website
and web application with the minimal effort.
</p>
</div>
</div>
</div>
<!-- END Page Header Section: Simple -->
MarketingSectionsAboutCompany with Stats
<!-- About Section: Company with Stats -->
<div class="dark:bg-gray-950 dark:text-gray-100">
<div
class="container mx-auto flex flex-col gap-16 px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl"
>
<!-- Heading -->
<div class="text-center">
<h2 class="text-4xl font-black">We are TechCode</h2>
<p
class="mx-auto mt-4 w-full max-w-3xl text-lg/relaxed font-medium text-gray-700 dark:text-gray-300"
>
A passionate team who are here to help you code and build your business
using powerful tools. Let's build something amazing together.
</p>
</div>
<!-- END Heading -->
<!-- Promo Image -->
<div
class="mx-auto max-w-3xl bg-gray-100/75 mask-r-from-65% mask-l-from-65% py-2 ring-1 ring-gray-300 dark:bg-gray-800/75 dark:ring-gray-800"
>
<img
src="https://cdn.tailkit.com/media/placeholders/photo-Oalh2MojUuk-1280x800.jpg"
alt="Company with Stats"
class="aspect-21/9 w-full object-cover"
/>
</div>
<!-- END Promo Image -->
<!-- Stats -->
<div
class="mx-auto grid w-full max-w-5xl grid-cols-1 gap-1 rounded-[1.25rem] bg-gray-50/75 p-1.5 sm:grid-cols-2 lg:grid-cols-3 dark:bg-gray-900/50"
>
<dl
class="rounded-2xl border border-gray-200/80 bg-white p-6 text-center shadow-xs lg:p-8 xl:p-10 dark:border-gray-800/75 dark:bg-gray-950"
>
<dt class="text-3xl font-black">83,589</dt>
<dd class="mt-2.5 text-gray-600 dark:text-gray-400">
Customers
</dd>
</dl>
<dl
class="rounded-2xl border border-gray-200/80 bg-white p-6 text-center shadow-xs lg:p-8 xl:p-10 dark:border-gray-800/75 dark:bg-gray-950"
>
<dt class="text-3xl font-black">17,594</dt>
<dd class="mt-2.5 text-gray-600 dark:text-gray-400">
Web apps
</dd>
</dl>
<dl
class="rounded-2xl border border-gray-200/80 bg-white p-6 text-center shadow-xs lg:p-8 xl:p-10 dark:border-gray-800/75 dark:bg-gray-950"
>
<dt class="text-3xl font-black">96,188</dt>
<dd class="mt-2.5 text-gray-600 dark:text-gray-400">
Projects
</dd>
</dl>
<dl
class="rounded-2xl border border-gray-200/80 bg-white p-6 text-center shadow-xs lg:p-8 xl:p-10 dark:border-gray-800/75 dark:bg-gray-950"
>
<dt class="text-3xl font-black">120+</dt>
<dd class="mt-2.5 text-gray-600 dark:text-gray-400">
Integrations
</dd>
</dl>
<dl
class="rounded-2xl border border-gray-200/80 bg-white p-6 text-center shadow-xs lg:p-8 xl:p-10 dark:border-gray-800/75 dark:bg-gray-950"
>
<dt class="text-3xl font-black">45+</dt>
<dd class="mt-2.5 text-gray-600 dark:text-gray-400">
Countries
</dd>
</dl>
<dl
class="rounded-2xl border border-gray-200/80 bg-white p-6 text-center shadow-xs lg:p-8 xl:p-10 dark:border-gray-800/75 dark:bg-gray-950"
>
<dt class="text-3xl font-black">24/7</dt>
<dd class="mt-2.5 text-gray-600 dark:text-gray-400">
Support
</dd>
</dl>
</div>
<!-- END Stats -->
</div>
</div>
<!-- END About Section: Company with Stats -->
MarketingSectionsCTASimple with Illustration
<!-- CTA Section: Simple With Illustration -->
<div class="bg-white dark:bg-gray-950 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">
<div
class="flex flex-col items-center gap-8 text-center lg:items-start lg:text-left"
>
<!-- Heading -->
<div>
<div
class="mb-5 font-['Caveat'] text-[1.625rem] text-blue-600 dark:text-blue-400"
>
Get Started
</div>
<h2 class="text-4xl font-black dark:text-white">
Grow your business today the easy way!
</h2>
<p
class="mx-auto mt-4 w-full max-w-3xl text-lg/relaxed font-medium 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.
</p>
</div>
<!-- END Heading -->
<!-- Action -->
<div>
<a
href="javascript:void(0)"
class="group inline-flex items-center justify-center gap-1.5 rounded-lg border border-blue-700 bg-blue-700 px-3.5 py-2.5 text-sm/6 font-semibold text-white hover:border-blue-600 hover:bg-blue-600 hover:text-white focus:ring-3 focus:ring-blue-400/25 active:border-blue-700 active:bg-blue-700"
>
<span>Create your account</span>
<svg
class="hi-mini hi-arrow-right inline-block size-5 opacity-50 transition-transform duration-150 group-hover:translate-x-0.5 group-active:scale-90"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
clip-rule="evenodd"
/>
</svg>
</a>
</div>
<!-- END Action -->
</div>
</div>
<div
class="flex items-center justify-center text-blue-600 dark:text-blue-400"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 855.157 581.907"
class="w-full max-w-sm"
>
<path
fill="#e6e6e6"
d="M519.741 326.238a5.5 5.5 0 0 1 5.5 5.5v53.206h105.5a5.5 5.5 0 0 1 0 11h-105.5v184h-11V331.738a5.5 5.5 0 0 1 5.5-5.5"
/>
<path
fill="#3f3d56"
d="m226.147 578.694-19.832.548a13.8 13.8 0 0 1-8.486-2.38c-2.154-1.601-3.142-3.767-2.708-5.942l3.902-19.613c.736-3.7 5.27-6.497 10.78-6.649l10.953-.302c5.51-.152 10.191 2.39 11.13 6.044l4.98 19.368c.552 2.147-.315 4.364-2.377 6.083a13.8 13.8 0 0 1-8.342 2.843m120.63-.56-19.832.547a13.8 13.8 0 0 1-8.485-2.379c-2.154-1.602-3.142-3.767-2.709-5.942l3.903-19.613c.735-3.7 5.27-6.497 10.78-6.65l10.952-.302c5.51-.152 10.192 2.39 11.13 6.044l4.98 19.368c.552 2.148-.315 4.365-2.377 6.083a13.8 13.8 0 0 1-8.342 2.844M157.282 411.63a4.331 4.331 0 0 1 1.595-8.308l225.468-6.226a4.33 4.33 0 0 1 4.448 4.208 4.336 4.336 0 0 1-4.209 4.449l-225.468 6.225a4.3 4.3 0 0 1-1.834-.349"
/>
<path
fill="#e6e6e6"
d="m176.042 338.768 64.449-1.78 6.009 217.598-64.45 1.78z"
/>
<path
fill="#ccc"
d="m242.126 333.079-12.389 33.749.011 153.759 15.096 4.329z"
/>
<path
fill="#3f3d56"
d="M207.93 280.122c-12.057.342-21.256 21.209-21.035 29.352l.407 14.741 43.659-1.205-.407-14.742c-.229-8.142-10.566-28.47-22.624-28.146M176.878 428.88a8.51 8.51 0 0 1-8.731-8.261l-.663-23.991a8.5 8.5 0 1 1 16.994-.47l.662 23.991a8.51 8.51 0 0 1-8.262 8.732"
/>
<path
fill="#3f3d56"
d="m193.233 339.284-.305-15.855 4.158-.103.305 15.804 3.769 230.346-4.159.115"
/>
<path
fill="#e6e6e6"
d="m247.881 376.36-74.738 2.065c-7.139-8.706-7.787-45.793 7.11-52.851l5.843-9.92 45.042-2.2 5.265 10.446c7.41 6.305 11.231 43.161 11.478 52.46"
/>
<path
fill="currentColor"
d="m219.75 358.573-18.9.522c-3.646.101-6.747-4.63-6.91-10.546s2.671-10.811 6.318-10.912l18.9-.522c3.648-.1 6.748 4.631 6.912 10.547s-2.672 10.81-6.32 10.911"
/>
<path
fill="#e6e6e6"
d="m183.151 465.568-38.959 27.52-6.806 62.05 45.448-15.185zm117.302-129.465 64.449-1.78 6.009 217.598-64.45 1.78z"
/>
<path
fill="#ccc"
d="m301.996 333.806 13.261 33.416 3.979 153.708-14.979 4.719z"
/>
<ellipse
cx="397.132"
cy="262.584"
fill="#e6e6e6"
rx="8.447"
ry="11.327"
/>
<path
fill="#3f3d56"
d="M331.083 277.492c-12.057.342-21.257 21.209-21.036 29.352l.407 14.741 43.66-1.205-.407-14.742c-.23-8.143-10.566-28.47-22.624-28.146m12.484 66.755-.305-15.855 4.158-.104.305 15.805 3.769 230.346-4.159.115"
/>
<path
fill="#e6e6e6"
d="m371.034 373.73-74.739 2.064c-1.303-7.876.383-44.632 7.111-52.85l5.843-9.92 45.042-2.2 5.264 10.445c13.299 1.084 17.95 37.204 11.479 52.462"
/>
<path
fill="currentColor"
d="m342.995 359.254-18.9.522c-3.647.1-6.769-5.374-6.957-12.202s2.626-12.466 6.273-12.567l18.9-.522c3.647-.1 6.768 5.374 6.957 12.202s-2.626 12.466-6.273 12.567"
/>
<path
fill="#e6e6e6"
d="m368.086 449.662 37.663 29.268 3.966 62.297-44.706-17.244z"
/>
<path
fill="#f2f2f2"
d="M357.568 161.12c-40.413 0-86.857-44.845-127.949-23.538-124.415 64.514-107.288-43.44-143.032-83.589l1.174-2.353c27.06 103.218 51.543 267.692 142.398 83.204 22.76-46.214 97.456 25.22 141.424 23.113l.076 2.83q-6.965.335-14.09.334m96.996 6.346c-32.215 24.4-96.316 16.691-116.208 58.487-60.228 126.545-111.754 30.148-164.488 19.723l-.485-2.584c52.79 4.378 109.414-2.416 163.751-19.648 49.104-15.571 92.914-38.735 126.692-66.962l1.769 2.21q-5.35 4.473-11.03 8.774"
/>
<ellipse
cx="104.132"
cy="150.584"
fill="#e6e6e6"
rx="8.447"
ry="11.327"
/>
<ellipse
cx="366.132"
cy="58.584"
fill="#e6e6e6"
rx="8.447"
ry="11.327"
/>
<path
fill="#e6e6e6"
d="M181.47 207.63c-3.861 2.572-7.814-3.552-3.878-6.011 3.862-2.573 7.815 3.551 3.879 6.01M324.47 6.63c-3.861 2.572-7.814-3.552-3.878-6.011 3.862-2.573 7.815 3.551 3.879 6.01m84.278 119.172-2.457-.539.538-2.458-1.638-.359-.539 2.458-2.457-.538-.359 1.638 2.457.539-.538 2.457 1.638.359.539-2.458 2.457.539z"
/>
<circle cx="183.535" cy="32.737" r="10.702" fill="#ff6584" />
<path
fill="#3f3d56"
d="M261.816 19.19c-12.058.343-21.257 21.21-21.036 29.352l.407 14.742 43.66-1.206-.408-14.741c-.228-8.143-10.565-28.47-22.623-28.147m25.997 558.22-19.833.547a13.8 13.8 0 0 1-8.485-2.38c-2.154-1.601-3.142-3.767-2.709-5.942l3.903-19.612c.735-3.7 5.27-6.498 10.78-6.65l10.952-.302c5.51-.152 10.192 2.39 11.13 6.044l4.98 19.368c.552 2.147-.315 4.364-2.377 6.083a13.8 13.8 0 0 1-8.341 2.843"
/>
<path
fill="#e6e6e6"
d="m232.207 114.816 64.45-1.78 12.145 439.848-64.45 1.78z"
/>
<path
fill="#3f3d56"
d="m270.868 325.949-.305-15.855 4.158-.103.305 15.804 3.769 230.346-4.159.115"
/>
<path
fill="#e6e6e6"
d="m309.345 153.292-87.326 2.41c-1.522-9.202.447-52.15 8.309-61.751l2.154-11.462 60.297-1.665 3.154 11.17c8.66 7.369 13.124 50.432 13.412 61.298"
/>
<path
fill="#e6e6e6"
d="m294.685 82.176-62.223 1.718c-2.297.064-4.193-1.142-4.236-2.693a2 2 0 0 1 .097-.658l9.665-29.776c.414-1.275 2.061-2.211 3.984-2.264l41.265-1.14c1.922-.053 3.619.791 4.103 2.042L298.633 78.6c.578 1.493-.756 3.047-2.98 3.47a6 6 0 0 1-.968.105"
/>
<path
fill="#3f3d56"
d="M238.6 323.926a7.6 7.6 0 0 1-1.58-.915 5.6 5.6 0 0 1-2.38-4.321l-2.26-81.878c-.094-3.389 3.225-6.24 7.397-6.356l55.703-1.538c4.173-.116 7.643 2.549 7.737 5.938l2.261 81.878a5.6 5.6 0 0 1-2.137 4.446 8.5 8.5 0 0 1-5.261 1.91l-55.703 1.538a8.9 8.9 0 0 1-3.777-.702"
/>
<path
fill="currentColor"
d="m274.253 76.907-18.9.522c-3.648.1-6.732-4.02-6.874-9.184s2.71-9.45 6.356-9.55l18.9-.522c3.647-.1 6.731 4.02 6.874 9.184s-2.71 9.45-6.356 9.55"
/>
<path
fill="#e6e6e6"
d="M721.009 562.528h-22V402.651c18.402-1.32 32.232-6.955 32.232-13.707 0-7.732-18.132-14-40.5-14s-40.5 6.268-40.5 14c0 6.817 14.1 12.494 32.768 13.742v159.842h-22a8 8 0 0 0 0 16h60a8 8 0 0 0 0-16"
/>
<path
fill="#a0616a"
d="m676.847 481.363-7.227 7.875-33.814-24.126 10.665-11.623z"
/>
<path
fill="#2f2e41"
d="M658.368 502.148a13.32 13.32 0 0 0 4.336 9.308l.318.296 9.478-10.329 13.82-15.064-10.202-9.366-1.843 2.012-.192.207-9.182 4.343-1.945.925-.333.155-.733 7.865v.008a13.28 13.28 0 0 0-3.522 9.64"
/>
<path
fill="#a0616a"
d="m714.287 559.924-10.227 3.107-16.85-37.968 15.094-4.585z"
/>
<path
fill="#2f2e41"
d="m686.801 578.643.126.421 32.976-10.017-4.025-13.251-2.604.791-.274.082-12.26-1.125-.362-.03-4.64 6.4a13.413 13.413 0 0 0-8.937 16.729"
/>
<path
fill="#2f2e41"
d="M629.957 361.128s-65.294 63.042-24.016 82.556h12.758a84.5 84.5 0 0 1 12.611-25.108c1.206-1.577 5.721-1.257 6.975-2.794 7.657-9.387 15.959-17.448 21.692-17.128l-1.372 43.558-2.22 15.537c-1.165 8.032 31.728 78.161 31.728 78.161l20.674-8.125s-21.54-57.762-21.792-66.09l17.261-91.561Z"
data-name="Path 17"
/>
<path
fill="currentColor"
d="M624.512 364.237a3.9 3.9 0 0 0 1.273 1.154 9 9 0 0 0 2.67.992c14.702 3.337 62.726 10.254 75.193 6.955 1.532-.4 2.53-.962 2.856-1.702 1.043-2.338.91-12.215.296-24.142-.111-2.234-2.575-4.654-2.723-6.992-.103-1.753 2.109-3.403 1.99-5.186-.813-12.06-1.864-24.349-2.567-32.118-.444-4.994-.747-8.116-.747-8.116l7.583-47.817-.355-.585-.4-.2-24.452-12.104-1.331-3.403a5.27 5.27 0 0 0-4.876-3.337l-16.107-.066a5.25 5.25 0 0 0-4.284 2.175l-4.365 6.044-28.855 18.497.111.34 13.54 41.203.066 3.211v.008l.503 25.821-1.398 3.5 1.576 5.741s-.725 6.71-4.61 11.697c-3.521 4.528-8.005 9.249-10.032 13.081v.007c-1.125 2.117-1.502 3.951-.555 5.342"
/>
<path
fill="#2f2e41"
d="m602.806 439.939 3.49 4.41s32.097 22.456 33.2 24.554l5.072 4.8 12.274-13.12-6.383-8a50.1 50.1 0 0 0-19.22-14.716l-9.783-8.679Z"
data-name="Path 18"
/>
<path
fill="#a0616a"
d="m718.425 379.131-5.845-56.577-1.543-23.286 16.36-2.958s-.648 16.65 1.495 26.044c2.115 9.27.28 55.535.15 56.772a7.96 7.96 0 1 1-10.617.005"
/>
<path
fill="currentColor"
d="m698.943 293.447 4.557 9.751 1.59 3.396 4.285 22.433 2.138 2.272 1.842 7.332.866-.178 15.61-3.233 4.551-.94a8.65 8.65 0 0 0-1.568-10.824c-.311-.281-.57-.555-.563-.814.26-15.604-.695-44.096-9.315-55.823-2.737-3.721-4.38-7.428-6.77-10.017-.007-.008-.007-.015-.014-.015l-5.816-9.522-.355-.585-.4-.2Z"
/>
<circle
cx="672.128"
cy="202.131"
r="21.431"
fill="#a0616a"
data-name="Ellipse 5"
/>
<path
fill="#2f2e41"
d="M697.575 197.52c.628-3.602 1.117-8.27-.68-12.42-1.52-3.493-5.321-6.768-9.546-6.326a4.4 4.4 0 0 0-1.372-4.4 11.56 11.56 0 0 0-4.689-2.204c-3.97-1.167-8.084-2.377-12.331-2.4-4.767-.025-8.99 1.608-11.58 4.487l-.064.093-.776 1.854a1.87 1.87 0 0 1-1.149 1.057 1.84 1.84 0 0 1-1.553-.19 1.695 1.695 0 0 0-2.581 1.366l-.042.79-1.112-.443a1.69 1.69 0 0 0-2.298 1.85l.148.942a1.8 1.8 0 0 0-1.38.31 1.655 1.655 0 0 0-.59 1.86 15.4 15.4 0 0 0 4.285 6.4 12.8 12.8 0 0 0 2.908 1.978q.33.166.685.314a76.3 76.3 0 0 0 26.963 6.108 15.7 15.7 0 0 0-1.674 5.372 5.88 5.88 0 0 0 2.514 5.542 7.4 7.4 0 0 0 1.204.551 8 8 0 0 1 1.154.535 3.598 3.598 0 0 1-.148 6.243s1.595 1.947 1.85 1.914a5 5 0 0 0 2.625-1.553c4.641-4.507 7.746-11.107 9.23-19.63"
/>
<path
fill="#f2f2f2"
d="m791.398 528.793.931-20.943a67.64 67.64 0 0 1 31.55-7.987c-15.153 12.389-13.26 36.27-23.532 52.929a40.69 40.69 0 0 1-29.836 18.801l-12.68 7.764a68.18 68.18 0 0 1 14.37-55.246 66 66 0 0 1 12.103-11.245c3.037 8.008 7.094 15.927 7.094 15.927"
/>
<path
fill="#ccc"
d="M855.157 580.354a1.55 1.55 0 0 1-1.554 1.553H1.553a1.553 1.553 0 0 1 0-3.107h852.05a1.55 1.55 0 0 1 1.554 1.554"
/>
<path
fill="#3f3d56"
d="M366.498 423.566a8.51 8.51 0 0 1-8.731-8.262l-.663-23.991a8.5 8.5 0 0 1 16.994-.47l.662 23.992a8.51 8.51 0 0 1-8.262 8.731"
/>
<path
fill="#ccc"
d="M741.354 511.248q-19.368 0-42.456-1.464c-79.614-5.056-182.738-22.633-290.376-49.492-107.638-26.86-206.93-59.794-279.585-92.734C93.544 351.51 66.38 336.32 48.2 322.41c-19.247-14.727-27.666-27.564-25.024-38.153 5.148-20.629 50.731-25.142 88.064-25.295l.013 3c-51.268.21-81.514 8.387-85.166 23.022-4.651 18.64 33.287 47.74 104.087 79.841 72.496 32.868 171.606 65.74 279.074 92.557 107.467 26.816 210.4 44.363 289.84 49.408 77.578 4.928 124.743-2.938 129.394-21.578 3.862-15.477-21.598-38.276-71.69-64.198l1.38-2.664c36.396 18.835 78.645 45.851 73.221 67.588-2.642 10.59-16.105 17.965-40.015 21.923-13.63 2.256-30.37 3.387-50.025 3.387"
/>
<path
fill="#ccc"
d="M56.059 491.595c-10.247 0-16.908-2.546-19.856-7.607-5.814-9.98 3.923-27.494 28.941-52.051l2.102 2.14c-23.24 22.813-33.343 40.001-28.451 48.4 3.096 5.313 12.308 7.218 26.648 5.505 14.236-1.7 33.1-6.765 56.072-15.055 47.291-17.067 106.623-45.856 167.065-81.064 60.44-35.207 114.75-72.617 152.927-105.335 7.332-6.286 13.987-12.333 19.78-17.972a197 197 0 0 0 20.975-23.377c8.563-11.627 11.453-20.581 8.358-25.895-5.17-8.874-26.888-8.04-61.157 2.353l-.87-2.87c36.766-11.15 58.508-11.484 64.619-.992 3.797 6.518.926 16.337-8.534 29.183a200 200 0 0 1-21.3 23.748c-5.836 5.683-12.538 11.772-19.919 18.1-38.31 32.833-92.777 70.353-153.37 105.648-60.593 35.297-120.1 64.168-167.555 81.295-23.185 8.367-42.274 13.486-56.735 15.211a83 83 0 0 1-9.74.635"
/>
<path
fill="#e6e6e6"
d="M603.602 368.423c-7.415-.148-47.24-1.291-53.77-1.01-.37-1.293-12.75 14.573-13.052 14.67a1.808 1.808 0 0 0 .605 2.908c.728.443 64.932-.745 65.71-.59a1.79 1.79 0 0 0 1.593-1.038l.43-.962c.044-1.644.582-10.048.1-11.484a1.778 1.778 0 0 0-1.616-2.494"
/>
<path
d="M782.303 559.959c-.377.905-.859 2.043-2.023 2.001l-65.032.73a1.794 1.794 0 0 1-1.565-2.633Z"
opacity=".17"
style="isolation: isolate"
transform="translate(-177.185 -177.56)"
/>
<path
fill="#e6e6e6"
d="M550.135 367.218c-.7-1.21-18.086-87.238-19.537-87.957l-11.87-14.521-1.062-.798c-1.475-.81-5.014-.263-4.695 1.99 2.789 13.37 20.725 89.52 21.118 101.391l2.16 15.124a1.863 1.863 0 0 0 2.3 1.53 3.58 3.58 0 0 0 2.877-2.079c.162-.534 9.522-14.37 8.709-14.68"
/>
<path
d="m695.91 442.3 22.703 117.16c-.759 1.922-4.312 3.268-5.14.747-.014-.003-23.29-116.643-23.314-116.713-.248-2.807 4.39-2.896 5.751-1.195"
opacity=".17"
style="isolation: isolate"
transform="translate(-177.185 -177.56)"
/>
<path
fill="currentColor"
d="m519.409 269.531 11.53 16.072 12.942 61.465-6.016 5.248z"
/>
<path
fill="#2f2e41"
d="m596.159 376.71 3.19.13a12.5 12.5 0 0 1 .46-2.76c.48-2.28.91-4.99-1.08-4.98-1.35-.13-1.81 1.58-2.05 3.44a26 26 0 0 1-.52 4.17m-18.3-4.29 2.15.08 1.04.04c-.02-1.14.51-3.49-.78-4.07a1.6 1.6 0 0 0-.65-.13c-1.21-.07-1.57.85-1.68 1.91-.07.64-.04 1.32-.06 1.85 0 .11-.01.22-.02.32m-6.37-.26 2.16.09 1.03.04c-.02-1.31.67-4.17-1.43-4.21-1.94-.11-1.69 2.36-1.74 3.76 0 .11-.01.22-.02.32m-6.37-.25 2.15.08 1.04.04c-.02-1.3.67-4.16-1.43-4.2-1.94-.12-1.69 2.35-1.74 3.76 0 .11-.01.22-.02.32m-6.37-.26 2.16.09 1.03.04c-.02-1.31.67-4.16-1.43-4.21-1.94-.11-1.69 2.36-1.74 3.76 0 .11-.01.22-.02.32m-6.37-.25 2.15.08 1.04.04c-.02-1.2.56-3.71-.98-4.14h-.01a1.5 1.5 0 0 0-.44-.06 1.5 1.5 0 0 0-.54.05h-.01c-1.34.35-1.15 2.45-1.19 3.71 0 .11-.01.22-.02.32m37.35-.68 3.19.13c0-.12 0-.25.01-.4a13.3 13.3 0 0 0 .04-2.29c-.11-.84-.47-1.5-1.48-1.52-1.03-.06-1.44.6-1.6 1.45a3 3 0 0 0-.08.44v.01c-.08.78-.03 1.62-.08 2.18m-6.37-.26 3.19.13a23 23 0 0 0 .06-2.58c-.09-.88-.44-1.6-1.49-1.62-1.06-.07-1.47.65-1.63 1.54-.15.86-.07 1.89-.13 2.53"
/>
<path
fill="#2f2e41"
d="m576.989 370.21.95.04 2.24.09c-.01-.48.08-1.18.09-1.87a4 4 0 0 0-.02-.62c-.08-.93-.41-1.7-1.5-1.72-1.11-.06-1.5.71-1.64 1.65-.14.84-.06 1.81-.12 2.43m12.8 6.25 3.19.12c-.01-1.3.67-4.16-1.43-4.2-2.1-.13-1.64 2.77-1.76 4.08m-6.37-.26 3.19.13c-.01-1.31.67-4.17-1.43-4.21-2.1-.12-1.64 2.78-1.76 4.08m-6.37-.25 3.19.12c-.01-.93.34-2.65-.23-3.57a1.32 1.32 0 0 0-1.2-.63 1.4 1.4 0 0 0-.93.23c-1.02.67-.73 2.79-.83 3.85m-6.37-.26 3.19.13c-.01-.93.33-2.64-.22-3.57a1.32 1.32 0 0 0-1.21-.64 1.4 1.4 0 0 0-.93.23c-1.02.69-.73 2.8-.83 3.85m-6.37-.25 3.19.12c-.01-.93.34-2.65-.23-3.57a1.32 1.32 0 0 0-1.2-.63 1.4 1.4 0 0 0-.93.23c-1.02.67-.73 2.79-.83 3.85m-6.37-.26 3.19.13c-.01-.93.33-2.64-.22-3.57a1.31 1.31 0 0 0-1.21-.64 1.4 1.4 0 0 0-.93.23c-1.02.69-.73 2.8-.83 3.85m-6.37-.25 3.19.12c-.01-.93.33-2.64-.23-3.57a1.31 1.31 0 0 0-1.2-.63 1.4 1.4 0 0 0-.93.23c-1.02.68-.73 2.79-.83 3.85"
/>
<path
fill="#a0616a"
d="m587.595 365.686 24.313-51.42 9.193-21.45-14.448-8.227s-4.921 15.92-10.064 24.068c-5.075 8.04-18.719 52.286-19.006 53.496a7.96 7.96 0 1 0 10.012 3.533"
/>
<path
fill="currentColor"
d="m587.447 318.079 18.387 11.093 4.17-6.303 2.778-1.433 11.494-19.737 10.163-10.354 13.427-42.919-17.47 2.621-.023.008c-3.112 1.65-5.896 4.601-9.713 7.202-12.026 8.196-22.395 34.752-27.335 49.559-.081.243-.414.412-.8.578a8.65 8.65 0 0 0-5.078 9.685"
/>
</svg>
</div>
</div>
</div>
<!-- END CTA Section: Simple With Illustration -->
MarketingSectionsFAQSimple
<!-- FAQ Section: Simple -->
<div class="bg-white dark:bg-gray-950 dark:text-gray-100">
<div
class="container mx-auto flex flex-col gap-16 px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl"
>
<!-- Heading -->
<div class="text-center">
<div
class="mb-5 font-['Caveat'] text-[1.625rem] text-blue-600 dark:text-blue-400"
>
We answer
</div>
<h2 class="text-4xl font-black dark:text-white">
Frequently Asked Questions
</h2>
<p
class="mx-auto mt-4 w-full max-w-3xl text-lg/relaxed font-medium text-gray-700 dark:text-gray-300"
>
Be sure to get in touch and let us know if you have any further
questions or need any help. We are here to help you 24/7.
</p>
</div>
<!-- END Heading -->
<!-- FAQ -->
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 md:gap-12">
<div>
<h3 class="mb-2 font-semibold">What features are included?</h3>
<p class="text-sm/relaxed text-gray-600 dark:text-gray-400">
Every plan ships with the full component library, unlimited projects,
and a growing collection of page templates. You also get access to our
Figma design files and early previews of new sections as soon as they
land in development.
</p>
</div>
<div>
<h3 class="mb-2 font-semibold">Can I use PayPal to pay you?</h3>
<p class="text-sm/relaxed text-gray-600 dark:text-gray-400">
Absolutely. We accept all major credit cards through Stripe and also
support PayPal at checkout. If you need a custom payment method for a
team or agency purchase, just reach out and we will set it up for you.
</p>
</div>
<div>
<h3 class="mb-2 font-semibold">Do I get access to the community?</h3>
<p class="text-sm/relaxed text-gray-600 dark:text-gray-400">
Yes, every paid license includes an invite to our private Discord
community where you can share work, ask for feedback, and chat
directly with the team. It is the fastest way to get help and stay in
the loop on upcoming releases.
</p>
</div>
<div>
<h3 class="mb-2 font-semibold">Can I get a refund just in case?</h3>
<p class="text-sm/relaxed text-gray-600 dark:text-gray-400">
We offer a no-questions-asked refund within 14 days of purchase. If
the library is not the right fit for your project, send us an email
and we will process the full refund within a couple of business days.
</p>
</div>
<div>
<h3 class="mb-2 font-semibold">Do you offer email support?</h3>
<p class="text-sm/relaxed text-gray-600 dark:text-gray-400">
Yes, email support is included with every license and we typically
reply within one business day. Team plans also get priority responses
and the option to schedule a short call for tricky integration
questions.
</p>
</div>
<div>
<h3 class="mb-2 font-semibold">Are the updates free for life?</h3>
<p class="text-sm/relaxed text-gray-600 dark:text-gray-400">
Lifetime licenses get every future update at no extra cost, including
new components, templates, and framework support. Annual plans receive
updates for the duration of your subscription and can renew anytime to
keep that stream going.
</p>
</div>
<div>
<h3 class="mb-2 font-semibold">Which frameworks are supported?</h3>
<p class="text-sm/relaxed text-gray-600 dark:text-gray-400">
Every component ships in plain HTML, Vue, React, and Alpine.js so you
can drop them into whatever stack you are already using. We keep the
markup framework agnostic, which makes it easy to adapt the code for
Svelte, Angular, or your own custom setup.
</p>
</div>
<div>
<h3 class="mb-2 font-semibold">Can I use it on client projects?</h3>
<p class="text-sm/relaxed text-gray-600 dark:text-gray-400">
Yes, all paid licenses let you build unlimited client projects and
commercial products with no royalties attached. The only thing you
cannot do is resell the components as a standalone library or
template marketplace item.
</p>
</div>
</div>
<!-- END FAQ -->
<!-- Link -->
<div class="text-center">
<a
href="javascript:void(0)"
class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3.5 py-2.5 text-sm/6 font-semibold text-gray-800 hover:border-gray-300 hover:text-gray-900 hover:shadow-xs focus:ring-3 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>Go to support center</span>
<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>
</a>
</div>
<!-- END Link -->
</div>
</div>
<!-- END FAQ Section: Simple -->
MarketingSectionsFeaturesBoxes with Icons
<!-- Features Section: Boxes with Icons -->
<div class="relative bg-white dark:bg-gray-950 dark:text-gray-100">
<div
class="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] mask-[radial-gradient(ellipse_50%_50%_at_50%_50%,#000_60%,transparent_100%)] bg-size-[24px_24px]"
></div>
<div
class="relative container mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl"
>
<div
class="grid grid-cols-1 gap-1 rounded-[1.25rem] bg-gray-50/75 p-1.5 sm:grid-cols-2 lg:grid-cols-3 dark:bg-gray-900/50"
>
<div
class="rounded-2xl border border-gray-200/80 bg-white p-6 shadow-xs lg:p-8 xl:p-10 dark:border-gray-800/75 dark:bg-gray-950"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
aria-hidden="true"
class="hi-outline hi-rectangle-stack mb-5 inline-block size-9 text-gray-700 dark:text-gray-400"
>
<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>
<h2 class="text-lg font-bold">1. UI components library</h2>
<p
class="mt-2.5 text-sm/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-2xl border border-gray-200/80 bg-white p-6 shadow-xs lg:p-8 xl:p-10 dark:border-gray-800/75 dark:bg-gray-950"
>
<svg
class="hi-outline hi-cube mb-5 inline-block size-9 text-gray-700 dark:text-gray-400"
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>
<h2 class="text-lg font-bold">2. Self-hosted web app</h2>
<p
class="mt-2.5 text-sm/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-2xl border border-gray-200/80 bg-white p-6 shadow-xs sm:col-span-2 lg:col-span-1 lg:p-8 xl:p-10 dark:border-gray-800/75 dark:bg-gray-950"
>
<svg
class="hi-outline hi-cog mb-5 inline-block size-9 text-gray-700 dark:text-gray-400"
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>
<h2 class="text-lg font-bold">3. Helper tools</h2>
<p
class="mt-2.5 text-sm/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-gray-50 dark:bg-gray-950 dark:text-gray-100">
<div class="container mx-auto px-4 py-16 lg:px-8 xl:max-w-7xl">
<div class="grid grid-cols-1 text-center sm:grid-cols-2 lg:grid-cols-4">
<div class="flex h-16 items-center justify-center">
<a
href="javascript:void(0)"
class="group inline-flex items-center gap-2 text-lg font-semibold opacity-75 transition-transform ease-out hover:opacity-100 active:scale-97"
>
<svg
class="hi-solid hi-cube inline-block size-6 text-gray-600 group-hover:text-indigo-600 dark:text-gray-500 dark:group-hover: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>
</a>
</div>
<div class="flex h-16 items-center justify-center">
<a
href="javascript:void(0)"
class="group inline-flex items-center gap-2 text-lg font-semibold opacity-75 transition-transform ease-out hover:opacity-100 active:scale-97"
>
<svg
class="hi-solid hi-code-bracket-square inline-block size-6 text-gray-600 group-hover:text-purple-600 dark:text-gray-500 dark:group-hover: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>
</a>
</div>
<div class="flex h-16 items-center justify-center">
<a
href="javascript:void(0)"
class="group inline-flex items-center gap-2 text-lg font-semibold opacity-75 transition-transform ease-out hover:opacity-100 active:scale-97"
>
<svg
class="hi-solid hi-cursor-arrow-rays inline-block size-6 text-gray-600 group-hover:text-rose-600 dark:text-gray-500 dark:group-hover: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>
</a>
</div>
<div class="flex h-16 items-center justify-center">
<a
href="javascript:void(0)"
class="group inline-flex items-center gap-2 text-lg font-semibold opacity-75 transition-transform ease-out hover:opacity-100 active:scale-97"
>
<svg
class="hi-solid hi-map-pin inline-block size-6 text-gray-600 group-hover:text-teal-600 dark:text-gray-500 dark:group-hover: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>
</a>
</div>
</div>
</div>
</div>
<!-- END Logos Section: Plain -->
MarketingSectionsStatisticsWith Details
<!-- Statistics Section: With Details -->
<div class="bg-white dark:bg-gray-950 dark:text-gray-100">
<div
class="container mx-auto flex flex-col gap-10 px-4 py-16 lg:flex-row lg:items-center lg:justify-between lg:gap-24 lg:px-8 lg:py-32 xl:max-w-7xl"
>
<!-- Heading -->
<div class="text-center lg:text-left">
<div
class="mb-5 font-['Caveat'] text-[1.625rem] text-blue-600 dark:text-blue-400"
>
Amazing Results
</div>
<h2 class="text-4xl font-black dark:text-white">Join us today</h2>
<p
class="mx-auto mt-4 w-full max-w-3xl text-lg/relaxed font-medium text-gray-700 dark:text-gray-300"
>
Web developers from all over the world are using our products. Join them
and build something amazing!
</p>
</div>
<!-- END Heading -->
<!-- Stats -->
<div
class="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-12 lg:w-3/5 lg:flex-none"
>
<div class="py-5">
<svg
class="hi-outline hi-server-stack mb-5 inline-block size-9 text-blue-600 dark:text-blue-400"
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="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z"
/>
</svg>
<dl class="space-y-2">
<dt class="text-3xl font-bold text-black dark:text-white">280</dt>
<dd
class="text-sm/relaxed font-medium text-gray-600 dark:text-gray-400"
>
<strong>Servers</strong> are offering super fast speed and hosting
the most demanding web apps.
</dd>
</dl>
</div>
<div class="py-5">
<svg
class="hi-outline hi-briefcase mb-5 inline-block size-9 text-blue-600 dark:text-blue-400"
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="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008z"
/>
</svg>
<dl class="space-y-2">
<dt class="text-3xl font-bold text-black dark:text-white">3,500+</dt>
<dd
class="text-sm/relaxed font-medium text-gray-600 dark:text-gray-400"
>
<strong>Web apps</strong> are created each week and run seamlessly
without any issues.
</dd>
</dl>
</div>
<div class="py-5">
<svg
class="hi-outline hi-building-office-2 mb-5 inline-block size-9 text-blue-600 dark:text-blue-400"
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="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z"
/>
</svg>
<dl class="space-y-2">
<dt class="text-3xl font-bold text-black dark:text-white">15k+</dt>
<dd
class="text-sm/relaxed font-medium text-gray-600 dark:text-gray-400"
>
<strong>Companies</strong> are already using our premium services to
bring their ideas to life.
</dd>
</dl>
</div>
<div class="py-5">
<svg
class="hi-outline hi-user-group mb-5 inline-block size-9 text-blue-600 dark:text-blue-400"
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="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"
/>
</svg>
<dl class="space-y-2">
<dt class="text-3xl font-bold text-black dark:text-white">360</dt>
<dd
class="text-sm/relaxed font-medium text-gray-600 dark:text-gray-400"
>
<strong>Accounts</strong> were created today. Create your own today
and build something amazing.
</dd>
</dl>
</div>
</div>
<!-- END Stats -->
</div>
</div>
<!-- END Statistics Section: With Details -->
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 tracking-wider text-blue-600 uppercase 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>
<p
class="mx-auto text-xl leading-relaxed font-medium text-gray-700 lg:w-2/3 dark:text-gray-300"
>
They are working nonstop behind the scenes to help you build better
products, web services and websites.
</p>
</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>
<h3 class="mb-0.5 text-xl font-bold">Irma Norton</h3>
<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>
<h3 class="mb-0.5 text-xl font-bold">Alejandro Lee</h3>
<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>
<h3 class="mb-0.5 text-xl font-bold">Elsa King</h3>
<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>
<h3 class="mb-0.5 text-xl font-bold">Alex Saunders</h3>
<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>
<h3 class="mb-0.5 text-xl font-bold">Herman Reese</h3>
<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>
<h3 class="mb-0.5 text-xl font-bold">Sue Keller</h3>
<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 top-0 right-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 leading-8 font-semibold">
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-xs 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 -->
MarketingSectionsTestimonialsLarge Photo
<!-- Testimonials Section: Large Photo -->
<div class="overflow-hidden bg-blue-800">
<div class="container mx-auto px-4 py-16 lg:px-8 lg:py-32 xl:max-w-7xl">
<div class="flex flex-col items-center gap-16 md:flex-row">
<div class="max-auto relative w-2/3 p-6 md:w-1/4">
<div
class="absolute inset-0 m-6 -rotate-6 rounded-lg bg-white/10 shadow-lg"
></div>
<img
src="https://cdn.tailkit.com/media/placeholders/avatar-iFgRcqHznqg-600x800.jpg"
class="relative rounded-lg"
alt="User Photo"
/>
</div>
<div class="relative md:w-3/4">
<div
class="absolute top-0 right-0 -mt-5 font-serif text-9xl text-white/20 opacity-75 sm:-mt-10"
>
“
</div>
<div class="mb-3">
<div
class="inline-flex items-center rounded-lg bg-black/20 px-2 py-1 text-yellow-400"
>
<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>
<p class="mb-5 text-lg leading-8 font-medium text-white">
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>
<a
href="javascript:void(0)"
class="text-lg font-semibold text-white/90 hover:text-white/75"
>
John Smith
</a>
<p class="text-sm font-medium text-white/50">CEO and Founder</p>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
<!-- END Testimonials Section: Large Photo -->
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-xs 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">
<div
class="mb-1 text-sm font-bold tracking-wider text-blue-600 uppercase dark:text-blue-400"
>
Checkout
</div>
<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 leading-6 font-semibold text-white hover:border-gray-600 hover:bg-gray-600 hover:text-white focus:ring-3 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-sm 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-sm 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-sm 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-3 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-3 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-sm 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="inline-block 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-3 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="inline-block 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-3 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="inline-block 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-3 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="inline-block 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-3 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-sm 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 leading-6 font-semibold text-white hover:border-blue-600 hover:bg-blue-600 hover:text-white focus:ring-3 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 tracking-wide uppercase 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 tracking-wide uppercase 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 tracking-wide uppercase 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 tracking-wide uppercase 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 tracking-wide uppercase 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 tracking-wide uppercase 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 -->
Did you like them?
2,000+ handcrafted snippets.
Now in your AI editor.
Build modern web apps and websites with Tailkit's huge collection of Tailwind components, templates and tools. Now available through our MCP Server.