Hero

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

Hero

Author ABDO-SY

Tailwind v3.4 2.6k 3

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

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

ishimwe prince

1 year ago

1.4k
card section neon
card section neon

Omer fils ELENGA

8 months ago

1.3k
Registration
used in personal information

Uwase Alliance

1 year ago

1.6k
Login_Form
help to logging in

ineza aime stella

1 year ago

1.1k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

9 months ago

1k
Trading
used to trade something

nii fanny

1 year ago

1.2k
Travel Landing Page: Australia

Maxim

1 year ago

2.9k
mobil navigation
mobil navigation

Omer fils ELENGA

10 months ago

1.2k
SHOES SHOP
all categories of shoes like women ,men ,and children

ineza aime stella

1 year ago

1.1k
home
html , css

Hacker Development

1 year ago

2.4k
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

Augustin

1 year ago

1.3k
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.

Hezron Okoko

2 years ago

3.7k