Hero section for website

This tailwind example is contributed by Leon Bachmann, on 19-Jan-2023. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Hero

Author Leon Bachmann

Tailwind v3.4 12.4k 19

Fork Fullscreen

<div class="flex h-screen justify-center items-center dark:bg-gray-800">
    <div class="text-center max-w-6xl mx-10">
        <p class="my-3 text-sm tracking-widest text-indigo-500 uppercase">Fast &amp; SEO friendly</p>
        <h1 class="my-3 text-3xl font-bold tracking-tight text-gray-800 md:text-5xl dark:text-gray-100">
            Best Service
            Offered Here
        </h1>
        <div>
            <p class="max-w-2xl mx-auto my-2 text-base text-gray-500 md:leading-relaxed md:text-xl dark:text-gray-400">
                Introducing our latest service offering. Get started quickly and efficiently with our range of
                solutions.
                Designed to meet your needs using the latest technologies.
            </p>
        </div>
        <div class="flex flex-col items-center justify-center gap-5 mt-6 md:flex-row"><a
                class="inline-block w-auto text-center min-w-[200px] px-6 py-4 text-white transition-all rounded-md shadow-xl sm:w-auto bg-gradient-to-r from-blue-600 to-blue-500 hover:bg-gradient-to-b dark:shadow-blue-900 shadow-blue-200 hover:shadow-2xl hover:shadow-blue-400 hover:-tranneutral-y-px "
                href="">Browse All Examples
            </a>
            <a class="inline-block w-auto text-center min-w-[200px] px-6 py-4 text-white transition-all bg-gray-700 dark:bg-white dark:text-gray-800 rounded-md shadow-xl sm:w-auto hover:bg-gray-900 hover:text-white shadow-neutral-300 dark:shadow-neutral-700 hover:shadow-2xl hover:shadow-neutral-400 hover:-tranneutral-y-px"
                href="">Seach Examples
            </a>
        </div>
    </div>
</div>

Related Examples

Hero Section
Full width hero section for landing pages

Manon Daniel

4 years ago

15.2k
Hero section with big heading

Leon Bachmann

4 years ago

13k
Hero template

Leon Bachmann

3 years ago

14.7k
Hero with description

Laurits

3 years ago

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

Anonymous

3 years ago

21.2k
Hero Components

Sherry Lynne

2 months ago

102
booking room or chamber
reflesh, freedom,sleeping,good vibes, etc.........

Uwase Alliance

1 year ago

1.4k
Typical SAAS hero section

Eamon Carter

3 years ago

9.8k
Hero Section with Dark Mode
Hero Section template using Tailwind CSS. It adapts to light and dark modes using the dark: variant and still fits seamlessly under your fixed navbar.

Rathanak Phan

1 year ago

1.5k
Slide
A slide component which could be used as hero section or in a slideshow

farid

1 year ago

2.7k
Drinkware 2

Maxim

1 year ago

1.6k
Tailwind Pricing Section 2
Fully Responsive Pricing Section

AKASH GANDHAR

2 years ago

2.8k