Home
Anonymous
Standard Hero

Standard Hero

This tailwind example is contributed by Anonymous, on 09-Mar-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Hero

Author Anonymous

3.2k

Fork Fullscreen

<div class="bg-gray-900 py-20">
    <div class="container mx-auto px-6 md:px-12">
        <div class="flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 lg:w-2/3">
                <h1 class="text-4xl md:text-6xl lg:text-7xl text-white font-bold mb-6">
                    Welcome to our <br class="hidden md:block" />
                    <span class="text-indigo-500">Awesome</span> Website
                </h1>
                <p class="text-lg md:text-xl lg:text-2xl text-gray-400 mb-8">
                    We create beautiful and functional websites for businesses of all sizes.
                </p>
                <div class="flex gap-2">
                    <a href="#" class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-3 px-6 rounded-md">Get
                        Started
                    </a>
                    <a href="#" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-md">Learn
                        More
                    </a>
                </div>
            </div>
            <div class="md:w-1/2 lg:w-1/3 mt-8 md:mt-0">
                <img src="https://via.placeholder.com/500x500" alt="Hero Image" class="rounded-lg shadow-lg" />
            </div>
        </div>
    </div>
</div>

Related Examples

Hero Banner
visually striking banner section It features pattern background with using SVG

Author:
Cosimo Fazio

1 year ago

5.7k
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Author:
Muhammad Umair Arshad

2 months ago

155
Hero section for website

Author:
Leon Bachmann

2 years ago

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

Author:
ORGIN_DREAMS

1 month ago

181
Hero

Author:
Hasan AlDoy (McDoy)

5 months ago

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

Author:
Anonymous

1 year ago

18.1k
portifolio
skills

Author:
ishimwe prince

1 month ago

134
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

Author:
ABDO-SY

2 months ago

231
Portfolio Hero Section 4

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

7 months ago

2.8k
chair
by salvator

Author:
Baraka Salvator

1 month ago

187

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components