Hero section

Beatiful landing page hero section

This tailwind example is contributed by Rajesh Maheshwari, on 27-Feb-2025. Component is made with Tailwind v3.4. It is responsive.

Hero

Author Rajesh Maheshwari

Tailwind v3.4 2.9k 10

Fork Fullscreen

<nav class="fixed w-full top-0 z-50 bg-black/10 backdrop-blur-lg transition-colors duration-300 md:px-10 lg:px-10">
  <div class="container mx-auto flex h-20 items-center justify-between px-4">
    
    
    <a href="/" class="flex items-center shrink-0">
            <img class="w-10" height="100" width="100" src="https://tailwindflex.com/images/logo.svg" alt="Talwindflex logo">
            <span class="md:flex text-2xl mt-0.5 font-bold text-primary-600 text-white">
                TailwindFlex Studio
            </span>
        </a>

<div class="hidden md:flex items-center md:gap-8 text-white">
      <a href="/" class="text-sm font-medium hover:text-purple-400 transition">Home</a>
      <a href="#about" class="text-sm font-medium hover:text-purple-400 transition">About</a>
      <a href="#services" class="text-sm font-medium hover:text-purple-400 transition">Services</a>
      <a href="#portfolio" class="text-sm font-medium hover:text-purple-400 transition">Portfolio</a>
      <a href="#contact" class="text-sm font-medium hover:text-purple-400 transition">Contact</a>
      <a href="#contact" class="cursor-pointer rounded-full border-2 py-2 px-6 border-white bg-white text-purple-900 hover:bg-purple-900 hover:text-white hover:shadow-lg transition duration-300 ease-in-out">
        Contact Now
      </a>
    </div>

<div class="md:hidden">
      <button class="text-2xl text-white" onclick="setIsMenuOpen(!isMenuOpen)">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>
  </div>
</nav>

<section class="w-full flex items-center justify-center min-h-screen overflow-hidden bg-gradient-to-b from-[#121212] to-purple-800">
  
  <div class="absolute inset-0 bg-black bg-opacity-50"></div>

<div class="relative z-10 container mx-auto px-4 text-center text-white">
    <h1 class="mb-6 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl" style="line-height: 1.2">
      Catching Life's <span class="relative whitespace-nowrap text-purple-400 dark:text-purple-400">
        <svg aria-hidden="true" viewBox="0 0 418 42" class="absolute top-2/3 left-0 h-[0.58em] w-full fill-purple-400/70 dark:fill-purple-300/60" preserveAspectRatio="none">
          <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.780 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.540-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.810 23.239-7.825 27.934-10.149 28.304-14.005 .417-4.348-3.529-6-16.878-7.066Z"></path>
        </svg>
        <span class="relative">Beautiful</span>
      </span> Stories
    </h1>
    <p class="mx-auto mb-8 max-w-2xl text-lg">
      Professional photography services for weddings, events, portraits, and commercial shoots. Let us tell your story through our lens.
    </p>

<div class="flex justify-center items-center mt-8" data-aos="fade-up" data-aos-delay="400">
      <a href="#pricing" rel="noopener noreferrer"
        class="relative flex items-center justify-center px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white text-lg font-semibold rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200">
        <span class="absolute inset-0 rounded-full bg-purple-600 opacity-50 animate-ping"></span>
        <span class="relative z-10 pr-2">Book Now</span>
      </a>
    </div>
  </div>

<div class="absolute sm:bottom-14 bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
    <a href="#about" class="cursor-pointer">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
      </svg>
    </a>
  </div>
</section>

Related Examples

Générateur de Certificat Officiel
Générateur de Certificat Officiel

Omer fils ELENGA

10 months ago

868
Cyamunara
used to sell everything someone need to sell

INGRIDE MUZIRANENGE

1 year ago

1.9k
Gaming UI Card, Form
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Ayyamperumal S

10 months ago

729
hero modern
hero modern

Omer fils ELENGA

10 months ago

841
hero template

Raul antonio de la cruz hernandez

9 months ago

602
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.3k
Hero Section
Home hero section search bar

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

8.5k
login
Sign in page on computer screen. Desktop computer with login form and sign in button. User account. Modern concept for web

Augustin

1 year ago

1.5k
MENU OMERLINKS
MENU OMERLINKS

Omer fils ELENGA

9 months ago

784
hero template
hero section

Raul antonio de la cruz hernandez

9 months ago

511
AI SaaS Hero Section with Dashboard
A modern AI SaaS hero section built with HTML and Tailwind CSS featuring dashboard preview, CTA buttons, trust badges, responsive layout, and clean UI.

JUGENDRA GANGWAR

3 months ago

256
Animated hero section template for a ecommerce store
A bold, animated hero section template that brings personality and energy to your ecommerce shoe store. Features floating 3D elements, vibrant gradients, and playful animations that make your products pop off the screen. Features: - Light & dark mode with smooth transitions and persistent theme preference - Fully responsive design optimized for mobile, tablet, and desktop - Eye-catching floating shoe display with rotating decorative elements - Animated gradient backgrounds and glowing CTAs - Modern color scheme with pink, purple, and yellow accents - Social proof stats section for building trust - Clean, semantic HTML with Tailwind CSS utility classes - Zero dependencies - just copy, customize, and deploy - Open source and free to use for commercial projects For: Sneaker stores, footwear brands, fashion ecommerce sites, streetwear shops, or any modern retail brand looking to make a memorable first impression with a hero section that doesn't take itself too seriously. Quick Setup: Simply replace the emoji placeholder with your product image, update the copy to match your brand voice, adjust the color gradients to your palette, and you're ready to launch!

Ijila Itunu

10 months ago

846