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

878

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

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

Author:
ORGIN_DREAMS

3 weeks ago

85
Portfolio Hero Section 5

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

2 months ago

709
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

11 months ago

1.5k
Design
by salvator

Author:
Baraka Salvator

2 weeks ago

36
A Fullscreen Hero Section

Author:
Hasan AlDoy (McDoy)

4 months ago

722
Hero

Author:
Aman kumar

1 year ago

6.1k
hero section

Author:
SAURAV SINGH

1 month ago

239
Hero component

Author:
Freja Jensen

2 years ago

12.4k
Background image section

Author:
Charlotte Dupont

2 years ago

17.6k
Standard Hero

Author:
Anonymous

1 year ago

3.2k
Hero block with image

Author:
Simon Scheffer

2 years ago

13.5k
A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Author:
Acode Master(Mfuranziza Dusabe Hamza)

4 days ago

38

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components