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

306

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

A hero component
It has a gradient background, a large title with a creative emphasis, and a call-to-action button.

Author:
Vikram Choudhary

2 years ago

8.8k
Premium SAAS HERO Section
A hero section for your SAAS application

Author:
Emdadul Islam

1 year ago

2.5k
Hero section
Beatiful landing page hero section

Author:
Rajesh Maheshwari

8 months ago

1.8k
Hero Section
Home hero section search bar

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

1 year ago

7.5k
hero section

Author:
Anonymous

1 year ago

9.6k
App Hero Section With header

Author:
Abdul Baset Bappy

4 months ago

717
Mobile Developer Hero

Author:
Reuben Enahoro

1 month ago

187
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

Author:
ishimwe prince

5 months ago

734
Creative Hero Section

Author:
Ijila Itunu

6 months ago

928
Home
html , css

Author:
Hacker Development

5 months ago

395
Game changer
by salvator

Author:
Baraka Salvator

5 months ago

616
Hero section with sample code
Show sample code of your digital product

Author:
Dipti narayan

2 years ago

10.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components