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

376

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

2 years ago

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

12.5k
Product Page
Showcase for the product.

Author:
muhamadrofii911

11 months ago

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

9 months ago

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

5 months ago

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

Author:
Ameth Galarcio

5 months ago

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

Author:
ORGIN_DREAMS

2 months ago

323
Hero

Author:
ORGIN_DREAMS

2 months ago

397
Product Details Card

Author:
ABDO-SY

5 months ago

1.2k
Product card

Author:
Oliver Hansen

2 years ago

13.2k
joker
joker cyber punk

Author:
Baraka Salvator

1 month ago

430
Product Card

Author:
Arya

2 years ago

10.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components