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

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.5k
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.4k
Home banner video background
Home banner video background

Author:
Rameez Rami

1 year ago

6.6k
Background image section

Author:
Charlotte Dupont

2 years ago

18.6k
Rwandan farmers with Canadian markets through sustainable, fair trade practices.
Key Features of This Website: Professional Design: Clean, modern interface with orange/green color scheme representing mangoes and agriculture Fully responsive layout that works on all devices Comprehensive Sections: Hero section highlighting the Rwanda-Canada mango trade Product showcase with different mango varieties Current market pricing table Detailed farm-to-table process explanation Company information and impact metrics Testimonials from partners Contact form and information Trade-Specific Content: Focus on Rwandan mango varieties suitable for Canadian markets Pricing in both USD and kg units common in agricultural trade Information about certifications and compliance Shipping and logistics details User Experience: Clear calls-to-action for quotes and orders Easy navigation between sections Newsletter signup for market updates Contact information prominently displayed Trust Elements: Certifications and compliance badges Impact statistics showing benefits to Rwandan farmers Testimonials from Canadian partners

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

356
Feature Showcase + Cards
Responsive section with cards aligned using grid layout.

Author:
ABDO-SY

6 months ago

1.8k
asdfasdf
asdfasdfadf

Author:
Muhammad Imran

1 week ago

8
PortfoClean & Colorful Hero Section for Developer Portfolios (Tailwind CSS + Dark Mode)

Author:
SAI BENDE

1 month ago

206
animated hero

Author:
Crimson

8 months ago

2.4k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

2 months ago

750
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

7 months ago

1k
login_form
used for user to logging in

Author:
nii fanny

3 months ago

184

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components