Home
Laurits
Hero with button

Hero with button

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

Hero Jumbotron

Author Laurits

10.5k

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

Author:
Laurits

2 years ago

8.5k
Scooby’s Hello – A Tailwind CSS Cartoon Animation
A playful animation built with Tailwind CSS and minimal custom CSS, featuring a cartoon-style Scooby-inspired dog sliding in from the left, wagging its tail, and cheerfully saying "Hello!"—perfect for adding personality to a fun web project.

Author:
Bonimater

4 weeks ago

138
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

7 months ago

1.2k
No distraction search field

Author:
_Amar_

2 years ago

11.5k
Hero

Author:
ORGIN_DREAMS

1 month ago

114
less is more
less is more by salvator

Author:
Baraka Salvator

4 days ago

57
HERO

Author:
ABDO-SY

2 months ago

222
login form php
A login form is a user interface element commonly found on websites and applications. Its main purpose is to authenticate users by asking them to entecredentian

Author:
nii fanny

3 weeks ago

55
Hero $ Navigation
This is a modern, AI-focused landing page for a company called NEURALCORE that offers enterprise-grade AI solutions.

Author:
ishimwe shadad

4 weeks ago

245
hero section

Author:
Anonymous

1 year ago

9.1k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

1 month ago

247
new potifolio
How to Build a Powerful Web Developer Portfolio (With Examples!)

Author:
Augustin

4 weeks ago

265

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components