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

685

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

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

Author:
Amit Pachange

1 year ago

13.8k
Product Page
Showcase for the product.

Author:
muhamadrofii911

1 year ago

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

1 year ago

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

8 months ago

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

Author:
Ameth Galarcio

8 months ago

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

Author:
ORGIN_DREAMS

5 months ago

511
Hero

Author:
ORGIN_DREAMS

5 months ago

895
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

175
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

Author:
AKASH GANDHAR

1 year ago

4.6k
Game changer
by salvator

Author:
Baraka Salvator

5 months ago

623
Responsive Hero Section
A clean and responsive hero section built with Tailwind CSS using a flexbox layout. Features a circular profile image, two action buttons ("Say Hello" and "View Projects"), and mobile-friendly design. Includes basic JavaScript interaction with a button.

Author:
Sudip chaudhary

5 months ago

400

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components