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

688

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

flower
by salvator

Author:
Baraka Salvator

8 months ago

1.1k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

8 months ago

1.8k
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

Author:
MD Mostafa Niloy

2 months ago

104
Hero (with dark mode)
Full-width hero section with background image overlay. Includes headline, description text and CTA buttons. Supports dark mode and responsive design.

Author:
Maxim

1 year ago

1.4k
Modern SAAS HERO Section
A hero section for your SAAS application

Author:
Emdadul Islam

1 year ago

2.7k
Header + simple Hero Section

Author:
ABDO-SY

11 months ago

2.1k
Donate Hero section
Best New tailwindcss,help save the children

Author:
ORGIN_DREAMS

8 months ago

700
Hero with video background

Author:
Samuel Dawson

3 years ago

16.9k
hero template

Author:
Raul antonio de la cruz hernandez

4 weeks ago

63
hero section

Author:
SAURAV SINGH

9 months ago

1k
Hero Section
Full width hero section for landing pages

Author:
Manon Daniel

3 years ago

13.8k
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)

8 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components