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

6.6k

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

2 years ago

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

Author:
Junclarkaizen Pagu

2 years ago

11.9k
Home banner video background
Home banner video background

Author:
Rameez Rami

2 years ago

7.1k
Background image section

Author:
Charlotte Dupont

3 years ago

19.4k
Tool Box
by salvator

Author:
Baraka Salvator

9 months ago

1.3k
super cube
complex landing page for super cube created by salvator

Author:
Baraka Salvator

9 months ago

1k
Drinkware landing page

Author:
Maxim

11 months ago

1.5k
FUTURIC.
FUTURIC.

Author:
Omer fils ELENGA

6 days ago

32
Hero section - Htmlwind
Simple centered hero section

Author:
Htmlwind

9 months ago

1.1k
Responsive Hero Section
Key features of this hero section: 1. Responsive layout: Uses a column layout on mobile and switches to a row layout on medium screens and larger. 2. Left side: - Company name as a large heading - Brief description - "Learn More" button 3. Right side: - "Why Choose Us?" section with bullet points - Two call-to-action buttons: "Get Started" and "Contact Sales" 4. Styling: - Uses Tailwind's utility classes for responsive design, colors, spacing, and typography - Incorporates a shadow and rounded corners for the right-side content box - Includes hover effects on buttons for better interactivity This hero section will be fully responsive: - On mobile devices, it will stack vertically with the company info on top and the details below. - On larger screens, it will display in a two-column layout. The use of Tailwind CSS classes ensures that the design is consistent and easily adjustable. You can further customize the colors, fonts, and spacing to match your brand's specific design guidelines. Would you like me to explain any part of this code or make any adjustments?

Author:
Vernon Francis

1 year ago

2.1k
Hero w/ navbar
the modern and clean hero section

Author:
Carla Hoffman

2 years ago

5.5k
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

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

1 year ago

8.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components