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

10.8k

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

2 years ago

12.6k
Hero section with big heading

Author:
Leon Bachmann

2 years ago

10.7k
Hero template

Author:
Leon Bachmann

2 years ago

11.9k
Hero with description

Author:
Laurits

2 years ago

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

Author:
Anonymous

1 year ago

17.2k
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

8 months ago

1.2k
Hero

Author:
ABDO-SY

1 month ago

473
Hero Section
Home hero section search bar

Author:
Samuel Abera

1 year ago

6.1k
HERO

Author:
ABDO-SY

2 weeks ago

92
beautifull web page
I create a web page using cloude ai its amazing.

Author:
Akram Khan

9 months ago

2.1k
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

10 months ago

3.4k
Hero section for website

Author:
Anonymous

7 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components