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

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 Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Author:
Abdul Baset Bappy

4 weeks ago

123
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

Author:
Samuel Abera

10 months ago

4.1k
Portfolio Hero Section 5

Author:
Samuel Abera

3 weeks ago

289
Premium SAAS HERO Section
A hero section for your SAAS application

Author:
Emdadul Islam

10 months ago

2k
Hero Section
Home hero section search bar

Author:
Samuel Abera

1 year ago

6.3k
Hero

Author:
Hasan AlDoy (McDoy)

3 months ago

822
Hero section responsive

Author:
Samuel Dawson

2 years ago

14k
A hero component
It has a gradient background, a large title with a creative emphasis, and a call-to-action button.

Author:
Vikram Choudhary

1 year ago

8.2k
Tailwind Pricing Section 2
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

8 months ago

1.3k
Hero template

Author:
Leon Bachmann

2 years ago

12k
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

2 months ago

545
Managing Finance Hero
Create a modern and responsive Hero Section using TailwindCSS. This section features a bold headline, a subheading, and a call-to-action button, designed to grab user attention instantly. With a clean layout, engaging typography, and a visually appealing background, this hero section enhances the first impression of your website. Ideal for landing pages, e-commerce, and SaaS platforms, it ensures a seamless experience across all devices.

Author:
SHARIFUL ISLAM

2 months ago

191

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components