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

735

<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

Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

4 weeks ago

138
Hero Section Fashion Page

Author:
ABDO-SY

3 months ago

438
Life Tree
by salvator

Author:
Baraka Salvator

1 month ago

175
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

4 months ago

752
Modern CV Template - Stylish HTML and Tailwind CSS Design for Professionals
Download this modern CV template crafted with HTML and Tailwind CSS. Featuring a clean, stylish design and easy customization, this CV template is perfect for professionals looking to make a strong impression. Showcase your skills, experience, and education with a visually appealing and responsive layout.

Author:
Hezron Okoko

9 months ago

2.1k
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

11 months ago

2.3k
No distraction search field

Author:
_Amar_

2 years ago

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

Author:
Ameth Galarcio

4 months ago

1.1k
Hero section for website

Author:
Anonymous

9 months ago

1.1k
Hero (with dark mode)
Full-width hero section with background image overlay. Includes headline, description text and CTA buttons. Supports dark mode and responsive design.

Author:
Maxim

5 months ago

590
Banner - Hero - Splash Section

Author:
ABDO-SY

3 months ago

663
chair
by salvator

Author:
Baraka Salvator

1 month ago

182

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components