Use these Tailwind CSS hero section examples to add important messaging, product photos, and call-to-actions to the top of your website. These hero examples include a variety of different styles and layouts.
"use client";
import { ArrowRight, ClipboardCheck, Menu, Zap } from "lucide-react";
import { Badge, Button, Nav, Navbar, Text } from "@hummingbirdui/react";
import { cn } from "@hummingbirdui/react/utils";
const stats = [
{
value: "200+",
label: "Project Completed",
className: "bg-primary/16 text-primary-dark",
},
{
value: "400+",
label: "Happy clients",
className: "bg-success/16 text-success-dark",
},
{
value: "300+",
label: "Unique Design",
className: "bg-secondary/16 text-secondary-dark",
},
];
export default function Hero1() {
return (
<>
<Navbar
expand="lg"
className="max-w-7xl mx-auto px-6 md:px-10 py-5 justify-between"
>
<div className="flex items-center gap-2">
<Navbar.Toggle className="btn btn-icon">
<Menu className="size-4.5" />
</Navbar.Toggle>
<Navbar.Brand href="#" className="flex items-center gap-2 me-0">
<img
src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/c2a66a70db897fd0d89ea72e7cbab1d3c06a93e2/apps/docs/src/assets/images/logos/hb-logo1.svg"
alt="Logo"
className="size-10"
/>
<Text as="h5" className="text-muted max-sm:hidden">
hummingbird
</Text>
</Navbar.Brand>
</div>
<div className="lg:w-46.5 lg:order-1 text-end">
<Button asChild color="neutral" className="px-8">
<a href="#">Sign Up</a>
</Button>
</div>
<Navbar.Collapse className="py-6 lg:py-0 grow-0 bg-default rounded-lg">
<Navbar.Nav asChild className="lg:gap-8">
<div>
<Nav.Link href="#" active>
Home
</Nav.Link>
<Nav.Link href="#">Features</Nav.Link>
<Nav.Link href="#">Pricing</Nav.Link>
<Nav.Link href="#">Contact</Nav.Link>
</div>
</Navbar.Nav>
</Navbar.Collapse>
</Navbar>
<div className="py-6 lg:py-10 max-w-7xl mx-auto px-6 md:px-10">
<div className="grid lg:grid-cols-2 mb-6">
<div className="max-lg:text-center">
<Badge
variant="subtle"
color="primary"
className="mb-8 py-1.25 pe-2.5"
>
<Zap className="size-3" fill="currentColor" />
Design. Inspire. Transform
</Badge>
<Text
as="h1"
size="5xl"
fontWeight="semibold"
className="md:text-6xl lg:text-7xl mb-6"
>
Interior Design <br className="sm:hidden lg:block" /> that{" "}
<span className="text-primary">Inspires</span>
</Text>
<Text size="base" className="lg:max-w-xl mb-10">
Transform your home with our expertly designed interiors that
combine contemporary style, classic charm, and cozy functionality.
We craft spaces that are not just visually appealing but also
inviting and tailored to your way of living.
</Text>
<Button color="neutral" size="lg">
Start Project
<ArrowRight className="size-6" />
</Button>
<div className="sm:flex items-center max-lg:justify-between gap-2.5 xl:gap-7 mt-16 max-lg:mb-12">
{stats.map((stat, index) => (
<div key={stat.label} className="contents">
{index > 0 && (
<div className="sm:h-10 border-b max-sm:my-2.5 sm:border-s border-default" />
)}
<div className="flex items-center gap-4">
<div
className={cn(
"size-9.25 flex items-center justify-center rounded-lg",
stat.className,
)}
>
<ClipboardCheck className="size-5" />
</div>
<div>
<Text as="h4" className="mb-1">
{stat.value}
</Text>
<Text size="xs" className="text-muted mb-0">
{stat.label}
</Text>
</div>
</div>
</div>
))}
</div>
</div>
<div className="lg:w-max ms-auto relative">
<img
className="w-65 rounded-3xl ms-auto hidden lg:block"
src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?q=80&w=958&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
/>
<img
className="lg:w-98 rounded-3xl ms-auto lg:-mt-15 lg:me-13"
src="https://images.unsplash.com/photo-1631679706909-1844bbd07221?q=80&w=1392&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
/>
<div className="w-63 h-48 bg-primary-lighter rounded-2xl absolute bottom-0 right-3 -z-1" />
</div>
</div>
</div>
</>
);
}"use client";
import { Star } from "lucide-react";
import { Avatar, Badge, Button, Text } from "@hummingbirdui/react";
const avatars = [
"/images/avatar/avatar_1.webp",
"/images/avatar/avatar_2.webp",
"/images/avatar/avatar_3.webp",
"/images/avatar/avatar_4.webp",
];
export default function Hero2() {
return (
<div className="h-full gap-6 flex relative">
<div className="max-w-4xl py-20 px-6 flex flex-col items-center lg:items-start justify-center text-center lg:text-start">
<a className="flex items-center gap-2 no-underline mb-12" href="#">
<img
src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/c2a66a70db897fd0d89ea72e7cbab1d3c06a93e2/apps/docs/src/assets/images/logos/hb-logo1.svg"
alt="Logo"
className="w-8 h-8"
/>
<Text as="h6" fontWeight="semibold" className="mb-0 text-muted flex">
hummingbird
</Text>
</a>
<Badge variant="outline" color="primary" className="px-2 py-1.5 mb-10">
Launch better products, faster
</Badge>
<Text
as="h1"
size="5xl"
fontWeight="semibold"
className="md:text-7xl leading-none mb-6"
>
Future of your digital business
</Text>
<Text className="md:text-lg text-muted">
Accelerate development with tools that eliminate repetitive tasks,
reduce complexity, and provide the flexibility needed to grow your
product as your business evolves.
</Text>
<div className="flex items-center justify-center gap-4 mb-14 ms-3">
<Avatar.Group className="justify-center">
{avatars.map((src) => (
<Avatar key={src} size="sm">
<Avatar.Image src={src} alt="Avatar" />
</Avatar>
))}
<Avatar size="sm">
<Avatar.Fallback className="bg-primary text-base">
<span>+99</span>
</Avatar.Fallback>
</Avatar>
</Avatar.Group>
<div className="border-l border-subtle ps-4">
<Text size="xs" className="text-muted mb-0">
trusted by clients
</Text>
<div className="flex">
{Array.from({ length: 5 }, (_, index) => (
<Star
key={index}
className="size-4.5 text-warning"
fill="currentColor"
/>
))}
</div>
</div>
</div>
<div className="flex gap-3">
<Button asChild size="lg">
<a href="#">Get started</a>
</Button>
<Button asChild color={null} size="lg">
<a href="#">View docs</a>
</Button>
</div>
</div>
<img
className="hidden lg:block w-[47vw] object-cover"
src="https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?q=80&w=1055&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
/>
</div>
);
}"use client";
import { Menu, Star } from "lucide-react";
import { Avatar, Badge, Button, Nav, Navbar, Text } from "@hummingbirdui/react";
const navLinks = ["Home", "Features", "Pricing", "Company"];
const avatars = [
"/images/avatar/avatar_1.webp",
"/images/avatar/avatar_2.webp",
"/images/avatar/avatar_3.webp",
"/images/avatar/avatar_4.webp",
];
const brands = [
{
src: "https://www.adobe.com/federal/assets/svgs/adobe-logo.svg",
className: "size-20 mx-auto",
},
{
src: "https://static.xx.fbcdn.net/rsrc.php/y9/r/tL_v571NdZ0.svg",
className: "size-20 mx-auto",
},
{
src: "https://themewagon.com/wp-content/uploads/2021/03/Frame-172-1.png",
className: "h-8 mx-auto",
},
{
src: "https://onesuite.io/wp-content/uploads/2024/09/OneSuite-Logo.png",
className: "h-12 hidden md:block mx-auto",
},
{
src: "https://onedesk.so/_astro/logo.BAosC44E.png",
className: "h-4 hidden md:block mx-auto",
},
];
export default function Hero3() {
return (
<div>
<div className="border-b border-subtle">
<Navbar expand="lg" className="max-w-7xl mx-auto px-6 md:px-10 py-4">
<div className="flex items-center gap-2 me-8">
<Navbar.Toggle className="btn btn-icon">
<Menu className="size-4.5" />
</Navbar.Toggle>
<Navbar.Brand href="#" className="flex items-center gap-2 me-0">
<img
src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/c2a66a70db897fd0d89ea72e7cbab1d3c06a93e2/apps/docs/src/assets/images/logos/hb-logo1.svg"
alt="Logo"
className="w-8 h-8"
/>
<Text
as="h5"
fontWeight="semibold"
className="mb-0 max-sm:hidden"
>
hummingbird
</Text>
</Navbar.Brand>
</div>
<Button className="rounded-full px-6 md:px-10 lg:order-1">
Login
</Button>
<Navbar.Collapse>
<Navbar.Nav className="me-auto mb-2 lg:mb-0">
{navLinks.map((link, index) => (
<Nav.Item key={link}>
<Nav.Link href="#" active={index === 0}>
{link}
</Nav.Link>
</Nav.Item>
))}
</Navbar.Nav>
</Navbar.Collapse>
</Navbar>
</div>
<div className="max-w-7xl mx-auto py-15 px-6">
<div className="max-w-4xl text-center mx-auto">
<Badge variant="outline" color="primary" className="px-2 py-1.5 mb-8">
Launch better products, faster
</Badge>
<Text
as="h1"
size="5xl"
fontWeight="semibold"
className="leading-none mb-6"
>
Future of digital business
</Text>
<Text>
Accelerate development with tools that eliminate repetitive tasks,
reduce complexity, and provide the flexibility needed to grow your
product as your business evolves.
</Text>
<div className="flex items-center justify-center gap-4 mb-14 ms-3">
<Avatar.Group className="justify-center">
{avatars.map((src) => (
<Avatar key={src} size="sm">
<Avatar.Image src={src} alt="Avatar" />
</Avatar>
))}
<Avatar size="sm">
<Avatar.Fallback className="bg-primary text-base">
<span>+99</span>
</Avatar.Fallback>
</Avatar>
</Avatar.Group>
<div className="border-l border-subtle ps-4">
<Text size="xs" className="text-muted mb-0">
trusted by clients
</Text>
<div className="flex">
{Array.from({ length: 5 }, (_, index) => (
<Star
key={index}
className="size-4.5 text-warning"
fill="currentColor"
/>
))}
</div>
</div>
</div>
<div className="flex gap-3 flex-wrap justify-center">
<Button asChild size="lg">
<a href="#">Get started</a>
</Button>
<Button asChild color={null} size="lg">
<a href="#">View docs</a>
</Button>
</div>
</div>
<div className="max-w-5xl mx-auto p-3 rounded-2xl shadow my-10">
<img
className="h-75 object-cover w-full rounded-2xl"
src="https://images.unsplash.com/photo-1603201667141-5a2d4c673378?q=80&w=2096&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
/>
</div>
<div className="grid grid-cols-3 md:grid-cols-5 max-w-5xl gap-6 mx-auto items-center text-center">
{brands.map((brand) => (
<img
key={brand.src}
src={brand.src}
alt=""
className={brand.className}
/>
))}
</div>
</div>
</div>
);
}"use client";
import { ChevronRight, Menu, Search, ShoppingCart } from "lucide-react";
import { Button, Nav, Navbar, Text } from "@hummingbirdui/react";
import { cn } from "@hummingbirdui/react/utils";
const navLinks = ["Home", "Features", "Pricing", "Company"];
const offers = [
{
title: "Whooping 60% Off",
subtitle: "on everyday items",
action: "Shop",
color: "warning",
image:
"https://images.unsplash.com/photo-1772182104431-5a00158fd8e2?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
className: "lg:col-span-2",
},
{
title: "Get 20% Off",
subtitle: "on iPhone 17",
action: "Buy",
color: "primary",
image:
"https://images.unsplash.com/photo-1758186334264-d1ab8a079aa2?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
className: "",
},
{
title: "Smart watch 15% Off",
subtitle: "for today",
action: "Buy",
color: "info",
image:
"https://images.unsplash.com/photo-1434493789847-2f02dc6ca35d?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
className: "",
},
] as const;
const titleColors = {
warning: "text-warning",
primary: "text-primary",
info: "text-info",
};
export default function Hero4() {
return (
<>
<div className="border-b border-subtle">
<Navbar expand="lg" className="max-w-7xl mx-auto px-6 py-4">
<div className="flex items-center gap-2 me-8">
<Navbar.Toggle className="btn btn-icon">
<Menu className="size-4.5" />
</Navbar.Toggle>
<Navbar.Brand href="#" className="flex items-center gap-2 me-0">
<img
src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/c2a66a70db897fd0d89ea72e7cbab1d3c06a93e2/apps/docs/src/assets/images/logos/hb-logo1.svg"
alt="Logo"
className="w-8 h-8"
/>
<Text
as="h5"
fontWeight="semibold"
className="mb-0 hidden sm:block"
>
hummingbird
</Text>
</Navbar.Brand>
</div>
<div className="flex gap-2 lg:order-1">
<Button variant="subtle" shape="circle" aria-label="Search">
<Search className="size-4.5" />
</Button>
<Button variant="subtle" shape="circle" aria-label="Cart">
<ShoppingCart className="size-4.5" />
</Button>
</div>
<Navbar.Collapse>
<Navbar.Nav className="me-auto mb-2 lg:mb-0">
{navLinks.map((link, index) => (
<Nav.Item key={link}>
<Nav.Link href="#" active={index === 0}>
{link}
</Nav.Link>
</Nav.Item>
))}
</Navbar.Nav>
</Navbar.Collapse>
</Navbar>
</div>
<div className="max-w-7xl mx-auto px-6 pt-10 pb-6">
<div className="md:flex items-center justify-between gap-4 mb-10">
<Text as="h2" fontWeight="normal" className="mb-6 md:mb-0">
Refined Design for a Modern Lifestyle.
</Text>
<Button asChild size="lg" className="rounded-full text-nowrap">
<a href="#">
Shop now
<ChevronRight className="size-4.5" />
</a>
</Button>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{offers.map((offer) => (
<div
key={offer.title}
className={cn(
"h-100 rounded-2xl overflow-hidden relative",
offer.className,
)}
>
<img
src={offer.image}
alt=""
className="h-full w-full object-cover"
/>
<div className="absolute inset-0 bg-linear-to-t from-black to-transparent p-8 flex justify-end items-start flex-col">
<Text
as="h3"
fontWeight="medium"
className={cn(
"max-md:text-2xl mb-0",
titleColors[offer.color],
)}
>
{offer.title}
</Text>
<Text as="span" size="lg" className="text-white">
{offer.subtitle}
</Text>
<Button
asChild
color={offer.color}
size="lg"
className="px-8 mt-6 rounded-full"
>
<a href="#">{offer.action}</a>
</Button>
</div>
</div>
))}
</div>
</div>
</>
);
}"use client";
import { Calendar, Menu, Search, Users } from "lucide-react";
import { useRef, useState } from "react";
import {
Button,
Dropdown,
Field,
Input,
InputIcon,
Nav,
Navbar,
Text,
} from "@hummingbirdui/react";
const navLinks = ["Home", "Features", "Pricing", "Contact"];
const guestOptions = ["1 Person", "2 Persons", "3 Persons"];
export default function Hero5() {
const dateRef = useRef<HTMLInputElement>(null);
const [guests, setGuests] = useState(guestOptions[0]);
return (
<div className="bg-[url(https://images.unsplash.com/photo-1645033393602-4f7623917853?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)] bg-no-repeat bg-cover bg-center h-screen">
<div className="bg-linear-to-r from-black/90 to-black/20 w-full h-full absolute top-0 left-0" />
<div className="max-w-7xl mx-auto px-6 md:px-10 h-full flex flex-col justify-between relative z-1">
<Navbar expand="lg" className="px-0 py-5 justify-between">
<div className="flex items-center gap-2">
<Navbar.Toggle className="btn btn-icon">
<Menu className="size-4.5" />
</Navbar.Toggle>
<Navbar.Brand href="#" className="flex items-center gap-2 me-0">
<img
src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/c2a66a70db897fd0d89ea72e7cbab1d3c06a93e2/apps/docs/src/assets/images/logos/hb-logo1.svg"
alt="Logo"
className="size-10"
/>
<Text
as="h5"
fontWeight="medium"
className="text-white hidden sm:block"
>
hummingbird
</Text>
</Navbar.Brand>
</div>
<div className="lg:w-46.5 lg:order-1 text-end">
<Button asChild className="rounded-full px-6">
<a href="#">Sign Up</a>
</Button>
</div>
<Navbar.Collapse className="py-6 lg:py-0 grow-0">
<Navbar.Nav asChild className="lg:gap-8">
<div>
{navLinks.map((link, index) => (
<Nav.Link
key={link}
href="#"
active={index === 0}
className="text-white/70 active:text-white"
>
{link}
</Nav.Link>
))}
</div>
</Navbar.Nav>
</Navbar.Collapse>
</Navbar>
<div className="max-w-3xl py-16">
<Text as="h1" size="4xl" className="sm:text-6xl mb-6 text-white">
Let's Explore Now
</Text>
<Text size="base" className="mb-10 text-white">
A fast, reliable and easy way to search, compare and book flights,
hotels, cars and vacation packages online. Get best deals on hotels,
flights and car rentals from trusted travel providers worldwide.
</Text>
<form className="sm:flex items-center bg-white/16 p-4 border border-white/24 rounded-2xl">
<div className="grid grid-cols-1 sm:grid-cols-3 w-full">
<div className="max-sm:border-b max-sm:pb-4 max-sm:mb-6 sm:border-e border-white/24 sm:me-6 md:me-10">
<Field.Label
htmlFor="hero-5-destination"
className="text-white"
>
Where To?
</Field.Label>
<Input
id="hero-5-destination"
type="text"
className="px-0 border-0 bg-transparent focus:border-primary focus:ring-0 text-white"
placeholder="Destination"
/>
</div>
<div className="max-sm:border-b max-sm:pb-4 max-sm:mb-6 sm:border-e border-white/24 sm:me-6 md:me-10">
<Field.Label htmlFor="hero-5-check-in" className="text-white">
Check-in Date
</Field.Label>
<InputIcon>
<InputIcon.Start
onClick={() => dateRef.current?.showPicker()}
className="text-white cursor-pointer inset-s-0"
>
<Calendar className="size-4" />
</InputIcon.Start>
<Input
ref={dateRef}
id="hero-5-check-in"
type="date"
onClick={(event) => event.currentTarget.showPicker()}
className="ps-6 pe-0 border-0 bg-transparent focus:border-primary focus:ring-0 text-white cursor-pointer [&::-webkit-calendar-picker-indicator]:hidden"
placeholder="MM/DD/YY"
/>
</InputIcon>
</div>
<div className="max-sm:border-b max-sm:pb-4 max-sm:mb-6 sm:border-e border-white/24 sm:me-6 md:me-10">
<Field.Label className="text-white">
Number of Guests
</Field.Label>
<Dropdown>
<Dropdown.Trigger asChild>
<Button
variant="subtle"
color="neutral"
className="p-0 bg-transparent text-white py-1.75 font-normal"
>
<Users className="size-3.5" />
{guests}
</Button>
</Dropdown.Trigger>
<Dropdown.Content align="start">
{guestOptions.map((option) => (
<Dropdown.Item
key={option}
onSelect={() => setGuests(option)}
>
{option}
</Dropdown.Item>
))}
</Dropdown.Content>
</Dropdown>
</div>
</div>
<Button type="submit" size="lg" className="w-30 px-2">
<Search className="size-5" />
Search
</Button>
</form>
</div>
</div>
</div>
);
}