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

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

strawbery
by salvator

Author:
Baraka Salvator

3 weeks ago

89
Responsive Hero Section
A clean and responsive hero section built with Tailwind CSS using a flexbox layout. Features a circular profile image, two action buttons ("Say Hello" and "View Projects"), and mobile-friendly design. Includes basic JavaScript interaction with a button.

Author:
Sudip chaudhary

1 week ago

106
No distraction search field

Author:
_Amar_

2 years ago

11.5k
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Author:
Junclarkaizen Pagu

1 year ago

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

Author:
Vikram Choudhary

1 year ago

8.4k
Portfolio Hero Section 4

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

6 months ago

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

Author:
Augustin

3 weeks ago

101
Background image section

Author:
Charlotte Dupont

2 years ago

17.6k
Home banner video background
Home banner video background

Author:
Rameez Rami

1 year ago

6.3k
Website Mockup
An Onyx Component. This can be used for landing pages / other website mockup purposes. It's clean design will fit with most SAAS projects.

Author:
Coastal UI

8 months ago

1.4k
Zoo management
this a navigation bar and hero section of a zoo management system

Author:
ishimwe shadad

2 weeks ago

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

Author:
ORGIN_DREAMS

4 weeks ago

88

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components