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.8k

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.2k
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

10.9k
Home banner video background
Home banner video background

Author:
Rameez Rami

1 year ago

6.3k
Background image section

Author:
Charlotte Dupont

2 years ago

17.7k
About Us

Author:
KULDEEP

6 days ago

73
Slide
A slide component which could be used as hero section or in a slideshow

Author:
farid

6 months ago

1k
Heade With Hero Section

Author:
Abdul Baset Bappy

1 week ago

109
Design
by salvator

Author:
Baraka Salvator

1 month ago

119
Welcome to Cinema
The design captures the magic and glamour of cinema with a modern, interactive interface that would definitely make users stop scrolling and say "whoa!" The color scheme uses cinematic blacks and golds with vibrant accent colors, while the animations bring the interface to life without overwhelming the content

Author:
Augustin

4 weeks ago

112
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

2 weeks ago

286
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

1 month ago

293
Hero section for website

Author:
Leon Bachmann

2 years ago

11.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components