hero section

This tailwind example is contributed by SAURAV SINGH, on 13-Apr-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Product Showcase, Product card

Hero Product

Author SAURAV SINGH

Tailwind v3.4 1.6k 1

Fork Fullscreen

<section class="px-6 py-20 md:py-32 bg-white dark:bg-gray-900">
    <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between space-y-10 md:space-y-0">
      
      
      <div class="md:w-1/2">
        <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
          Step Into Style <br class="hidden md:block" />
          with <span class="text-orange-500">Classic Sneakers</span>
        </h1>
        <p class="text-lg mb-8 text-gray-600 dark:text-gray-300">
          Discover comfort, quality, and elegance in every step. Perfect for every occasion.
        </p>
        <a href="#" class="bg-orange-500 hover:bg-orange-600 text-white font-semibold px-6 py-3 rounded-lg transition duration-200">
          Shop Now
        </a>
      </div>

<div class="md:w-1/2">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzJOBc888horStIw5v_cpA6OOGG39NMeDgEg&s" alt="Hero Image" class="rounded-lg shadow-lg w-full" />
      </div>
    </div>
  </section>

Related Examples

Product Page
Showcase for the product.

Prem..

4 years ago

34.7k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Amit Pachange

2 years ago

16k
Product Page
Showcase for the product.

muhamadrofii911

2 years ago

3.1k
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.

Coastal UI

1 year ago

2.4k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Ayyamperumal S

1 year ago

2.6k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Ameth Galarcio

1 year ago

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

ORGIN_DREAMS

1 year ago

1.8k
Hero

ORGIN_DREAMS

1 year ago

2.2k
e-commerce website landing page template with Tailwind CSS.
A clean, responsive e-commerce & blog template built with Tailwind CSS. Features light/dark mode, dynamic featured posts, hero, CTA, and SEO-ready sections.

Homayoun

9 months ago

1.2k
MENU OMERLINKS
MENU OMERLINKS

Omer fils ELENGA

8 months ago

627
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

5 months ago

614
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

5 months ago

470