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

1.8k

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

Hero

Author:
ariaw

3 months ago

607
Header + simple Hero Section

Author:
ABDO-SY

11 months ago

2.1k
Welcome to Cinema
The design captures the magic and glamour of cinema with a modern, interactive interface that would definitely make users stop scrolling and say "whoa!" The color scheme uses cinematic blacks and golds with vibrant accent colors, while the animations bring the interface to life without overwhelming the content

Author:
Augustin

7 months ago

638
Heade With Hero Section

Author:
Abdul Baset Bappy

7 months ago

1.1k
strawbery
by salvator

Author:
Baraka Salvator

8 months ago

857
Hero Slider with Alpine.js
This responsive hero slider features full-screen image backgrounds with elegant text overlays and smooth transitions.

Author:
Juraj

8 months ago

1.9k
onlinee
examination

Author:
Nezerwa Debora

7 months ago

572
Hero

Author:
ORGIN_DREAMS

8 months ago

1.2k
Feature Showcase + Cards
Responsive section with cards aligned using grid layout.

Author:
ABDO-SY

11 months ago

2.3k
Portfolio Hero Section 2
visually stunning and captivating hero section component for your portfolio website.

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

1 year ago

5.5k
pasta
by salvator

Author:
Baraka Salvator

7 months ago

811
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

Author:
ishimwe prince

8 months ago

992

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components