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

300

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

3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

Author:
ORGIN_DREAMS

4 months ago

458
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.7k
Modern SAAS Hero Section
A 2-column responsive hero section for modern SAAS APP

Author:
Emdadul Islam

1 year ago

4.7k
Responsive hero section

Author:
Amit Pachange

2 years ago

15k
future ai robot
this an ai template by salvator

Author:
Baraka Salvator

4 months ago

727
Hero banner

Author:
Laurits

2 years ago

11.9k
GreenLeaf
Transform Your Garden

Author:
ORGIN_DREAMS

4 months ago

695
Hero section
Hero section for your project

Author:
Prajwal Hallale

3 years ago

9k
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

8 months ago

1k
Hero

Author:
Aman kumar

1 year ago

6.6k
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

Author:
AKASH GANDHAR

1 year ago

4.5k
heroimage
svg and hero image, basic html code

Author:
Anonymous

3 months ago

315

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components