Home
Anonymous
Hero section for website

Hero section for website

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

Hero

Author Anonymous

1.1k

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-dark from-blue-600-500 uppercase">We Are Netplatoon Ventures</p>
        <h1 class="my-3 text-3xl font-bold tracking-tight text-gray-800 md:text-5xl dark:text-gray-100">
            The IT Department 
            You Wish You Had.
        </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="">Schedule A Consultation
            </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="">See Our Services
            </a>
        </div>
    </div>
</div>

Related Examples

Animated bento box.
A Coastal UI component (coastalui.com). This can be used as part of a bento box, great for showing connectivity between context, could be used beyond just showing tech stacks.

Author:
Coastal UI

1 month ago

432
Advance Designed hero section
We create a Advance animated hero section using tailwindcss and custom css

Author:
Akram Khan

9 months ago

1.5k
Hero Section
Home hero section search bar

Author:
Samuel Abera

1 year ago

6.1k
Welcome banner for developers portfolio
A hero section welcoming visitors to a portfolio or website. It features a large, visually appealing title and an image.

Author:
Vikram Choudhary

1 year ago

9.3k
Hero template

Author:
Leon Bachmann

2 years ago

11.9k
Background image section

Author:
Marc

1 year ago

5.3k
Hero with video background

Author:
Samuel Dawson

2 years ago

14.7k
Hero with video background

Author:
farisubuntu

6 months ago

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

Author:
Dipti narayan

1 year ago

9.3k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

2 months ago

532
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Author:
Junclarkaizen Pagu

1 year ago

10.4k
Responsive hero section

Author:
Amit Pachange

2 years ago

13.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components