Hero with button

This tailwind example is contributed by Laurits, on 01-Feb-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is banner

Hero Jumbotron

Author Laurits

Tailwind v3.4 11.5k 12

Fork Fullscreen

<section class="py-8 sm:py-16 md:py-24 flex items-center justify-center">
    <div class="mx-auto max-w-[43rem]">
        <div class="text-center">
            <p class="text-lg font-medium leading-8 text-gray-500">Get your tasks done</p>
            <h1
                class="my-3 sm:my-4 md:my-8 text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold leading-10 tracking-tight text-black">
                Productivity tool for
                <span class="text-blue-700">Devs</span>
            </h1>
            <p class="text-lg leading-relaxed text-slate-500">We help you streamline your workflow by planning,
                time-boxing and executing one task at a time.
            </p>
        </div>
        <div class="mt-6 flex items-center justify-center gap-4">
            <button
                class="inline-block px-6 py-2.5 bg-blue-500 text-white font-medium text-xl leading-tight hover:bg-blue-600 cursor-pointer hover:shadow-sm focus:bg-blue-600 focus:shadow-sm focus:outline-none focus:ring-0 active:bg-blue-700 active:shadow-sm disabled:opacity-25 transition duration-150 disabled:pointer-events-none ease-in-out">
                Get started!
            </button>
        </div>
    </div>
</section>

Related Examples

Very simple hero

Laurits

3 years ago

9.7k
Yoga Coach Hero Section

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

6.7k
portifolio
skills

ishimwe prince

1 year ago

1.7k
Animated Hero Slider, different images for mobile
A hero with 2 images alternating each other every 7 seconds, zoom on scroll

Gianluca Secondo

1 year ago

2.2k
Hero with video background

Samuel Dawson

3 years ago

17.9k
DevPort
modern portifolio by salvator

Baraka Salvator

1 year ago

1.7k
A Fullscreen Hero Section

Hasan AlDoy (McDoy)

1 year ago

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

SHARIFUL ISLAM

1 year ago

2k
Intelligent AI tools built to help.
Unlock smarter workflows with AI tools designed to boost productivity, simplify tasks and help you do more with less effort.

Alif Bima Pradana

8 months ago

619
Landing page hero section UI
Modern Hero Section Design

UI-Templates

1 year ago

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

Juraj

1 year ago

2.9k
NFT Header with Hero

Abdul Baset Bappy

1 year ago

1.9k