v5.0 launch sale - limited time offer!
Come back tomorrow for a new one!
Your free Tailwind CSS component of the day is here.
Every day we're giving away a free premium Tailwind CSS component from the Tailkit library. Perfect for learning, prototyping, or adding that special touch to your project. Grab one of the available Starter Kits and give them a go. Want more? Get access now!
Next Tailwind component unlocks in:
00
Hours
00
Minutes
00
Seconds
MarketingSectionsHeroGradient Box and Lines
<!-- Hero Section: Gradient Box and Lines -->
<div
class="relative overflow-hidden bg-white dark:bg-gray-950 dark:text-gray-100"
>
<!-- Main Header -->
<header
id="page-header"
class="relative flex flex-none items-center border-b border-dashed border-gray-200 bg-gray-50 py-8 dark:border-gray-700/50 dark:bg-gray-900/50"
>
<!-- Main Header Content -->
<div
class="container mx-auto -my-8 flex flex-col gap-4 border-dashed border-gray-200 bg-white/50 px-4 py-8 text-center sm:border-x md:flex-row md:items-center md:justify-between md:gap-0 lg:px-8 xl:max-w-7xl dark:border-gray-700/50 dark:bg-gray-950/25"
>
<div class="flex items-center justify-center">
<a
href="javascript:void(0)"
class="group inline-flex items-center gap-2 text-lg font-extrabold text-gray-900 active:opacity-75 dark:text-gray-100"
>
<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"
class="lucide lucide-circle-dot-dashed inline-block size-6 text-blue-700 transition-transform duration-150 ease-out group-hover:scale-110 group-active:scale-100 dark:text-blue-300"
>
<path d="M10.1 2.18a9.93 9.93 0 0 1 3.8 0" />
<path d="M17.6 3.71a9.95 9.95 0 0 1 2.69 2.7" />
<path d="M21.82 10.1a9.93 9.93 0 0 1 0 3.8" />
<path d="M20.29 17.6a9.95 9.95 0 0 1-2.7 2.69" />
<path d="M13.9 21.82a9.94 9.94 0 0 1-3.8 0" />
<path d="M6.4 20.29a9.95 9.95 0 0 1-2.69-2.7" />
<path d="M2.18 13.9a9.93 9.93 0 0 1 0-3.8" />
<path d="M3.71 6.4a9.95 9.95 0 0 1 2.7-2.69" />
<circle cx="12" cy="12" r="1" />
</svg>
<span class="group-hover:opacity-90">Flox</span>
</a>
</div>
<div class="flex items-center justify-center text-center">
<nav class="flex items-center gap-3 md:gap-6">
<a
href="javascript:void(0)"
class="group relative text-sm font-semibold text-gray-900 hover:text-black dark:text-gray-100 dark:hover:text-white"
>
<span
class="absolute -inset-x-2.5 -inset-y-1.5 scale-0 rounded-xl bg-gray-100 transition ease-out group-hover:scale-100 dark:bg-gray-700/50"
aria-hidden="true"
></span>
<span class="relative">Solutions</span>
</a>
<a
href="javascript:void(0)"
class="group relative text-sm font-semibold text-gray-900 hover:text-black dark:text-gray-100 dark:hover:text-white"
>
<span
class="absolute -inset-x-2.5 -inset-y-1.5 scale-0 rounded-xl bg-gray-100 transition ease-out group-hover:scale-100 dark:bg-gray-700/50"
aria-hidden="true"
></span>
<span class="relative">Pricing</span>
</a>
</nav>
<div
class="mx-4 h-8 w-px bg-linear-to-b from-transparent via-gray-300 to-transparent md:mx-6 dark:via-gray-700"
></div>
<div class="flex items-center justify-center gap-2">
<a
href="javascript:void(0)"
class="group relative flex items-center gap-2 text-sm font-semibold text-gray-900 hover:text-black dark:text-gray-100 dark:hover:text-white"
>
<span
class="absolute -inset-x-2.5 -inset-y-1.5 scale-0 rounded-xl bg-gray-100 transition ease-out group-hover:scale-100 dark:bg-gray-700/50"
aria-hidden="true"
></span>
<span class="relative">Sign In</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-arrow-right-end-on-rectangle relative inline-block size-5 opacity-50 group-hover:opacity-100"
>
<path
fill-rule="evenodd"
d="M17 4.25A2.25 2.25 0 0 0 14.75 2h-5.5A2.25 2.25 0 0 0 7 4.25v2a.75.75 0 0 0 1.5 0v-2a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-.75.75h-5.5a.75.75 0 0 1-.75-.75v-2a.75.75 0 0 0-1.5 0v2A2.25 2.25 0 0 0 9.25 18h5.5A2.25 2.25 0 0 0 17 15.75V4.25Z"
clip-rule="evenodd"
/>
<path
fill-rule="evenodd"
d="M1 10a.75.75 0 0 1 .75-.75h9.546l-1.048-.943a.75.75 0 1 1 1.004-1.114l2.5 2.25a.75.75 0 0 1 0 1.114l-2.5 2.25a.75.75 0 1 1-1.004-1.114l1.048-.943H1.75A.75.75 0 0 1 1 10Z"
clip-rule="evenodd"
/>
</svg>
</a>
</div>
</div>
</div>
<!-- END Main Header Content -->
</header>
<!-- END Main Header -->
<!-- Hero Content -->
<div
class="relative container mx-auto border-dashed border-gray-200 px-4 py-16 sm:border-x lg:px-8 lg:py-32 xl:max-w-7xl dark:border-gray-700/50"
>
<!-- Line details left -->
<div class="absolute -top-1 -left-1" aria-hidden="true">
<div
class="size-2 rotate-45 border border-gray-200 bg-white transition ease-out hover:border-blue-500 dark:border-gray-700/50 dark:bg-gray-950"
></div>
</div>
<!-- END Line detail left -->
<!-- Line detail right -->
<div class="absolute -top-1 -right-1" aria-hidden="true">
<div
class="size-2 rotate-45 border border-gray-200 bg-white transition ease-out hover:border-blue-500 dark:border-gray-700/50 dark:bg-gray-950"
></div>
</div>
<!-- END Line detail right -->
<!-- Gradient Box Overlay -->
<div
class="absolute inset-2 rounded-xl bg-linear-to-tr from-orange-600/10 via-indigo-600/10 to-sky-600/10 opacity-75 dark:from-orange-600/15 dark:via-indigo-600/10 dark:to-sky-600/15"
aria-hidden="true"
></div>
<!-- END Gradient Box Overlay -->
<div class="relative text-center">
<div
class="mb-5 inline-flex items-center gap-2 rounded-full bg-gray-300/50 py-1.5 pr-3 pl-1.5 text-sm font-medium text-gray-800 dark:bg-gray-800 dark:text-gray-200"
>
<span
class="inline-flex items-center justify-center rounded-full bg-blue-700 px-2 py-1.5 text-xs leading-none font-medium text-white"
>
New in v2.1
</span>
<span>AI prospecting is here!</span>
</div>
<div>
<h1
class="mx-auto mb-4 max-w-4xl text-4xl font-black text-black lg:text-6xl dark:text-white"
>
Grow your business with AI-powered lead discovery.
</h1>
<p
class="mx-auto max-w-3xl text-lg/relaxed font-medium text-gray-700 lg:text-xl/relaxed dark:text-gray-400"
>
The intelligent lead generation platform that scours the web to find
your ideal customers. No manual research required, just pure sales
acceleration.
</p>
</div>
<hr
class="my-8 h-px w-full border-none bg-linear-to-r from-transparent via-gray-300/75 to-transparent dark:via-gray-700/75"
/>
<div class="flex flex-col items-center justify-center gap-3">
<div class="relative">
<div
class="pointer-events-none absolute -inset-x-12 -inset-y-7 rounded-3xl bg-linear-to-b from-amber-500 via-rose-500 to-indigo-500 opacity-20 blur-2xl dark:from-amber-300 dark:via-rose-300 dark:to-indigo-300"
></div>
<a
href="javascript:void(0)"
class="group relative inline-flex items-center justify-center gap-2 rounded-full border border-gray-800 bg-gray-800 px-7 py-5 leading-5 font-semibold text-white hover:border-gray-700 hover:bg-gray-700 hover:text-white focus:ring-3 focus:ring-gray-400/50 active:border-gray-700 active:bg-gray-800 dark:border-white dark:bg-white dark:text-gray-900 dark:hover:border-gray-200 dark:hover:bg-gray-200 dark:hover:text-gray-950 dark:focus:ring-gray-500/90 dark:active:border-white dark:active:bg-white"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-magnifying-glass inline-block size-5 opacity-50 group-hover:opacity-100"
>
<path
fill-rule="evenodd"
d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"
clip-rule="evenodd"
/>
</svg>
<span>Start finding leads</span>
</a>
</div>
<div
class="mt-2 text-center text-sm font-medium text-gray-500 dark:text-gray-400"
>
Free 7-day trial · No credit card required
</div>
</div>
</div>
</div>
<!-- END Hero Content -->
</div>
<!-- END Hero Section: Gradient Box and Lines -->
Did you like it?
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.