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

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

Standard Hero

Author:
Anonymous

1 year ago

3.9k
Food App Web design

Author:
Aitrik Saha

9 months ago

1.6k
Hero section
Beatiful landing page hero section

Author:
Rajesh Maheshwari

10 months ago

2.1k
landi page template

Author:
Raul antonio de la cruz hernandez

1 day ago

19
heroimage
svg and hero image, basic html code

Author:
Anonymous

6 months ago

424
Hero Slider with Alpine.js
This responsive hero slider features full-screen image backgrounds with elegant text overlays and smooth transitions.

Author:
Juraj

7 months ago

1.8k
animated hero

Author:
Crimson

11 months ago

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

10 months ago

962
PortfoClean & Colorful Hero Section for Developer Portfolios (Tailwind CSS + Dark Mode)

Author:
SAI BENDE

4 months ago

575
MovieTrade
"About Us" section you can add to your movie trading website, designed in Tailwind CSS. This section explains your platform’s mission, features, and team (if applicable).

Author:
INGRIDE MUZIRANENGE

7 months ago

1.1k
Hero Section Fashion Page

Author:
ABDO-SY

9 months ago

954
Clean hero section
Hero template with buttons

Author:
Laurits

2 years ago

15.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components