Home
SAURAV SINGH
hero section

hero section

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

Hero Product

Author SAURAV SINGH

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.

Author:
Prem..

3 years ago

33.1k
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

Author:
Amit Pachange

1 year ago

15k
Product Page
Showcase for the product.

Author:
muhamadrofii911

1 year ago

2.5k
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

1 year ago

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

Author:
Ayyamperumal S

1 year ago

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

Author:
Ameth Galarcio

1 year ago

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

Author:
ORGIN_DREAMS

9 months ago

735
Hero

Author:
ORGIN_DREAMS

9 months ago

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

Author:
Homayoun

2 months ago

528
MENU OMERLINKS
MENU OMERLINKS

Author:
Omer fils ELENGA

1 month ago

142
Minimalistic hero section

Author:
Sophia Baker

3 years ago

11.8k
hero template

Author:
Raul antonio de la cruz hernandez

1 month ago

99

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components