Home
Rathanak Phan
Hero Section with Dark Mode

Hero Section with Dark Mode

Hero Section template using Tailwind CSS. It adapts to light and dark modes using the dark: variant and still fits seamlessly under your fixed navbar.

This tailwind example is contributed by Rathanak Phan, on 10-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Hero

Author Rathanak Phan

312

Fork Fullscreen

<section class="pt-24 md:pt-32 lg:pt-40 bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300">
  <div class="max-w-7xl mx-auto px-5 sm:px-10 lg:px-20 flex flex-col-reverse md:flex-row items-center gap-10">
    
    
    <div class="w-full md:w-1/2 space-y-6">
      <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
        Welcome to <span class="text-green-700 dark:text-green-400">LoGo</span> Store
      </h1>
      <p class="text-lg md:text-xl text-gray-700 dark:text-gray-300">
        Discover top-quality products and enjoy a smooth, secure shopping experience.
      </p>
      <div class="flex flex-wrap gap-4">
        <a href="/shop" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md text-lg font-medium shadow-md transition">
          Shop Now
        </a>
        <a href="/about" class="border border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-800 px-6 py-3 rounded-md text-lg font-medium transition">
          Learn More
        </a>
      </div>
    </div>

<div class="w-full md:w-1/2">
      <img 
        src="https://images.unsplash.com/photo-1585386959984-a4155228c2ce?auto=format&fit=crop&w=800&q=80" 
        alt="Happy woman shopping online" 
        class="w-full rounded-lg shadow-lg object-cover"
      />
    </div>
  </div>
</section>

Related Examples

Scooby’s Hello – A Tailwind CSS Cartoon Animation
A playful animation built with Tailwind CSS and minimal custom CSS, featuring a cartoon-style Scooby-inspired dog sliding in from the left, wagging its tail, and cheerfully saying "Hello!"—perfect for adding personality to a fun web project.

Author:
Bonimater

5 months ago

488
Responsive Header and Hero Section Design
Responsive Header and Hero Section Design provides flexible adaptability across all screen sizes and devices.

Author:
ABDO-SY

9 months ago

2.5k
Welcome banner for developers portfolio
A hero section welcoming visitors to a portfolio or website. It features a large, visually appealing title and an image.

Author:
Vikram Choudhary

2 years ago

10.2k
Product Page
Showcase for the product.

Author:
muhamadrofii911

1 year ago

2.3k
Portfolio Hero Section 5

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

7 months ago

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

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

1 year ago

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

Author:
Carla Hoffman

1 year ago

4.9k
Creative Hero Section

Author:
Ijila Itunu

6 months ago

1.1k
Hero section
Beatiful landing page hero section

Author:
Rajesh Maheshwari

8 months ago

1.9k
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

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

1 year ago

4k
Hero section for website

Author:
Leon Bachmann

2 years ago

11.6k
AcodeMaster GameZone – Play Your Favorite Games Online
AcodeMaster GameZone is a modern gaming website where you can discover, explore, and play exciting games anytime, anywhere. Designed with smooth animations and a stylish dark theme using Tailwind CSS, it offers a fast and fun experience for every gamer.

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

746

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components