Home
ABDO-SY
Hero

Hero

This tailwind example is contributed by ABDO-SY, on 04-Mar-2025. Component is made with Tailwind CSS v3.

Hero

116

<section class=" w-full  bg-[#0A2025] py-9 px-8">
  <div class="mx-auto flex  flex-col items-center lg:flex-row justify-center gap-10 py-40 max-w-[1440px] bg-no-repeat ">
    <div class="w-[660px]  flex-col justify-center items-start gap-20 inline-flex">
      <div class="self-stretch  flex-col justify-start items-start gap-5 flex">
        <h1 class="self-stretch">
          <span class="text-white text-5xl font-bold font-['Roboto']">Redefining Motion:</span><span class="text-[#3e9d26] text-5xl font-bold font-['Roboto']">The Future of Footwear is Here</span>
        </h1>
        <p class="self-stretch text-white text-xl font-normal font-['Roboto']">Experience unparalleled comfort and
          innovative design with our state-of-the-art, futuristic sports shoes. Built for champions, designed for you.
        </p>
      </div>
      <div class="justify-start items-center gap-5 inline-flex">
        <div class="justify-start items-center gap-2.5 flex">
          <p class="text-white text-sm font-normal font-['Roboto']">Step into the Future</p>
          <div data-svg-wrapper="true" class="relative"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path
                d="M20.7806 12.5306L14.0306 19.2806C13.8899 19.4213 13.699 19.5004 13.5 19.5004C13.301 19.5004 13.1101 19.4213 12.9694 19.2806C12.8286 19.1399 12.7496 18.949 12.7496 18.75C12.7496 18.551 12.8286 18.3601 12.9694 18.2194L18.4397 12.75H3.75C3.55109 12.75 3.36032 12.671 3.21967 12.5303C3.07902 12.3897 3 12.1989 3 12C3 11.8011 3.07902 11.6103 3.21967 11.4697C3.36032 11.329 3.55109 11.25 3.75 11.25H18.4397L12.9694 5.78061C12.8286 5.63988 12.7496 5.44901 12.7496 5.24999C12.7496 5.05097 12.8286 4.8601 12.9694 4.71936C13.1101 4.57863 13.301 4.49957 13.5 4.49957C13.699 4.49957 13.8899 4.57863 14.0306 4.71936L20.7806 11.4694C20.8504 11.539 20.9057 11.6217 20.9434 11.7128C20.9812 11.8038 21.0006 11.9014 21.0006 12C21.0006 12.0986 20.9812 12.1961 20.9434 12.2872C20.9057 12.3782 20.8504 12.461 20.7806 12.5306Z"
                fill="white"></path>
            </svg></div>
        </div>
        <button class="px-8 py-2.5 bg-[#3e9d26] rounded-[10px] justify-center items-center gap-2.5 flex text-white text-sm font-semibold font-['Roboto']">Shop Now</button>
      </div>
    </div><img class="w-full max-w-[400px]" src="https://iili.io/338c9je.png" alt="">
  </div>
</section>

Related Examples

Clean hero section
Hero template with buttons

Author:
Laurits

1 year ago

13.8k
Clean hero section

Author:
OmKar Mehta

11 months ago

2.1k
Hero template

Author:
Leon Bachmann

2 years ago

11.5k
Advance Designed hero section
We create a Advance animated hero section using tailwindcss and custom css

Author:
Akram Khan

8 months ago

1.3k
Modern SAAS HERO Section
A hero section for your SAAS application

Author:
Emdadul Islam

9 months ago

1.6k
Hero section for website

Author:
Leon Bachmann

2 years ago

10.5k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

1 month ago

556
Hero w/ navbar
the modern and clean hero section

Author:
Carla Hoffman

1 year ago

3.5k
Hero Section>> visually striking and incorporates some different elements.
Key features of this alternative hero section: 1. Background: - Uses a gradient overlay on top of a background image for depth. - Incorporates a semi-transparent dark overlay for better text contrast. 2. Layout: - Maintains a two-column layout on larger screens, stacking on mobile. - Left side focuses on a bold, three-line tagline and concise description. - Right side features a glassmorphic card with key selling points. 3. Design Elements: - Uses a custom Google Font (Poppins) for a modern look. - Incorporates rounded buttons with hover effects. - Features colorful icons for the selling points. - Adds a decorative wave SVG at the bottom for visual interest. 4. Responsiveness: - Adjusts padding, font sizes, and layout for different screen sizes. - Stacks buttons vertically on very small screens. 5. Interactivity: - Includes hover effects on buttons and links. This design aims to create a more visually impactful first impression while still maintaining clarity and focus on the key messages and call-to-action elements. The use of a background image with overlays adds depth, while the glassmorphic card on the right adds a modern touch. You can further customize this by: - Changing the background image URL to one that fits your brand. - Adjusting colors in the gradient, buttons, and icons to match your brand colors. - Modifying the tagline, description, and selling points to fit your company's message. Would you like me to explain any part of this code or make any further adjustments?

Author:
zobaidul kaziex

8 months ago

3.6k
Hero section in react js
hero portfolio section in react js

Author:
SAI BENDE

10 months ago

3.4k
Hero section with youtube video preview

Author:
Piet Vriend

1 year ago

10.8k
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

Author:
Samuel Abera

11 months ago

3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components