Home
Mohit Prajapati
Hero section

Hero section

This tailwind example is contributed by Mohit Prajapati, on 17-Sep-2022. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are CTA,banner

Call to Action Hero

Author Mohit Prajapati

12.1k

Fork Fullscreen

<section class="text-gray-600 body-font">
    <div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
        <div
            class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
            <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">Before they sold out
                <br class="hidden lg:inline-block">readymade gluten
            </h1>
            <p class="mb-8 leading-relaxed">Copper mug try-hard pitchfork pour-over freegan heirloom neutra air plant
                cold-pressed tacos poke beard tote bag. Heirloom echo park mlkshk tote bag selvage hot chicken authentic
                tumeric truffaut hexagon try-hard chambray.</p>
            <div class="flex justify-center">
                <button class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">Button</button>
                <button class="ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg">Button</button>
            </div>
        </div>
        <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
            <img class="object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600">
        </div>
    </div>
</section>

Related Examples

Product Page
Showcase for the product.

Author:
Prem..

3 years ago

30.9k
Hero section with call to action buttons

Author:
Prashant

3 years ago

14.7k
Hero section with image

Author:
Sophia Baker

2 years ago

12.4k
Beautiful Hero Section

Author:
Brandon D

3 years ago

14.7k
Hero block with image

Author:
Simon Scheffer

2 years ago

14.1k
Hero banner

Author:
Piet Vriend

2 years ago

16.2k
Call to action section with image

Author:
Emily Tan

2 years ago

11.6k
Hero section with a gradient background
With text overlay, and a call-to-action button

Author:
Anonymous

2 years ago

19k
CTA with image

Author:
Fagundo67

2 years ago

9.6k
Call to Action section
CTA with clear message and big button

Author:
Curtis Bickler

11 months ago

1.5k
Bug Beach Day Heatwave
This playful animation brings sweltering summer insects to life with pure HTML and Tailwind CSS. Watch as: 🔥 Glowing Fireflies pulse with heat-radiant light, their wings shimmering in the desert sun 🐞 Overheated Ladybugs scuttle across cracked earth, their red shells reflecting the blazing heat ☀️ A Wobbling Sun dominates the sky, emitting pulsing heat waves across the animated landscape

Author:
Bonimater

3 months ago

734
Basic CTA section

Author:
Lîmåã M

2 years ago

12.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components