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

2 years ago

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

11k
Product Page
Showcase for the product.

Author:
muhamadrofii911

8 months ago

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

6 months ago

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

2 months ago

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

Author:
Ameth Galarcio

2 months ago

867
Hero section with a gradient background
With text overlay, and a call-to-action button

Author:
Anonymous

1 year ago

17.4k
Premium SAAS HERO Section
A hero section for your SAAS application

Author:
Emdadul Islam

10 months ago

2k
shoping products
Shopping products

Author:
Abhiraj

3 months ago

816
Landing page

Author:
Maxim

1 month ago

370
E-commerce product card withTailwind CSS

Author:
Quentin Rivers

6 months ago

1.3k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

9 months ago

2.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components