Hero section with a gradient background

With text overlay, and a call-to-action button

This tailwind example is contributed by Anonymous, on 07-Sep-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner

Call to Action Hero

Author Anonymous

Tailwind v3.4 21.1k 22

Fork Fullscreen

<div class="relative bg-gradient-to-r from-purple-600 to-blue-600 h-screen text-white overflow-hidden">
  <div class="absolute inset-0">
    <img src="https://images.unsplash.com/photo-1522252234503-e356532cafd5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHxjb2RlfGVufDB8MHx8fDE2OTQwOTg0MTZ8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Background Image" class="object-cover object-center w-full h-full" />
    <div class="absolute inset-0 bg-black opacity-50"></div>
  </div>
  
  <div class="relative z-10 flex flex-col justify-center items-center h-full text-center">
    <h1 class="text-5xl font-bold leading-tight mb-4">Welcome to Our Awesome Website</h1>
    <p class="text-lg text-gray-300 mb-8">Discover amazing features and services that await you.</p>
    <a href="#" class="bg-yellow-400 text-gray-900 hover:bg-yellow-300 py-2 px-6 rounded-full text-lg font-semibold transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">Get Started</a>
  </div>
</div>

Related Examples

Background image section

Charlotte Dupont

3 years ago

20.1k
Hero with video background

Samuel Dawson

3 years ago

17.8k
Product Page
Showcase for the product.

Prem..

4 years ago

34.7k
Hero banner

Piet Vriend

3 years ago

17.9k
Responsive hero section

Amit Pachange

3 years ago

17k
A Fullscreen Hero Section

Brandon D

4 years ago

23.3k
Home banner video background
Home banner video background

Rameez Rami

2 years ago

7.8k
Beautiful Hero Section

Brandon D

4 years ago

16.1k
Hero component

Freja Jensen

3 years ago

13.5k
CTA with image

Fagundo67

3 years ago

10.4k
Hero Section
Full width hero section for landing pages

Manon Daniel

4 years ago

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

Junclarkaizen Pagu

3 years ago

12.2k
Hero section with image

Sophia Baker

3 years ago

13.9k
Hero section with call to action buttons

Prashant

4 years ago

15.8k
Hero section

Mohit Prajapati

4 years ago

12.9k
Hero section with background gradient

Freja Jensen

3 years ago

9.2k
Clean hero section
Hero template with buttons

Laurits

3 years ago

16.1k
Hero section responsive

Samuel Dawson

3 years ago

15.8k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.