sectionsplitbeginner

Split Hero Section

A two-column hero with text on the left and an image/illustration area on the right.

Preview

Design Faster with Components

Pre-built Tailwind CSS recipes to speed up your development workflow.

🎨

<section class="bg-white">
  <div class="max-w-7xl mx-auto px-4 py-20 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
    <div>
      <h1 class="text-4xl lg:text-5xl font-extrabold text-gray-900 mb-6">Design Faster with Components</h1>
      <p class="text-lg text-gray-600 mb-8">Pre-built Tailwind CSS recipes to speed up your development workflow.</p>
      <div class="flex gap-4">
        <a href="#" class="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 transition-colors">Get Started</a>
        <a href="#" class="px-6 py-3 border border-gray-300 text-gray-700 font-semibold rounded-lg hover:bg-gray-50 transition-colors">Learn More</a>
      </div>
    </div>
    <div class="bg-gradient-to-br from-indigo-100 to-purple-100 rounded-2xl h-80 flex items-center justify-center text-6xl">&#127912;</div>
  </div>
</section>

Color Breakdown

Background

bg-white

#ffffff

Title

text-gray-900

#111827

Subtitle

text-gray-600

#4b5563

Primary Button

bg-indigo-600

#4f46e5

Illustration BG Start

from-indigo-100

#e0e7ff

Illustration BG End

to-purple-100

#f3e8ff

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-gray-900 dark:text-white dark:text-gray-300

Use Cases

Product landing pagesApp marketing sitesAgency homepages

Browser Support

All modern browsers. CSS Grid supported in all evergreen browsers.

Related Recipes

Split Button

button - intermediate

Image Overlay Card

card - intermediate

Feature Card

card - beginner

Gradient Hero Section

section - beginner

Dark Hero Section

section - intermediate

Feature Grid Section

section - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How does this hero stack on mobile?▼

The grid-cols-1 class makes both columns stack vertically on small screens, while lg:grid-cols-2 splits them on large screens.