hero1
FREE
Transform your business with our landing page blocks
Wicked Blocks offers a wide array of both free and premium components specifically designed for Tailwind CSS. Our extensive collection features meticulously crafted Tailwind blocks that cater to various design needs and preferences.
<section class="py-32">
<div class="container">
<div class="grid items-center gap-8 lg:grid-cols-2">
<div class="flex flex-col items-center text-center lg:items-start lg:text-left">
<div
class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground">
New Release<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-arrow-down-right ml-2 size-4">
<path d="m7 7 10 10"></path>
<path d="M17 7v10H7"></path>
</svg>
</div>
<h1 class="my-6 text-pretty text-4xl font-bold lg:text-6xl">Welcome to Our Website</h1>
<p class="mb-8 max-w-xl text-zinc-600 lg:text-xl">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Elig doloremque mollitia fugiat
omnis! Porro facilis quo animi consequatur. Explicabo.
</p>
<div class="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">
<button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-zinc-900 text-white hover:bg-zinc-900/90 h-10 px-4 py-2 w-full sm:w-auto">
Primary Button</button><button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-white hover:bg-zinc-100 hover:text-zinc-800 h-10 px-4 py-2 w-full sm:w-auto">
Secondary Button<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-arrow-down-right ml-2 size-4">
<path d="m7 7 10 10"></path>
<path d="M17 7v10H7"></path>
</svg>
</button>
</div>
</div>
<img src="/images/placeholders/minima/placeholder-1.jpg" alt="placeholder hero"
class="max-h-96 w-full rounded-md object-cover" />
</div>
</div>
</section>hero2
FREE
Transform your business with our landing page blocks
Wicked Blocks offers a wide array of both free and premium components specifically designed for Tailwind CSS. Our extensive collection features meticulously crafted Tailwind blocks that cater to various design needs and preferences.
By subscribing, you agree with Wickedblocks Terms of Service and Privacy Policy.
The best front end teams use Wickedtemplates to state their presence.
Our customers ยป
<section class="py-32">
<div class="grid items-center gap-10 lg:grid-cols-2 lg:gap-20">
<div class="flex justify-end bg-zinc-100">
<img src="/images/placeholders/minima/placeholder-1.jpg" alt="placeholder hero"
class="max-h-[600px] w-full rounded-md object-cover lg:max-h-[800px]" />
</div>
<div class="flex flex-col items-center text-center lg:max-w-3xl lg:items-start lg:text-left">
<div
class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80">
New Release<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-arrow-down-right ml-2 size-4">
<path d="m7 7 10 10"></path>
<path d="M17 7v10H7"></path>
</svg>
</div>
<h1 class="my-6 text-pretty text-4xl font-bold lg:text-6xl xl:text-7xl">
Blocks built with Wickedblocks & Tailwind
</h1>
<p class="mb-8 max-w-xl text-zinc-600 lg:text-2xl">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Elig doloremque mollitia fugiat
omnis! Porro facilis quo animi consequatur. Explicabo.
</p>
<div class="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">
<button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-zinc-900 text-white hover:bg-zinc-900/90 h-10 px-4 py-2 w-full sm:w-auto">
Primary Button</button><button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-white hover:bg-zinc-100 hover:text-zinc-800 h-10 px-4 py-2 w-full sm:w-auto">
Secondary Button<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-arrow-down-right ml-2 size-4">
<path d="m7 7 10 10"></path>
<path d="M17 7v10H7"></path>
</svg>
</button>
</div>
</div>
</div>
</section>hero3
FREE
Transform your business
Wicked Blocks offers a wide array of both free and premium components specifically designed for Tailwind CSS.
By subscribing, you agree with Wickedblocks Terms of Service and Privacy Policy.
<section class="py-32">
<div class="container">
<div class="grid lg:grid-cols-2 gap-8 items-center bg-white">
<div class="flex items-center justify-center h-[400px] bg-zinc-100">
<img src="/images/placeholders/minima/placeholder-1.svg" width="100" height="100" alt="Placeholder image">
</div>
<div class="flex flex-col items-center lg:items-start justify-center">
<h1 class="text-5xl font-semibold text-center lg:text-left mb-6">Medium length display headline</h1>
<p class="text-center lg:text-left text-zinc-600 mb-8 max-w-xl">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Suspendisse varius enim in eros elementum tristique. Vivamus lacinia odio vitae vestibulum
vestibulum.</p>
<div class="flex space-x-4 mb-8 lg:justify-start">
<button class="bg-black text-white py-2 px-4 rounded">Primary Button</button>
<button class="bg-white border border-zinc-300 text-black py-2 px-4 rounded">Secondary Button</button>
</div>
</div>
</div>
</div>
</section>hero4
FREE
Transform your business with our landing page blocks
Wicked Blocks offers a wide array of both free and premium components specifically designed for Tailwind CSS. Our extensive collection features meticulously crafted Tailwind blocks that cater to various design needs and preferences.
Read more about the offer<section class="py-32">
<div class="container">
<div class="flex flex-col items-center justify-center bg-white">
<h1 class="text-5xl font-semibold text-center lg:text-left mb-6">Medium length display headline</h1>
<p class="text-center lg:text-center text-zinc-600 mb-8 max-w-xl">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Suspendisse varius enim in eros elementum tristique. Vivamus lacinia odio vitae vestibulum
vestibulum.</p>
<div class="flex space-x-4 lg:justify-start">
<button class="bg-black text-white py-2 px-4 rounded">Primary Button</button>
<button class="bg-white border border-zinc-300 text-black py-2 px-4 rounded">Secondary Button</button>
</div>
</div>
</div>
</section>hero5
FREE
Transform your business with our landing page blocks
Wicked Blocks offers a wide array of both free and premium components specifically designed for Tailwind CSS. Our extensive collection features meticulously crafted Tailwind blocks that cater to various design needs and preferences.
<section class="py-32">
<div class="container">
<div class="grid items-center gap-8 lg:grid-cols-2">
<div class="flex flex-col items-center text-center lg:items-start lg:text-left">
<div
class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground">
New Release<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-arrow-down-right ml-2 size-4">
<path d="m7 7 10 10"></path>
<path d="M17 7v10H7"></path>
</svg>
</div>
<h1 class="my-6 text-pretty text-3xl font-semibold lg:text-5xl">A Universal Hero Section</h1>
<p class="mb-8 max-w-xl text-zinc-600 lg:text-lg">
Universal design in UI aims to create interfaces that are accessible and usable for users of all abilities. It
involves designing with flexibility, providing alternative input methods, and ensuring compatibility with
assistive technologies.
</p>
<div class="flex w-full flex-col justify-center gap-2 sm:flex-row lg:justify-start">
<button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-zinc-900 text-white hover:bg-zinc-900/90 h-10 px-4 py-2 w-full sm:w-auto">
Get Started</button><button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-zinc-200 hover:bg-zinc-100 hover:text-zinc-800 h-10 px-4 py-2 w-full sm:w-auto">
Read The Docs<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-arrow-down-right ml-2 size-4">
<path d="m7 7 10 10"></path>
<path d="M17 7v10H7"></path>
</svg>
</button>
</div>
</div>
<img src="/images/placeholders/minima/placeholder-1.jpg" alt="placeholder hero"
class="max-h-96 w-full rounded-md object-cover" />
</div>
</div>
</section>hero6
FREE
Transform your business with our landing page blocks
<section class="py-32">
<div class="container">
<div class="mx-auto flex max-w-5xl flex-col items-center">
<div class="z-10 flex flex-col items-center gap-8 text-center">
<div class="max-w-screen-md">
<h1 class="mb-4 text-pretty text-4xl font-semibold lg:text-6xl">
Build your next project with Blocks
</h1>
<p class="text-zinc-600 lg:text-xl">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Elig doloremque mollitia fugiat
omnis! Porro facilis quo animi consequatur. Explicabo.
</p>
</div>
<div class="flex w-full flex-col justify-center gap-2 sm:flex-row">
<button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-zinc-900 text-white hover:bg-zinc-900/90 h-10 px-4 py-2">
Get started now<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chevron-right ml-2 h-4">
<path d="m9 18 6-6-6-6"></path>
</svg></button><button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-zinc-100 hover:text-zinc-800 h-10 px-4 py-2">
Learn more<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chevron-right ml-2 h-4">
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="mx-auto mt-20 max-w-7xl grid-cols-5 md:grid">
<img src="/images/placeholders/minima/placeholder-1.jpg" alt="placeholder"
class="col-span-3 h-full max-h-[500px] w-full object-cover" />
<div class="relative col-span-2">
<img src="/images/placeholders/minima/placeholder-2.jpg" alt="placeholder"
class="h-full max-h-[500px] w-full border-t object-cover md:border-l lg:border-t-0" /><button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-white hover:bg-zinc-100 hover:text-zinc-800 h-10 px-4 py-2 absolute bottom-5 right-5">
Learn more<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chevron-right ml-2 h-4">
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
</div>
</div>
<div class="mx-auto mt-12 flex max-w-7xl flex-wrap items-center justify-between gap-6">
<img src="/images/placeholders/logos/figma.svg" alt="logo" class="h-6 sm:h-6" /><img
src="/images/placeholders/logos/nextjs.svg" alt="logo" class="h-8 sm:h-10" /><img
src="/images/placeholders/logos/tailwind.svg" alt="logo" class="h-4 sm:h-6" /><img
src="/images/placeholders/logos/vercel.svg" alt="logo" class="h-8 sm:h-10" />
</div>
</div>
</section>hero7
FREE
Transform your business with our landing page blocks
Wicked Blocks offers a wide array of both free and premium components specifically designed for Tailwind CSS.
<section class="py-32">
<div class="container text-center">
<div class="mx-auto flex max-w-screen-lg flex-col gap-6">
<h1 class="text-3xl font-extrabold lg:text-6xl">
A Collection of Components Built With Wickedblocks & Tailwind
</h1>
<p class="text-balance text-zinc-600 lg:text-lg">
Finely crafted components built with React, Tailwind and Wickedblocks UI. Developers can copy and
paste these blocks directly into their project.
</p>
</div>
<button
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-zinc-900 text-white hover:bg-zinc-900/90 h-11 rounded-md px-8 mt-10">
Discover all components
</button>
<div class="mx-auto mt-10 flex w-fit flex-col items-center gap-4 sm:flex-row">
<span class="mx-4 inline-flex items-center -space-x-4"><span
class="relative flex shrink-0 overflow-hidden rounded-full size-14 border"></span><span
class="relative flex shrink-0 overflow-hidden rounded-full size-14 border"></span><span
class="relative flex shrink-0 overflow-hidden rounded-full size-14 border"></span><span
class="relative flex shrink-0 overflow-hidden rounded-full size-14 border"></span><span
class="relative flex shrink-0 overflow-hidden rounded-full size-14 border"></span></span>
<div>
<div class="flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star size-5 fill-yellow-400 text-yellow-400">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star size-5 fill-yellow-400 text-yellow-400">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star size-5 fill-yellow-400 text-yellow-400">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star size-5 fill-yellow-400 text-yellow-400">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-star size-5 fill-yellow-400 text-yellow-400">
<polygon
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2">
</polygon>
</svg><span class="font-semibold">5.0</span>
</div>
<p class="text-left font-medium text-zinc-600">from 200+ reviews</p>
</div>
</div>
</div>
</section>hero8
FREE
Transform your business with our landing page blocks
By subscribing, you agree with Wickedblocks Terms of Service and Privacy Policy.
<section class="py-32">
<div class="overflow-hidden border-b border-muted">
<div class="container">
<div class="mx-auto flex max-w-5xl flex-col items-center">
<div class="z-10 items-center text-center">
<h1 class="mb-8 text-pretty text-4xl font-medium lg:text-8xl">
Build your next project with Blocks
</h1>
<p class="mx-auto max-w-screen-md text-zinc-600 lg:text-xl">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Elig doloremque mollitia fugiat
omnis! Porro facilis quo animi consequatur. Explicabo.
</p>
<div class="mt-12 flex w-full flex-col justify-center gap-2 sm:flex-row">
<button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-zinc-900 text-white hover:bg-zinc-900/90 h-10 px-4 py-2">
Get started now<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chevron-right ml-2 h-4">
<path d="m9 18 6-6-6-6"></path>
</svg></button><button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-zinc-100 hover:text-zinc-800 h-10 px-4 py-2">
Learn more<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chevron-right ml-2 h-4">
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
</div>
</div>
</div>
<img src="/images/placeholders/minima/placeholder-wide-1.jpg" alt="placeholder"
class="mx-auto mt-24 max-h-[700px] w-full max-w-7xl rounded-t-lg object-cover shadow-lg" />
</div>
</div>
</section>hero9
FREE
Your tagline
Medium length display headline.
Free and Premium themes, UI Kit's, templates and landing pages built with Tailwind CSS, HTML & Next.js.
<section class="relative py-32">
<div
class="pointer-events-none absolute inset-x-0 -bottom-20 -top-20 bg-[radial-gradient(ellipse_60%_60%_at_65%_50%,hsl(var(--accent))_0%,transparent_80%)]">
</div>
<div
class="pointer-events-none absolute inset-x-0 -bottom-20 -top-20 bg-[radial-gradient(hsl(var(--accent-foreground)/0.1)_1px,transparent_1px)] [background-size:8px_8px] [mask-image:radial-gradient(ellipse_60%_60%_at_65%_50%,#000_0%,transparent_80%)]">
</div>
<div class="container relative">
<div class="flex flex-col items-start text-left">
<div
class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground">
New Release
</div>
<h1 class="my-6 text-pretty text-4xl font-bold lg:text-6xl">Welcome to Our Website</h1>
<p class="mb-8 max-w-3xl text-zinc-600 lg:text-xl">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Elig doloremque mollitia fugiat
omnis! Porro facilis quo animi consequatur. Explicabo.
</p>
<div class="flex w-full flex-col justify-start gap-2 sm:flex-row">
<button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-zinc-900 text-white hover:bg-zinc-900/90 h-10 px-4 py-2 w-full sm:w-auto">
Primary<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chevron-right ml-2 size-4">
<path d="m9 18 6-6-6-6"></path>
</svg></button><button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-white hover:bg-zinc-100 hover:text-zinc-800 h-10 px-4 py-2 w-full sm:w-auto">
Secondary
</button>
</div>
</div>
<div class="relative mt-12 grid grid-cols-12 md:gap-12">
<div class="col-span-12 md:col-span-10">
<div class="aspect-video overflow-clip rounded-lg border border-border bg-white shadow-md"></div>
</div>
<div class="absolute inset-0">
<div class="grid h-full grid-cols-12 md:gap-12">
<div
class="col-span-10 col-start-2 -mt-6 grid tranzinc-y-0 items-start justify-center sm:tranzinc-y-0 sm:items-center md:col-span-6 md:col-end-12 lg:-mt-12 lg:items-start">
<div class="absolute h-[140px] w-full rounded-lg bg-zinc-900 p-4 shadow-lg">
<pre
class="font-mono text-xs leading-normal text-accent [mask-image:linear-gradient(to_right,#000_80%,transparent_100%)]"><code>curl 'https://api.example.com/v1/endpoint' \
-X POST \
-u username:password \
-d param_1=1001 \
-d param_3=true \
-d param_2="Donec quis lorem ligula."</code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</section>hero10
FREE
Your tagline
Medium length display headline.
Free and Premium themes, UI Kit's, templates and landing pages built with Tailwind CSS, HTML & Next.js.
By subscribing, you agree with Wickedblocks Terms of Service and Privacy Policy.
<section class="relative overflow-hidden py-32">
<div class="container">
<div class="mx-auto flex max-w-5xl flex-col items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080" fill="none"
class="absolute hidden opacity-25 [mask-image:linear-gradient(to_right,white,transparent,transparent,white)] lg:block">
<g clip-path="url(#clip0_4_5)">
<rect width="1920" height="1080"></rect>
<line y1="49.5" x2="1920" y2="49.5" class="stroke-muted-foreground"></line>
<line y1="99.5" x2="1920" y2="99.5" class="stroke-muted-foreground"></line>
<line y1="149.5" x2="1920" y2="149.5" class="stroke-muted-foreground"></line>
<line y1="199.5" x2="1920" y2="199.5" class="stroke-muted-foreground"></line>
<line y1="249.5" x2="1920" y2="249.5" class="stroke-muted-foreground"></line>
<line y1="299.5" x2="1920" y2="299.5" class="stroke-muted-foreground"></line>
<line y1="349.5" x2="1920" y2="349.5" class="stroke-muted-foreground"></line>
<line y1="399.5" x2="1920" y2="399.5" class="stroke-muted-foreground"></line>
<line y1="449.5" x2="1920" y2="449.5" class="stroke-muted-foreground"></line>
<line y1="499.5" x2="1920" y2="499.5" class="stroke-muted-foreground"></line>
<line y1="549.5" x2="1920" y2="549.5" class="stroke-muted-foreground"></line>
<line y1="599.5" x2="1920" y2="599.5" class="stroke-muted-foreground"></line>
<line y1="649.5" x2="1920" y2="649.5" class="stroke-muted-foreground"></line>
<line y1="699.5" x2="1920" y2="699.5" class="stroke-muted-foreground"></line>
<line y1="749.5" x2="1920" y2="749.5" class="stroke-muted-foreground"></line>
<line y1="799.5" x2="1920" y2="799.5" class="stroke-muted-foreground"></line>
<line y1="849.5" x2="1920" y2="849.5" class="stroke-muted-foreground"></line>
<line y1="899.5" x2="1920" y2="899.5" class="stroke-muted-foreground"></line>
<line y1="949.5" x2="1920" y2="949.5" class="stroke-muted-foreground"></line>
<line y1="999.5" x2="1920" y2="999.5" class="stroke-muted-foreground"></line>
<line y1="1049.5" x2="1920" y2="1049.5" class="stroke-muted-foreground"></line>
<g clip-path="url(#clip1_4_5)">
<line x1="49.6133" y1="3.99995" x2="49.7268" y2="1084" class="stroke-muted-foreground"></line>
<line x1="99.7275" y1="3.99995" x2="99.8411" y2="1084" class="stroke-muted-foreground"></line>
<line x1="149.841" y1="3.99995" x2="149.954" y2="1084" class="stroke-muted-foreground"></line>
<line x1="199.954" y1="3.99995" x2="200.068" y2="1084" class="stroke-muted-foreground"></line>
<line x1="250.067" y1="3.99995" x2="250.181" y2="1084" class="stroke-muted-foreground"></line>
<line x1="300.182" y1="3.99995" x2="300.295" y2="1084" class="stroke-muted-foreground"></line>
<line x1="350.295" y1="3.99995" x2="350.408" y2="1084" class="stroke-muted-foreground"></line>
<line x1="400.408" y1="3.99995" x2="400.522" y2="1084" class="stroke-muted-foreground"></line>
<line x1="450.521" y1="3.99995" x2="450.635" y2="1084" class="stroke-muted-foreground"></line>
<line x1="500.636" y1="3.99995" x2="500.749" y2="1084" class="stroke-muted-foreground"></line>
<line x1="550.749" y1="3.99995" x2="550.863" y2="1084" class="stroke-muted-foreground"></line>
<line x1="600.862" y1="3.99995" x2="600.976" y2="1084" class="stroke-muted-foreground"></line>
<line x1="650.976" y1="3.99995" x2="651.089" y2="1084" class="stroke-muted-foreground"></line>
<line x1="701.09" y1="3.99995" x2="701.203" y2="1084" class="stroke-muted-foreground"></line>
<line x1="751.203" y1="3.99995" x2="751.317" y2="1084" class="stroke-muted-foreground"></line>
<line x1="801.316" y1="3.99995" x2="801.43" y2="1084" class="stroke-muted-foreground"></line>
<line x1="851.43" y1="3.99995" x2="851.543" y2="1084" class="stroke-muted-foreground"></line>
<line x1="901.544" y1="3.99995" x2="901.657" y2="1084" class="stroke-muted-foreground"></line>
<line x1="951.657" y1="3.99995" x2="951.771" y2="1084" class="stroke-muted-foreground"></line>
<line x1="1001.77" y1="3.99995" x2="1001.88" y2="1084" class="stroke-muted-foreground"></line>
<line x1="1051.88" y1="3.99995" x2="1052" y2="1084" class="stroke-muted-foreground"></line>
<line x1="1102" y1="3.99995" x2="1102.11" y2="1084" class="stroke-muted-foreground"></line>
<line x1="1152.11" y1="3.99995" x2="1152.22" y2="1084" class="stroke-muted-foreground"></line>
<line x1="1202.22" y1="3.99995" x2="1202.34" y2="1084" class="stroke-muted-foreground"></line>
<line x1="1252.34" y1="3.99995" x2="1252.45" y2="1084" class="stroke-muted-foreground"></line>
<line x1="1302.45" y1="3.99995" x2="1302.57" y2="1084" class="stroke-muted-foreground"></line>
<line x1="1352.57" y1="3.99995" x2="1352.68" y2="1084" class="stroke-muted-foreground"></line>
<line x1="1402.68" y1="3.99995" x2="1402.79" y2="1084" class="stroke-muted-foreground"></line>
<line x1="1452.79" y1="3.99995" x2="1452.91" y2="1084" class="stroke-muted-foreground"></line>
<line x1="1502.91" y1="3.99995" x2="1503.02" y2="1084" class="stroke-muted-foreground"></line>
<line x1="1553.02" y1="3.99995" x2="1553.13" y2="1084" class="stroke-muted-foreground"></line>
<line x1="1603.13" y1="3.99995" x2="1603.25" y2="1084" class="stroke-muted-foreground"></line>
<line x1="1653.25" y1="3.99995" x2="1653.36" y2="1084" class="stroke-muted-foreground"></line>
<line x1="1703.36" y1="3.99995" x2="1703.47" y2="1084" class="stroke-muted-foreground"></line>
<line x1="1753.47" y1="3.99995" x2="1753.59" y2="1084" class="stroke-muted-foreground"></line>
<line x1="1803.59" y1="3.99995" x2="1803.7" y2="1084" class="stroke-muted-foreground"></line>
<line x1="1853.7" y1="3.99995" x2="1853.81" y2="1084" class="stroke-muted-foreground"></line>
<line x1="1903.81" y1="3.99995" x2="1903.93" y2="1084" class="stroke-muted-foreground"></line>
</g>
</g>
<defs>
<clipPath id="clip0_4_5">
<rect width="1920" height="1080" fill="#000000"></rect>
</clipPath>
<clipPath id="clip1_4_5">
<rect width="1920" height="1080" fill="#000000" transform="tranzinc(-1 4)"></rect>
</clipPath>
</defs>
</svg>
<div class="z-10 mx-auto flex max-w-5xl flex-col items-center gap-6 text-center">
<div
class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground">
New Release<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-arrow-down-right ml-2 size-4">
<path d="m7 7 10 10"></path>
<path d="M17 7v10H7"></path>
</svg>
</div>
<div>
<h1 class="mb-6 text-pretty text-4xl font-bold lg:text-7xl">
This is a heading for your new project
</h1>
<p class="text-zinc-600 lg:text-xl">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Elig doloremque mollitia fugiat
omnis! Porro facilis quo animi consequatur. Explicabo.
</p>
</div>
<div class="mt-4 flex justify-center">
<p class="text-sm text-zinc-600">
Press<kbd
class="pointer-events-none mx-0.5 inline-flex h-5 select-none items-center rounded border bg-zinc-100 px-1.5 font-mono font-medium text-zinc-600 opacity-100">S</kbd>to
get started
</p>
</div>
<div class="mt-20 flex flex-col items-center gap-4 lg:mt-40">
<p class="text-center: text-zinc-600 lg:text-left">
Powering the next generation of digital products
</p>
<div class="flex flex-wrap items-center justify-center gap-8">
<img src="/images/placeholders/logos/figma.svg" alt="company logo" class="h-7" /><img
src="/images/placeholders/logos/vercel.svg" alt="company logo" class="h-8" /><img
src="/images/placeholders/logos/react-icon.svg" alt="company logo" class="h-7" /><img
src="/images/placeholders/logos/supabase.svg" alt="company logo" class="h-7" /><img
src="/images/placeholders/logos/tailwind.svg" alt="company logo" class="h-5" />
</div>
</div>
</div>
</div>
</div>
</section>hero11
FREE
Your tagline
Medium length display headline.
Free and Premium themes, UI Kit's, templates and landing pages built with Tailwind CSS, HTML & Next.js.
-
Short title
Explain 2 great feature here. Information about the feature.
Learn More -
Short title
Explain 2 great feature here. Information about the feature.
Learn More
<section class="py-32">
<section class="mb-32 border-b pt-32">
<div class="container max-w-7xl">
<div class="mx-auto flex max-w-5xl flex-col items-center">
<div class="z-10 flex flex-col items-center gap-6 text-center">
<img src="/images/placeholders/minima/block-1.svg" alt="logo" class="h-16" />
<div>
<h1 class="mb-4 text-pretty text-2xl font-medium lg:text-4xl">
Build your next project with Blocks
</h1>
<p class="text-zinc-600 lg:text-xl">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Elig doloremque mollitia
fugiat omnis! Porro facilis quo animi consequatur. Explicabo.
</p>
</div>
<button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-zinc-900 text-white hover:bg-zinc-900/90 h-10 px-4 py-2">
Get started now<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chevron-right ml-2 h-4">
<path d="m9 18 6-6-6-6"></path>
</svg>
</button>
</div>
</div>
<img src="/images/placeholders/minima/placeholder.svg" alt="placeholder"
class="mt-20 max-h-96 w-full rounded-t-lg object-cover" />
</div>
</section>
</section>hero12
FREE
Your tagline
Medium length display headline.
Wicked Blocks offers a wide array of both free and premium components specifically designed for Tailwind CSS. Our extensive collection features meticulously crafted Tailwind blocks that cater to various design needs and preferences.
- Incredible reason to purchase.
- Expensive feature.
- Really good feauture.
<section class="relative overflow-hidden py-32">
<div class="container">
<div class="absolute inset-x-0 top-0 z-10 flex size-full items-center justify-center opacity-100">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 1125">
<mask id="b" width="2000" height="1125" x="0" y="0">
<path fill="url(#a)" d="M0 0h2000v1125H0z"></path>
</mask>
<path fill="#fff" d="M0 0h2000v1125H0z"></path>
<g stroke="#eee" stroke-width="0.6" mask="url(#b)" style="transform-origin: center center">
<path fill="none"
d="M0 0h111.111v111.111H0zm111.111 0h111.111v111.111H111.111zm111.111 0h111.111v111.111H222.222zm111.111 0h111.111v111.111H333.333z">
</path>
<path fill="#eeeeeeaf" d="M444.444 0h111.111v111.111H444.444z"></path>
<path fill="none"
d="M555.556 0h111.111v111.111H555.556zm111.111 0h111.111v111.111H666.667zm111.111 0h111.111v111.111H777.778zm111.111 0H1000v111.111H888.889zM1000 0h111.111v111.111H1000zm111.111 0h111.111v111.111h-111.111z">
</path>
<path fill="none" d="M1222.222 0h111.111v111.111h-111.111zm111.111 0h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1444.444 0h111.111v111.111h-111.111z"></path>
<path fill="#eeeeee0b" d="M1555.556 0h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1666.667 0h111.111v111.111h-111.111z"></path>
<path fill="#eeeeeed1" d="M1777.778 0h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1888.889 0H2000v111.111h-111.111zM0 111.111h111.111v111.111H0z"></path>
<path fill="#eeeeee1c" d="M111.111 111.111h111.111v111.111H111.111z"></path>
<path fill="none" d="M222.222 111.111h111.111v111.111H222.222z"></path>
<path fill="#eeeeee2b" d="M333.333 111.111h111.111v111.111H333.333z"></path>
<path fill="#eeeeeec2" d="M444.444 111.111h111.111v111.111H444.444z"></path>
<path fill="none" d="M555.556 111.111h111.111v111.111H555.556z"></path>
<path fill="#eeeeeeef" d="M666.667 111.111h111.111v111.111H666.667z"></path>
<path fill="none" d="M777.778 111.111h111.111v111.111H777.778zm111.111 0H1000v111.111H888.889z"></path>
<path fill="#eeeeee77" d="M1000 111.111h111.111v111.111H1000z"></path>
<path fill="#eeeeeeea" d="M1111.111 111.111h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1222.222 111.111h111.111v111.111h-111.111zm111.111 0h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1444.444 111.111h111.111v111.111h-111.111zm111.112 0h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1666.667 111.111h111.111v111.111h-111.111zm111.111 0h111.111v111.111h-111.111z"></path>
<path fill="none"
d="M1888.889 111.111H2000v111.111h-111.111zM0 222.222h111.111v111.111H0zm111.111 0h111.111v111.111H111.111z">
</path>
<path fill="#eeeeeed1" d="M222.222 222.222h111.111v111.111H222.222z"></path>
<path fill="none"
d="M333.333 222.222h111.111v111.111H333.333zm111.111 0h111.111v111.111H444.444zm111.112 0h111.111v111.111H555.556zm111.111 0h111.111v111.111H666.667z">
</path>
<path fill="#eeeeee04" d="M777.778 222.222h111.111v111.111H777.778z"></path>
<path fill="#eeeeee1f" d="M888.889 222.222H1000v111.111H888.889z"></path>
<path fill="none" d="M1000 222.222h111.111v111.111H1000z"></path>
<path fill="#eeeeeeb1" d="M1111.111 222.222h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1222.222 222.222h111.111v111.111h-111.111zm111.111 0h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1444.444 222.222h111.111v111.111h-111.111zm111.112 0h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1666.667 222.222h111.111v111.111h-111.111zm111.111 0h111.111v111.111h-111.111z"></path>
<path fill="#eeeeee47" d="M1888.889 222.222H2000v111.111h-111.111z"></path>
<path fill="#eeeeeed0" d="M0 333.333h111.111v111.111H0z"></path>
<path fill="#eeeeeea6" d="M111.111 333.333h111.111v111.111H111.111z"></path>
<path fill="none" d="M222.222 333.333h111.111v111.111H222.222z"></path>
<path fill="#eeeeeebd" d="M333.333 333.333h111.111v111.111H333.333z"></path>
<path fill="none" d="M444.444 333.333h111.111v111.111H444.444z"></path>
<path fill="#eeeeee72" d="M555.556 333.333h111.111v111.111H555.556z"></path>
<path fill="none"
d="M666.667 333.333h111.111v111.111H666.667zm111.111 0h111.111v111.111H777.778zm111.111 0H1000v111.111H888.889z">
</path>
<path fill="#eeeeee58" d="M1000 333.333h111.111v111.111H1000z"></path>
<path fill="none" d="M1111.111 333.333h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1222.222 333.333h111.111v111.111h-111.111zm111.111 0h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1444.444 333.333h111.111v111.111h-111.111z"></path>
<path fill="#eeeeeed7" d="M1555.556 333.333h111.111v111.111h-111.111z"></path>
<path fill="#eeeeee57" d="M1666.667 333.333h111.111v111.111h-111.111z"></path>
<path fill="#eeeeee75" d="M1777.778 333.333h111.111v111.111h-111.111z"></path>
<path fill="#eeeeeebf" d="M1888.889 333.333H2000v111.111h-111.111z"></path>
<path fill="#eeeeee16" d="M0 444.444h111.111v111.111H0z"></path>
<path fill="none"
d="M111.111 444.444h111.111v111.111H111.111zm111.111 0h111.111v111.111H222.222zm111.111 0h111.111v111.111H333.333zm111.111 0h111.111v111.111H444.444zm111.112 0h111.111v111.111H555.556zm111.111 0h111.111v111.111H666.667zm111.111 0h111.111v111.111H777.778z">
</path>
<path fill="#eeeeee5b" d="M888.889 444.444H1000v111.111H888.889z"></path>
<path fill="none" d="M1000 444.444h111.111v111.111H1000zm111.111 0h111.111v111.111h-111.111z"></path>
<path fill="#eeeeeefb" d="M1222.222 444.444h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1333.333 444.444h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1444.444 444.444h111.111v111.111h-111.111zm111.112 0h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1666.667 444.444h111.111v111.111h-111.111zm111.111 0h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1888.889 444.444H2000v111.111h-111.111zM0 555.556h111.111v111.111H0z"></path>
<path fill="#eeeeee9e" d="M111.111 555.556h111.111v111.111H111.111z"></path>
<path fill="#eeeeeef4" d="M222.222 555.556h111.111v111.111H222.222z"></path>
<path fill="none"
d="M333.333 555.556h111.111v111.111H333.333zm111.111 0h111.111v111.111H444.444zm111.112 0h111.111v111.111H555.556zm111.111 0h111.111v111.111H666.667z">
</path>
<path fill="#eeeeee87" d="M777.778 555.556h111.111v111.111H777.778z"></path>
<path fill="none"
d="M888.889 555.556H1000v111.111H888.889zm111.111 0h111.111v111.111H1000zm111.111 0h111.111v111.111h-111.111z">
</path>
<path fill="none" d="M1222.222 555.556h111.111v111.111h-111.111zm111.111 0h111.111v111.111h-111.111z"></path>
<path fill="#eeeeeed4" d="M1444.444 555.556h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1555.556 555.556h111.111v111.111h-111.111z"></path>
<path fill="#eeeeeeec" d="M1666.667 555.556h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1777.778 555.556h111.111v111.111h-111.111z"></path>
<path fill="#eeeeeece" d="M1888.889 555.556H2000v111.111h-111.111z"></path>
<path fill="none"
d="M0 666.667h111.111v111.111H0zm111.111 0h111.111v111.111H111.111zm111.111 0h111.111v111.111H222.222z">
</path>
<path fill="#eeeeeebd" d="M333.333 666.667h111.111v111.111H333.333z"></path>
<path fill="#eeeeeec7" d="M444.444 666.667h111.111v111.111H444.444z"></path>
<path fill="#eeeeee2a" d="M555.556 666.667h111.111v111.111H555.556z"></path>
<path fill="#eeeeee24" d="M666.667 666.667h111.111v111.111H666.667z"></path>
<path fill="#eeeeeedd" d="M777.778 666.667h111.111v111.111H777.778z"></path>
<path fill="none"
d="M888.889 666.667H1000v111.111H888.889zm111.111 0h111.111v111.111H1000zm111.111 0h111.111v111.111h-111.111z">
</path>
<path fill="#eeeeee9a" d="M1222.222 666.667h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1333.333 666.667h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1444.444 666.667h111.111v111.111h-111.111zm111.112 0h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1666.667 666.667h111.111v111.111h-111.111zm111.111 0h111.111v111.111h-111.111z"></path>
<path fill="#eeeeee12" d="M1888.889 666.667H2000v111.111h-111.111z"></path>
<path fill="none" d="M0 777.778h111.111v111.111H0z"></path>
<path fill="#eeeeee68" d="M111.111 777.778h111.111v111.111H111.111z"></path>
<path fill="#eeeeee69" d="M222.222 777.778h111.111v111.111H222.222z"></path>
<path fill="none"
d="M333.333 777.778h111.111v111.111H333.333zm111.111 0h111.111v111.111H444.444zm111.112 0h111.111v111.111H555.556zm111.111 0h111.111v111.111H666.667zm111.111 0h111.111v111.111H777.778zm111.111 0H1000v111.111H888.889z">
</path>
<path fill="#eeeeee46" d="M1000 777.778h111.111v111.111H1000z"></path>
<path fill="none" d="M1111.111 777.778h111.111v111.111h-111.111z"></path>
<path fill="#eeeeee0d" d="M1222.222 777.778h111.111v111.111h-111.111z"></path>
<path fill="#eeeeeeda" d="M1333.333 777.778h111.111v111.111h-111.111z"></path>
<path fill="#eeeeee60" d="M1444.444 777.778h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1555.556 777.778h111.111v111.111h-111.111z"></path>
<path fill="#eeeeee09" d="M1666.667 777.778h111.111v111.111h-111.111z"></path>
<path fill="#eeeeee2d" d="M1777.778 777.778h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1888.889 777.778H2000v111.111h-111.111zM0 888.889h111.111V1000H0z"></path>
<path fill="#eeeeee1b" d="M111.111 888.889h111.111V1000H111.111z"></path>
<path fill="#eeeeee05" d="M222.222 888.889h111.111V1000H222.222z"></path>
<path fill="#eeeeee5d" d="M333.333 888.889h111.111V1000H333.333z"></path>
<path fill="none" d="M444.444 888.889h111.111V1000H444.444z"></path>
<path fill="#eeeeeefd" d="M555.556 888.889h111.111V1000H555.556z"></path>
<path fill="none" d="M666.667 888.889h111.111V1000H666.667z"></path>
<path fill="#eeeeee14" d="M777.778 888.889h111.111V1000H777.778z"></path>
<path fill="#eeeeee2b" d="M888.889 888.889H1000V1000H888.889z"></path>
<path fill="#eeeeee11" d="M1000 888.889h111.111V1000H1000zm111.111 0h111.111V1000h-111.111z"></path>
<path fill="none" d="M1222.222 888.889h111.111V1000h-111.111z"></path>
<path fill="#eeeeeecb" d="M1333.333 888.889h111.111V1000h-111.111z"></path>
<path fill="none" d="M1444.444 888.889h111.111V1000h-111.111zm111.112 0h111.111V1000h-111.111z"></path>
<path fill="none" d="M1666.667 888.889h111.111V1000h-111.111z"></path>
<path fill="#eeeeee2f" d="M1777.778 888.889h111.111V1000h-111.111z"></path>
<path fill="#eeeeeeec" d="M1888.889 888.889H2000V1000h-111.111z"></path>
<path fill="none"
d="M0 1000h111.111v111.111H0zm111.111 0h111.111v111.111H111.111zm111.111 0h111.111v111.111H222.222zm111.111 0h111.111v111.111H333.333zm111.111 0h111.111v111.111H444.444zm111.112 0h111.111v111.111H555.556z">
</path>
<path fill="#eeeeeef0" d="M666.667 1000h111.111v111.111H666.667z"></path>
<path fill="none" d="M777.778 1000h111.111v111.111H777.778zm111.111 0H1000v111.111H888.889z"></path>
<path fill="#eeeeeef0" d="M1000 1000h111.111v111.111H1000z"></path>
<path fill="#eeeeeea8" d="M1111.111 1000h111.111v111.111h-111.111z"></path>
<path fill="#eeeeeecf" d="M1222.222 1000h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1333.333 1000h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1444.444 1000h111.111v111.111h-111.111z"></path>
<path fill="#eeeeeede" d="M1555.556 1000h111.111v111.111h-111.111z"></path>
<path fill="#eeeeee29" d="M1666.667 1000h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1777.778 1000h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1888.889 1000H2000v111.111h-111.111z"></path>
<path fill="#eeeeeefd" d="M0 1111.111h111.111v111.111H0z"></path>
<path fill="#eeeeee48" d="M111.111 1111.111h111.111v111.111H111.111z"></path>
<path fill="none"
d="M222.222 1111.111h111.111v111.111H222.222zm111.111 0h111.111v111.111H333.333zm111.111 0h111.111v111.111H444.444zm111.112 0h111.111v111.111H555.556zm111.111 0h111.111v111.111H666.667z">
</path>
<path fill="#eeeeee6d" d="M777.778 1111.111h111.111v111.111H777.778z"></path>
<path fill="none" d="M888.889 1111.111H1000v111.111H888.889zm111.111 0h111.111v111.111H1000z"></path>
<path fill="#eeeeeee4" d="M1111.111 1111.111h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1222.222 1111.111h111.111v111.111h-111.111zm111.111 0h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1444.444 1111.111h111.111v111.111h-111.111zm111.112 0h111.111v111.111h-111.111z"></path>
<path fill="#eeeeeeb8" d="M1666.667 1111.111h111.111v111.111h-111.111z"></path>
<path fill="none" d="M1777.778 1111.111h111.111v111.111h-111.111z"></path>
<path fill="#eeeeeeea" d="M1888.889 1111.111H2000v111.111h-111.111z"></path>
</g>
<defs>
<radialGradient id="a">
<stop offset="0" stop-color="#fff"></stop>
<stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
</radialGradient>
</defs>
</svg>
</div>
<div class="mx-auto flex max-w-5xl flex-col items-center">
<div class="z-10 flex flex-col items-center gap-6 text-center">
<img src="/images/placeholders/minima/block-1.svg" alt="logo" class="h-16" />
<div
class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground">
UI Blocks
</div>
<div>
<h1 class="mb-6 text-pretty text-2xl font-bold lg:text-5xl">
Build your next project with Blocks
</h1>
<p class="text-zinc-600 lg:text-xl">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Elig doloremque mollitia fugiat
omnis! Porro facilis quo animi consequatur. Explicabo.
</p>
</div>
<div class="mt-4 flex justify-center gap-2">
<button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-zinc-900 text-white hover:bg-zinc-900/90 h-10 px-4 py-2">
Get Started</button><button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-white hover:bg-zinc-100 hover:text-zinc-800 h-10 px-4 py-2">
Learn more
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-external-link ml-2 h-4">
<path d="M15 3h6v6"></path>
<path d="M10 14 21 3"></path>
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
</svg>
</button>
</div>
<div class="mt-20 flex flex-col items-center gap-4">
<p class="text-center: text-zinc-600 lg:text-left">
Built with open-source technologies
</p>
<div class="flex flex-wrap items-center justify-center gap-4">
<a href="#"
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-white hover:bg-zinc-100 hover:text-zinc-800 h-10 py-2 group px-3"><img
src="/images/placeholders/logos/shadcn-ui-small.svg" alt="company logo"
class="h-6 saturate-0 transition-all group-hover:saturate-100" /></a><a href="#"
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-white hover:bg-zinc-100 hover:text-zinc-800 h-10 py-2 group px-3"><img
src="/images/placeholders/logos/typescript-small.svg" alt="company logo"
class="h-6 saturate-0 transition-all group-hover:saturate-100" /></a><a href="#"
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-white hover:bg-zinc-100 hover:text-zinc-800 h-10 py-2 group px-3"><img
src="/images/placeholders/logos/react-icon.svg" alt="company logo"
class="h-6 saturate-0 transition-all group-hover:saturate-100" /></a><a href="#"
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-white hover:bg-zinc-100 hover:text-zinc-800 h-10 py-2 group px-3"><img
src="/images/placeholders/logos/tailwind-small.svg" alt="company logo"
class="h-4 saturate-0 transition-all group-hover:saturate-100" /></a>
</div>
</div>
</div>
</div>
</div>
</section>hero13
FREE
Your tagline
Medium length display headline.
Free and Premium themes, UI Kit's, templates and landing pages built with Tailwind CSS, HTML & Next.js.
<section class="py-32">
<div class="container">
<div
class="inline-flex items-center rounded-full border px-2.5 py-0.5 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground mb-4 max-w-full text-sm font-normal lg:mb-10 lg:py-2 lg:pl-2 lg:pr-5">
<span class="mr-2 flex size-8 shrink-0 items-center justify-center rounded-full bg-zinc-100"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-bell size-4">
<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path>
<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path>
</svg></span>
<p class="truncate whitespace-nowrap">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi eaque distinctio iusto
voluptas voluptatum sed!
</p>
</div>
<h1 class="mb-6 text-4xl font-bold leading-none tracking-tighter md:text-[7vw] lg:text-8xl">
Streamline your workflow experience.
</h1>
<p class="max-w-2xl text-zinc-600 md:text-[2vw] lg:text-xl">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum dolor assumenda voluptatem
nemo magni a maiores aspernatur.
</p>
<div class="mt-6 flex flex-col gap-4 sm:flex-row lg:mt-10">
<button
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-zinc-900 text-white hover:bg-zinc-900/90 h-11 rounded-md px-8 w-full md:w-auto">
Get a demo</button><button
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-white hover:bg-zinc-100 hover:text-zinc-800 h-11 rounded-md px-8 w-full md:w-auto">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-circle-play mr-2 size-4">
<circle cx="12" cy="12" r="10"></circle>
<polygon points="10 8 16 12 10 16 10 8"></polygon>
</svg>Watch video
</button>
</div>
</div>
</section>hero14
FREE
-
Short title
Explain 2 great feature here. Information about the feature.
Learn More -
Short title
Explain 2 great feature here. Information about the feature.
Learn More -
Short title
Explain 2 great feature here. Information about the feature.
Learn More -
Short title
Explain 2 great feature here. Information about the feature.
Learn More
<section class="py-32">
<div class="container">
<div>
<h2 class="mx-auto mb-4 max-w-screen-sm text-center text-4xl font-medium md:mb-12 md:text-8xl">
Choose your stack
</h2>
<p class="mt-4 text-center text-lg text-gray-600 md:text-2xl">
Compatible with all popular frameworks
</p>
<div
class="mx-auto mb-12 mt-8 flex w-fit animate-fade-in-out items-center gap-2 rounded-md bg-muted px-4 py-2 text-center">
<img class="h-4 md:h-7" />
<p class="border-l px-2 font-mono text-sm"></p>
</div>
</div>
<div
class="relative mx-auto w-full max-w-screen-md before:absolute before:inset-y-0 before:left-0 before:z-10 before:w-36 before:bg-gradient-to-r before:from-background before:to-transparent after:absolute after:inset-y-0 after:right-0 after:z-10 after:w-36 after:bg-gradient-to-l after:from-background after:to-transparent"
role="region" aria-roledescription="carousel">
<div class="overflow-hidden">
<div class="flex -ml-4">
<div role="group" aria-roledescription="slide"
class="min-w-0 shrink-0 grow-0 pl-4 basis-1/3 select-none sm:basis-1/4 md:basis-1/6">
<div class="flex items-center justify-center gap-2 rounded-md border p-6 border-transparent">
<img class="h-4 shrink-0 md:h-7"
src="https://www.shadcnblocks.com/images/placeholders/minima/logos/nextjs-small.svg" alt="Next" />
<p>Next</p>
</div>
</div>
<div role="group" aria-roledescription="slide"
class="min-w-0 shrink-0 grow-0 pl-4 basis-1/3 select-none sm:basis-1/4 md:basis-1/6">
<div class="flex items-center justify-center gap-2 rounded-md border p-6 border-transparent">
<img class="h-4 shrink-0 md:h-7"
src="https://www.shadcnblocks.com/images/placeholders/minima/logos/vite.svg" alt="Vite" />
<p>Vite</p>
</div>
</div>
<div role="group" aria-roledescription="slide"
class="min-w-0 shrink-0 grow-0 pl-4 basis-1/3 select-none sm:basis-1/4 md:basis-1/6">
<div class="flex items-center justify-center gap-2 rounded-md border p-6 border-transparent">
<img class="h-4 shrink-0 md:h-7"
src="https://www.shadcnblocks.com/images/placeholders/minima/logos/remix.svg" alt="Remix" />
<p>Remix</p>
</div>
</div>
<div role="group" aria-roledescription="slide"
class="min-w-0 shrink-0 grow-0 pl-4 basis-1/3 select-none sm:basis-1/4 md:basis-1/6">
<div class="flex items-center justify-center gap-2 rounded-md border p-6 border-transparent">
<img class="h-4 shrink-0 md:h-7"
src="https://www.shadcnblocks.com/images/placeholders/minima/logos/gatsby.svg" alt="Gatsby" />
<p>Gatsby</p>
</div>
</div>
<div role="group" aria-roledescription="slide"
class="min-w-0 shrink-0 grow-0 pl-4 basis-1/3 select-none sm:basis-1/4 md:basis-1/6">
<div class="flex items-center justify-center gap-2 rounded-md border p-6 border-transparent">
<img class="h-4 shrink-0 md:h-7"
src="https://www.shadcnblocks.com/images/placeholders/minima/logos/astro.svg" alt="Astro" />
<p>Astro</p>
</div>
</div>
<div role="group" aria-roledescription="slide"
class="min-w-0 shrink-0 grow-0 pl-4 basis-1/3 select-none sm:basis-1/4 md:basis-1/6">
<div class="flex items-center justify-center gap-2 rounded-md border p-6 border-transparent">
<img class="h-4 shrink-0 md:h-7"
src="https://www.shadcnblocks.com/images/placeholders/minima/logos/laravel.svg" alt="Laravel" />
<p>Laravel</p>
</div>
</div>
<div role="group" aria-roledescription="slide"
class="min-w-0 shrink-0 grow-0 pl-4 basis-1/3 select-none sm:basis-1/4 md:basis-1/6">
<div class="flex items-center justify-center gap-2 rounded-md border p-6 border-transparent">
<img class="h-4 shrink-0 md:h-7"
src="https://www.shadcnblocks.com/images/placeholders/minima/logos/react-black.svg" alt="React" />
<p>React</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>hero15
FREE
Your tagline
Medium length display headline.
Free and Premium themes, UI Kit's, templates and landing pages built with Tailwind CSS, HTML & Next.js.
<section class="py-32">
<div class="container">
<a href="#" class="mx-auto mb-4 flex w-fit items-center rounded-full bg-zinc-100 px-4 py-2 text-sm"><span
class="mr-1 font-semibold">What's new</span>| Read more<svg xmlns="http://www.w3.org/2000/svg" width="24"
height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-arrow-right ml-2 inline size-4">
<path d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg></a>
<h1 class="my-4 mb-6 text-center text-3xl font-bold lg:text-5xl">
Efficient tools that simplify your workflow.
</h1>
<p class="mx-auto mb-6 max-w-2xl text-center text-zinc-600 lg:text-xl">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum dolor assumenda voluptatem
nemo magni a maiores aspernatur.
</p>
<div class="flex justify-center">
<button
class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-zinc-900 text-white hover:bg-zinc-900/90 h-11 rounded-md px-8 w-full sm:w-auto lg:mt-10">
Get started for free
</button>
</div>
<div class="mt-6 lg:mt-8">
<ul class="flex flex-wrap justify-center gap-4 text-sm lg:text-base">
<li class="flex items-center gap-2 whitespace-nowrap">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="size-5"
height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path
d="m12.954 11.616 2.957-2.957L6.36 3.291c-.633-.342-1.226-.39-1.746-.016l8.34 8.341zm3.461 3.462 3.074-1.729c.6-.336.929-.812.929-1.34 0-.527-.329-1.004-.928-1.34l-2.783-1.563-3.133 3.132 2.841 2.84zM4.1 4.002c-.064.197-.1.417-.1.658v14.705c0 .381.084.709.236.97l8.097-8.098L4.1 4.002zm8.854 8.855L4.902 20.91c.154.059.32.09.495.09.312 0 .637-.092.968-.276l9.255-5.197-2.666-2.67z">
</path>
</svg>4.7 rating on Play Store
</li>
<li class="flex items-center gap-2 whitespace-nowrap">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 384 512" class="size-5"
height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path
d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z">
</path>
</svg>4.8 rating on App Store
</li>
<li class="flex items-center gap-2 whitespace-nowrap">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" class="size-5"
height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path
d="M17.227 16.67l2.19 6.742-7.413-5.388 5.223-1.354zM24 9.31h-9.165L12.005.589l-2.84 8.723L0 9.3l7.422 5.397-2.84 8.714 7.422-5.388 4.583-3.326L24 9.311z">
</path>
</svg>4.9 rating on Trustpilot
</li>
</ul>
</div>
</div>
</section>hero16
FREE
Your tagline
Medium length display headline.
Free and Premium themes, UI Kit's, templates and landing pages built with Tailwind CSS, HTML & Next.js.
By subscribing, you agree with Wickedblocks Terms of Service and Privacy Policy.
<section class="py-32">
<div class="container flex flex-col items-center py-12 text-center lg:py-32">
<h1 class="my-3 text-pretty text-2xl font-bold sm:text-4xl md:my-6 lg:text-5xl">
Welcome to Our Website
</h1>
<p class="mb-6 max-w-xl text-zinc-600 md:mb-12 lg:text-xl">
Elig doloremque mollitia fugiat omnis! Porro facilis quo animi consequatur.
</p>
<div>
<button
class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-zinc-900 text-white hover:bg-zinc-900/90 h-10 px-4 py-2">
Primary
</button>
</div>
</div>
<div class="container">
<div class="aspect-video [mask-image:linear-gradient(#000_80%,transparent_100%)]">
<img src="/images/placeholders/minima/placeholder-1.jpg" alt="placeholder hero"
class="h-full w-full rounded-md object-cover" />
</div>
</div>
</section>