Home
Leon Bachmann
Hero section for website

Hero section for website

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

Hero

Author Leon Bachmann

11.6k

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

Author:
Manon Daniel

3 years ago

13.6k
Hero section with big heading

Author:
Leon Bachmann

3 years ago

11.7k
Hero template

Author:
Leon Bachmann

2 years ago

13.4k
Hero with description

Author:
Laurits

2 years ago

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

Author:
Anonymous

2 years ago

19.6k
Minimalistic Hero Section with Radial Gradient for E-Commerce
This hero section features a modern radial gradient background where the center remains white and fades into a soft blue at the edges. Designed for an e-commerce website, it provides a clean, elegant, and visually appealing layout with a bold headline, a call-to-action button, and a seamless user experience. The responsive design ensures a great appearance on all screen sizes.

Author:
SHARIFUL ISLAM

9 months ago

1.3k
Hero section with sample code
Show sample code of your digital product

Author:
Dipti narayan

2 years ago

10.1k
Clean hero section

Author:
OmKar Mehta

1 year ago

3.2k
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

1 year ago

4.6k
Background image section

Author:
Marc

1 year ago

6.2k
Summer Collection 2025
Summer Collection 2025

Author:
matoleo chance

5 months ago

344
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

9 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components