Home
ABDO-SY
Hero

Hero

This tailwind example is contributed by ABDO-SY, on 19-Feb-2025. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author ABDO-SY

Fork Fullscreen

<section class="mx-auto  max-w-[1440px] min-w-[280px] py-8 px-4 sm:px-8 md:px-10 lg:0px-20 ">
  <div
    class="w-full rounded-[50px] sm:rounded-[60px] md:rounded-[70px] lg:rounded-[80px] bg-[#f9b800]   flex flex-col lg:flex-row  items-center  py-6 sm:py-9 md:py-11 lg:py-14  px-2  sm:px-4 md:px-8 xl:px-16">
    <img class="w-full lg:w-1/2 xl:w-full max-w-[550px] lg:order-2" src="https://iili.io/2ysFUen.png" alt="">
    <div class="text-center md:text-left">
      <h1
        class="text-4xl leading-[48px] md:text-5xl md:leading-[58px] lg:text-[50px] lg:leading-[70px] font-bold mb-6 md:mb-12">
        Elevate Your Style with Modern Design.
      </h1>
      <span class="text-xl leading-[34px] underline font-semibold sm:text-[24px] mb-3 mt-5">
                  Discover Unique Creations!

</span><br>
      <p class="text-xl leading-[27px]  font-normal sm:text-[24px] mb-8 md:mb-12">
        Explore innovative designs crafted with precision and elegance to enhance your lifestyle.

</p>
      <button class="w-full flex items-center  justify-between outline-gray-600 max-w-[350px] text-xl  font-bold sm:text-lg  rounded-[38px] bg-[#262626] text-white py-4 px-6 sm:px-9"><span>
Get Started        
        </span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff" height="20px" width="20px" version="1.1" viewBox="0 0 330 330" xml:space="preserve"><path id="XMLID_27_" d="M15,180h263.787l-49.394,49.394c-5.858,5.857-5.858,15.355,0,21.213C232.322,253.535,236.161,255,240,255  s7.678-1.465,10.606-4.394l75-75c5.858-5.857,5.858-15.355,0-21.213l-75-75c-5.857-5.857-15.355-5.857-21.213,0  c-5.858,5.857-5.858,15.355,0,21.213L278.787,150H15c-8.284,0-15,6.716-15,15S6.716,180,15,180z"></path></svg></button>
    </div>
  </div>
</section>

Related Examples

Summer Collection 2025
Summer Collection 2025

Author:
matoleo chance

1 month ago

34
Game changer
by salvator

Author:
Baraka Salvator

1 month ago

242
animated hero

Author:
Crimson

5 months ago

1.9k
Slide
A slide component which could be used as hero section or in a slideshow

Author:
farid

6 months ago

1k
Pro Camera System
The Action Mode on iPhone 15 is a camera feature that provides extreme stabilization for shooting smooth, shake-free videos—ideal for fast movement or handheld filming. 🔍 Key Features: Super Stabilized Videos – Great for running, walking, or action shots. High Quality – Captures in up to 2.8K at 60fps while staying stable. Improved Low-Light Performance – Better than iPhone 14’s version. Automatic Adjustments – Detects motion and adapts accordingly.

Author:
ishimwe prince

1 month ago

166
Registration
used in personal information

Author:
Uwase Alliance

1 month ago

64
Basic hero section

Author:
Lîmåã M

2 years ago

15.8k
login form
this login form it will be used for sign in to every website

Author:
nii fanny

4 weeks ago

41
Hero with video background

Author:
farisubuntu

8 months ago

1.4k
Welcome banner for developers portfolio
A hero section welcoming visitors to a portfolio or website. It features a large, visually appealing title and an image.

Author:
Vikram Choudhary

1 year ago

9.6k
dreams
hero page by salvator

Author:
Baraka Salvator

1 month ago

219
Hero section with image

Author:
Sophia Baker

2 years ago

12.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components