Home
Leon Bachmann
hero section fullpage

hero section fullpage

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

Hero

Author Leon Bachmann

11.1k

19

Fork Fullscreen

<div class="h-screen flex items-center bg-green-700">

<div class="px-4 mx-auto mt-16 mb-16 max-w-7xl sm:mt-24">
        <div class="text-center">
            <h1 class="text-4xl font-extrabold tracking-tight text-gray-200 sm:text-5xl md:text-6xl font-title">
                <span class="block">Leading US-Based cycle maker</span>
                <span class="block pt-2">New Product Launch</span>
            </h1>
            <p class="max-w-md mx-auto mt-3 text-base text-gray-300 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
                Innovative technology to revolutionize industry standards,
                Available for pre-order now and shipping to customers in the coming months
            </p>
            <div class="max-w-md mx-auto mt-5 sm:flex sm:justify-center md:mt-8">

<div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
                    <a href=""
                        class="block shadow-lg w-full px-8 py-3 text-base font-medium text-gray-200 hover:text-gray-100 bg-gray-100/10 hover:bg-gray-200/30 hover:backdrop-blur-xl backdrop-blur-lg rounded-md md:py-4 md:text-lg md:px-10">
                        Pre-Book
                    </a>
                </div>
            </div>
        </div>
    </div>

</div>

Related Examples

Carousel with Tailwind CSS and Alpine.js
Simple card Carousel

Author:
Brandon D

3 years ago

30.9k
Clean hero section
Hero template with buttons

Author:
Laurits

2 years ago

14.8k
Product Page
Showcase for the product.

Author:
Prem..

3 years ago

30.9k
Typical SAAS hero section

Author:
Eamon Carter

2 years ago

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

Author:
Anonymous

2 years ago

19k
composent section presentation société
composent section presentation société

Author:
Omer fils ELENGA

1 year ago

1.5k
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

Author:
AKASH GANDHAR

1 year ago

4.4k
AcodeMaster GameZone – Play Your Favorite Games Online
AcodeMaster GameZone is a modern gaming website where you can discover, explore, and play exciting games anytime, anywhere. Designed with smooth animations and a stylish dark theme using Tailwind CSS, it offers a fast and fun experience for every gamer.

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

645
Hero section with call to action buttons

Author:
Prashant

3 years ago

14.7k
hero section

Author:
SAURAV SINGH

5 months ago

557
Brutalist Hero

Author:
threehymns

9 months ago

2k
Garden
by salvator

Author:
Baraka Salvator

3 months ago

629

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1