Home
Cosimo Fazio
Hero Banner

Hero Banner

visually striking banner section
It features pattern background with using SVG

This tailwind example is contributed by Cosimo Fazio, on 29-Feb-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Hero

Author Cosimo Fazio

5.9k

Fork Fullscreen

<div class="relative isolate overflow-hidden bg-gray-900">
  <svg
    class="absolute inset-0 -z-10 h-full w-full stroke-white/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
    aria-hidden="true">
    <defs>
      <pattern id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc" width="200" height="200" x="100%" y="-1"
        patternUnits="userSpaceOnUse">
        <path d="M.5 200V.5H200" fill="none"></path>
      </pattern>
    </defs>
    <svg x="50%" y="-1" class="overflow-visible fill-gray-800/20">
      <path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
        stroke-width="0"></path>
    </svg>
    <rect width="100%" height="100%" stroke-width="0" fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)"></rect>
  </svg>
  <div
    class="absolute left-[calc(50%-4rem)] top-10 -z-10 transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:left-48 lg:top-[calc(50%-30rem)] xl:left-[calc(50%-24rem)]"
    aria-hidden="true">
    <div class="aspect-[1108/632] w-[69.25rem] bg-gradient-to-r from-[#80caff] to-[#4f46e5] opacity-20"
      style="clip-path:polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)">
    </div>
  </div>
  <div class="mt-[-50px] flex h-screen items-center justify-center">
    <div class="max-w-full flex-shrink-0 px-4 text-center lg:mx-0 lg:max-w-3xl lg:pt-8">
      <h1 class="mt-10 text-5xl font-bold tracking-tight text-white sm:text-6xl">
        revolutionize
        <span class="text-sky-500">your workflow</span> with
        <span class="text-sky-500">Zynx</span>
      </h1>
      <p class="mt-6 text-lg leading-8 text-gray-300">Elevate Your Productivity With Zynx, Your Personalized Workflow
        Assistant</p>
      <div class="mt-5 flex items-center justify-center gap-x-6">
        <a href="/register"
          class="rounded-md bg-sky-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-sky-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-400"
          rel="noreferrer">Try Now →</a>
      </div>
    </div>
  </div>
</div>

Related Examples

Hero

Author:
Aman kumar

1 year ago

6.4k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Author:
Junclarkaizen Pagu

1 year ago

11.2k
Home banner video background
Home banner video background

Author:
Rameez Rami

1 year ago

6.5k
Background image section

Author:
Charlotte Dupont

2 years ago

18.4k
Scooby’s Hello – A Tailwind CSS Cartoon Animation
A playful animation built with Tailwind CSS and minimal custom CSS, featuring a cartoon-style Scooby-inspired dog sliding in from the left, wagging its tail, and cheerfully saying "Hello!"—perfect for adding personality to a fun web project.

Author:
Bonimater

2 months ago

420
hero section

Author:
SAURAV SINGH

4 months ago

470
Basic hero section

Author:
Lîmåã M

2 years ago

16.1k
tiket token
enter in stadium using tecinology

Author:
Uwase Alliance

2 months ago

581
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

3 months ago

825
Single Page Portfolio

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

7 months ago

1.7k
Hero section

Author:
iamlos

5 months ago

1.1k
Food App Web design

Author:
Aitrik Saha

5 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components