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.
<div class="navbar navbar-expand-lg max-w-7xl mx-auto px-6 md:px-10 py-5">
<a class="navbar-brand flex items-center gap-2 me-0" href="#">
<button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"></path></svg>
</button>
<img src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/c2a66a70db897fd0d89ea72e7cbab1d3c06a93e2/apps/docs/src/assets/images/logos/hb-logo1.svg" alt="Logo" class="size-10" />
<h5 class="text-muted max-sm:hidden">hummingbird</h5>
</a>
<div class="lg:w-46.5 lg:order-1 text-end"><a href="#" class="btn btn-neutral px-8">Sign Up</a></div>
<div class="collapse navbar-collapse py-6 lg:py-0 grow-0 bg-default rounded-lg" id="navbarNavAltMarkup">
<div class="navbar-nav lg:gap-8">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
<div class="py-6 lg:py-10 max-w-7xl mx-auto px-6 md:px-10">
<div class="grid lg:grid-cols-2 mb-6">
<div class="max-lg:text-center">
<div class="badge badge-subtle-primary mb-8 py-1.25 pe-2.5">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path fill="currentColor" d="m7 22l4-7.5l-8-1L15 2h2l-4 7.5l8 1L9 22z"></path>
</svg>
Design. Inspire. Transform
</div>
<h1 class="font-semibold text-5xl md:text-6xl lg:text-7xl mb-6">
Interior Design
<br class="sm:hidden lg:block" />
that
<span class="text-primary">Inspires</span>
</h1>
<p class="text-base 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.</p>
<button class="btn btn-lg btn-neutral">
Start Project
<svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path fill="currentColor" d="M16.175 13H5q-.425 0-.712-.288T4 12t.288-.712T5 11h11.175l-4.9-4.9q-.3-.3-.288-.7t.313-.7q.3-.275.7-.288t.7.288l6.6 6.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-6.6 6.6q-.275.275-.687.275T11.3 19.3q-.3-.3-.3-.712t.3-.713z"></path>
</svg>
</button>
<div class="sm:flex items-center max-lg:justify-between gap-2.5 xl:gap-7 mt-16 max-lg:mb-12">
<div class="flex items-center gap-4">
<div class="size-9.25 flex items-center justify-center rounded-lg bg-primary/16 text-primary-dark">
<svg xmlns="http://www.w3.org/2000/svg" width="1.25em" height="1.25em" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path fill="currentColor" d="M10.6 13.25L8.45 11.1q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7l2.85 2.85q.3.3.7.3t.7-.3l5.65-5.65q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h4.2q.325-.9 1.088-1.45T12 1t1.713.55T14.8 3H19q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zm7.538-14.962q.212-.213.212-.538t-.213-.537T12 2.75t-.537.213t-.213.537t.213.538t.537.212t.538-.213M5 19V5z"></path>
</svg>
</div>
<div>
<h4 class="mb-1">200+</h4>
<p class="text-muted text-xs mb-0">Project Completed</p>
</div>
</div>
<div class="sm:h-10 border-b max-sm:my-2.5 sm:border-s border-default"></div>
<div class="flex items-center gap-4">
<div class="size-9.25 flex items-center justify-center rounded-lg bg-success/16 text-success-dark">
<svg xmlns="http://www.w3.org/2000/svg" width="1.25em" height="1.25em" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path fill="currentColor" d="M10.6 13.25L8.45 11.1q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7l2.85 2.85q.3.3.7.3t.7-.3l5.65-5.65q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h4.2q.325-.9 1.088-1.45T12 1t1.713.55T14.8 3H19q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zm7.538-14.962q.212-.213.212-.538t-.213-.537T12 2.75t-.537.213t-.213.537t.213.538t.537.212t.538-.213M5 19V5z"></path>
</svg>
</div>
<div>
<h4 class="mb-1">400+</h4>
<p class="text-muted text-xs mb-0">Happy clients</p>
</div>
</div>
<div class="sm:h-10 border-b max-sm:my-2.5 sm:border-s border-default"></div>
<div class="flex items-center gap-4">
<div class="size-9.25 flex items-center justify-center rounded-lg bg-secondary/16 text-secondary-dark">
<svg xmlns="http://www.w3.org/2000/svg" width="1.25em" height="1.25em" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path fill="currentColor" d="M10.6 13.25L8.45 11.1q-.275-.275-.7-.275t-.7.275t-.275.7t.275.7l2.85 2.85q.3.3.7.3t.7-.3l5.65-5.65q.275-.275.275-.7t-.275-.7t-.7-.275t-.7.275zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h4.2q.325-.9 1.088-1.45T12 1t1.713.55T14.8 3H19q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm0-2h14V5H5zm7.538-14.962q.212-.213.212-.538t-.213-.537T12 2.75t-.537.213t-.213.537t.213.538t.537.212t.538-.213M5 19V5z"></path>
</svg>
</div>
<div>
<h4 class="mb-1">300+</h4>
<p class="text-muted text-xs mb-0">Unique Design</p>
</div>
</div>
</div>
</div>
<div class="lg:w-max ms-auto relative">
<img class="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 class="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 class="w-63 h-48 bg-primary-lighter rounded-2xl absolute bottom-0 right-3 -z-1"></div>
</div>
</div>
</div>
<div class="h-full gap-6 flex relative">
<div class="max-w-4xl py-20 px-6 flex flex-col items-center lg:items-start justify-center text-center lg:text-start">
<a class="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" class="w-8 h-8" />
<h6 class="mb-0 text-muted font-semibold flex">hummingbird</h6>
</a>
<span class="badge badge-outline-primary px-2 py-1.5 mb-10">Launch better products, faster</span>
<h1 class="text-5xl md:text-7xl font-semibold leading-none mb-6">Future of your digital business</h1>
<p class="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.</p>
<div class="flex items-center justify-center gap-4 mb-14 ms-3">
<div class="avatar-group justify-center">
<div class="avatar avatar-sm"><img src="/images/avatar/avatar_1.webp" alt="Avatar" /></div>
<div class="avatar avatar-sm"><img src="/images/avatar/avatar_2.webp" alt="Avatar" /></div>
<div class="avatar avatar-sm"><img src="/images/avatar/avatar_3.webp" alt="Avatar" /></div>
<div class="avatar avatar-sm"><img src="/images/avatar/avatar_4.webp" alt="Avatar" /></div>
<div class="avatar avatar-sm">
<div class="avatar-name bg-primary text-base"><span>+99</span></div>
</div>
</div>
<div class="border-l border-subtle ps-4">
<p class="text-xs text-muted mb-0">trusted by clients</p>
<div class="flex">
<svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg> <svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg> <svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg> <svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg> <svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg>
</div>
</div>
</div>
<div class="flex gap-3">
<a href="#" class="btn btn-primary btn-lg">Get started</a>
<a href="#" class="btn btn-outline btn-lg">View docs</a>
</div>
</div>
<img class="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>
<div class="">
<div class="border-b border-subtle">
<nav class="navbar navbar-expand-lg max-w-7xl mx-auto px-6 md:px-10 py-4">
<a class="navbar-brand flex items-center gap-2 me-8" href="#">
<button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHero3" aria-controls="navbarHero3" aria-expanded="false" aria-label="Toggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"></path></svg>
</button>
<img src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/c2a66a70db897fd0d89ea72e7cbab1d3c06a93e2/apps/docs/src/assets/images/logos/hb-logo1.svg" alt="Logo" class="w-8 h-8" />
<h5 class="mb-0 font-semibold max-sm:hidden">hummingbird</h5>
</a>
<button class="btn btn-primary rounded-full px-6 md:px-10 lg:order-1">Login</button>
<div class="collapse navbar-collapse" id="navbarHero3">
<ul class="navbar-nav me-auto mb-2 lg:mb-0">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
<li class="nav-item"><a class="nav-link" href="#">Company</a></li>
</ul>
</div>
</nav>
</div>
<div class="max-w-7xl mx-auto py-15 px-6">
<div class="max-w-4xl text-center mx-auto">
<span class="badge badge-outline-primary px-2 py-1.5 mb-8">Launch better products, faster</span>
<h1 class="text-5xl font-semibold leading-none mb-6">Future of digital business</h1>
<p class="">Accelerate development with tools that eliminate repetitive tasks, reduce complexity, and provide the flexibility needed to grow your product as your business evolves.</p>
<div class="flex items-center justify-center gap-4 mb-14 ms-3">
<div class="avatar-group justify-center">
<div class="avatar avatar-sm"><img src="/images/avatar/avatar_1.webp" alt="Avatar" /></div>
<div class="avatar avatar-sm"><img src="/images/avatar/avatar_2.webp" alt="Avatar" /></div>
<div class="avatar avatar-sm"><img src="/images/avatar/avatar_3.webp" alt="Avatar" /></div>
<div class="avatar avatar-sm"><img src="/images/avatar/avatar_4.webp" alt="Avatar" /></div>
<div class="avatar avatar-sm">
<div class="avatar-name bg-primary text-base"><span>+99</span></div>
</div>
</div>
<div class="border-l border-subtle ps-4">
<p class="text-xs text-muted mb-0">trusted by clients</p>
<div class="flex">
<svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg> <svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg> <svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg> <svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg> <svg class="text-warning" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="m12 16.3l-3.7 2.825q-.275.225-.6.213t-.575-.188t-.387-.475t-.013-.65L8.15 13.4l-3.625-2.575q-.3-.2-.375-.525t.025-.6t.35-.488t.6-.212H9.6l1.45-4.8q.125-.35.388-.538T12 3.475t.563.188t.387.537L14.4 9h4.475q.35 0 .6.213t.35.487t.025.6t-.375.525L15.85 13.4l1.425 4.625q.125.35-.012.65t-.388.475t-.575.188t-.6-.213z" stroke-width="0.5" stroke="currentColor"></path></svg>
</div>
</div>
</div>
<div class="flex gap-3 flex-wrap justify-center">
<a href="#" class="btn btn-primary btn-lg">Get started</a>
<a href="#" class="btn btn-outline btn-lg">View docs</a>
</div>
</div>
<div class="max-w-5xl mx-auto p-3 rounded-2xl shadow my-10"><img class="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 class="grid grid-cols-3 md:grid-cols-5 max-w-5xl gap-6 mx-auto items-center text-center">
<img src="https://www.adobe.com/federal/assets/svgs/adobe-logo.svg" alt="" class="size-20 mx-auto" />
<img src="https://static.xx.fbcdn.net/rsrc.php/y9/r/tL_v571NdZ0.svg" alt="" class="size-20 mx-auto" />
<img src="https://themewagon.com/wp-content/uploads/2021/03/Frame-172-1.png" alt="" class="h-8 mx-auto" />
<img src="https://onesuite.io/wp-content/uploads/2024/09/OneSuite-Logo.png" alt="" class="h-12 hidden md:block mx-auto" />
<img src="https://onedesk.so/_astro/logo.BAosC44E.png" alt="" class="h-4 hidden md:block mx-auto" />
</div>
</div>
</div>
<div class="border-b border-subtle">
<nav class="navbar navbar-expand-lg max-w-7xl mx-auto px-6 py-4">
<a class="navbar-brand flex items-center gap-2 me-8" href="#">
<button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHero4" aria-controls="navbarHero4" aria-expanded="false" aria-label="Toggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"></path></svg>
</button>
<img src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/c2a66a70db897fd0d89ea72e7cbab1d3c06a93e2/apps/docs/src/assets/images/logos/hb-logo1.svg" alt="Logo" class="w-8 h-8" />
<h5 class="mb-0 font-semibold hidden sm:block">hummingbird</h5>
</a>
<div class="flex gap-2 lg:order-1">
<button class="btn btn-subtle-primary btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.6 5.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-5.6-5.6q-.75.6-1.725.95T9.5 16m0-2q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14" stroke-width="0.5" stroke="currentColor"></path></svg>
</button>
<button class="btn btn-subtle-primary btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M17 18a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2c0-1.11.89-2 2-2M1 2h3.27l.94 2H20a1 1 0 0 1 1 1c0 .17-.05.34-.12.5l-3.58 6.47c-.34.61-1 1.03-1.75 1.03H8.1l-.9 1.63l-.03.12a.25.25 0 0 0 .25.25H19v2H7a2 2 0 0 1-2-2c0-.35.09-.68.24-.96l1.36-2.45L3 4H1zm6 16a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2c0-1.11.89-2 2-2m9-7l2.78-5H6.14l2.36 5z" stroke-width="0.5" stroke="currentColor"></path></svg>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarHero4">
<ul class="navbar-nav me-auto mb-2 lg:mb-0">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
<li class="nav-item"><a class="nav-link" href="#">Company</a></li>
</ul>
</div>
</nav>
</div>
<div class="max-w-7xl mx-auto px-6 pt-10 pb-6">
<div class="md:flex items-center justify-between gap-4 mb-10">
<h2 class="font-normal mb-6 md:mb-0">Refined Design for a Modern Lifestyle.</h2>
<a href="#" class="btn btn-primary btn-lg rounded-full text-nowrap">
Shop now
<svg class="flex-1" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z" stroke-width="0.5" stroke="currentColor"></path></svg>
</a>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="h-100 rounded-2xl overflow-hidden relative lg:col-span-2">
<img src="https://images.unsplash.com/photo-1772182104431-5a00158fd8e2?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" class="h-full w-full object-cover" />
<div class="absolute inset-0 bg-linear-to-t from-black to-transparent p-8 flex justify-end items-start flex-col">
<h3 class="max-md:text-2xl text-warning font-medium mb-0">Whooping 60% Off</h3>
<span class="text-lg text-white">on everyday items</span>
<a href="#" class="btn btn-warning btn-lg px-8 mt-6 rounded-full">Shop</a>
</div>
</div>
<div class="h-100 rounded-2xl overflow-hidden relative">
<img src="https://images.unsplash.com/photo-1758186334264-d1ab8a079aa2?q=80&w=2832&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" class="h-full w-full object-cover" />
<div class="absolute inset-0 bg-linear-to-t from-black to-transparent p-8 flex justify-end items-start flex-col">
<h3 class="max-md:text-2xl text-primary font-medium mb-0">Get 20% Off</h3>
<span class="text-lg text-white">on iPhone 17</span>
<a href="#" class="btn btn-primary btn-lg px-8 mt-6 rounded-full">Buy</a>
</div>
</div>
<div class="h-100 rounded-2xl overflow-hidden relative">
<img src="https://images.unsplash.com/photo-1434493789847-2f02dc6ca35d?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" class="h-full w-full object-cover" />
<div class="absolute inset-0 bg-linear-to-t from-black to-transparent p-8 flex justify-end items-start flex-col">
<h3 class="max-md:text-2xl text-info font-medium mb-0">Smart watch 15% Off</h3>
<span class="text-lg text-white">for today</span>
<a href="#" class="btn btn-info btn-lg px-8 mt-6 rounded-full">Buy</a>
</div>
</div>
</div>
</div>
<div class="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 class="bg-linear-to-r from-black/90 to-black/20 w-full h-full absolute top-0 left-0"></div>
<div class="max-w-7xl mx-auto px-6 md:px-10 h-full flex flex-col justify-between relative z-1">
<div class="navbar navbar-expand-lg px-0 py-5">
<a class="navbar-brand flex items-center gap-2 me-0" href="#">
<button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M4 18q-.425 0-.712-.288T3 17t.288-.712T4 16h16q.425 0 .713.288T21 17t-.288.713T20 18zm0-5q-.425 0-.712-.288T3 12t.288-.712T4 11h16q.425 0 .713.288T21 12t-.288.713T20 13zm0-5q-.425 0-.712-.288T3 7t.288-.712T4 6h16q.425 0 .713.288T21 7t-.288.713T20 8z" stroke-width="0.5" stroke="currentColor"></path></svg>
</button>
<img src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/c2a66a70db897fd0d89ea72e7cbab1d3c06a93e2/apps/docs/src/assets/images/logos/hb-logo1.svg" alt="Logo" class="size-10" />
<h5 class="text-white font-medium hidden sm:block">hummingbird</h5>
</a>
<div class="lg:w-46.5 lg:order-1 text-end"><a href="#" class="btn btn-primary rounded-full px-6">Sign Up</a></div>
<div class="collapse navbar-collapse py-6 lg:py-0 grow-0" id="navbarNavAltMarkup">
<div class="navbar-nav lg:gap-8">
<a class="nav-link text-white/70 active:text-white active" aria-current="page" href="#">Home</a>
<a class="nav-link text-white/70 active:text-white" href="#">Features</a>
<a class="nav-link text-white/70 active:text-white" href="#">Pricing</a>
<a class="nav-link text-white/70 active:text-white" href="#">Contact</a>
</div>
</div>
</div>
<div class="max-w-3xl py-16">
<h1 class="text-4xl sm:text-6xl mb-6 text-white">Let's Explore Now</h1>
<p class="text-base 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.</p>
<form class="sm:flex items-center bg-white/16 p-4 border border-white/24 rounded-2xl">
<div class="grid grid-cols-1 sm:grid-cols-3 w-full">
<div class="max-sm:border-b max-sm:pb-4 max-sm:mb-6 sm:border-e border-white/24 sm:me-6 md:me-10">
<label class="form-label text-white">Where To?</label>
<input type="text" class="form-control px-0 border-0 bg-transparent focus:border-primary focus:ring-0 text-white" placeholder="Destination" />
</div>
<div class="max-sm:border-b max-sm:pb-4 max-sm:mb-6 sm:border-e border-white/24 sm:me-6 md:me-10">
<label class="form-label text-white">Check-in Date</label>
<div class="input-group-icon">
<svg onclick="this.nextElementSibling.showPicker()" class="form-control-icon-start text-white cursor-pointer inset-s-0" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path fill="currentColor" d="M5 22q-.825 0-1.412-.587T3 20V6q0-.825.588-1.412T5 4h1V3q0-.425.288-.712T7 2t.713.288T8 3v1h8V3q0-.425.288-.712T17 2t.713.288T18 3v1h1q.825 0 1.413.588T21 6v14q0 .825-.587 1.413T19 22zm0-2h14V10H5zM5 8h14V6H5zm0 0V6z"></path>
</svg>
<input type="date" onclick="this.showPicker()" class="form-control 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" />
</div>
</div>
<div class="max-sm:border-b max-sm:pb-4 max-sm:mb-6 sm:border-e border-white/24 sm:me-6 md:me-10">
<label class="form-label text-white">Number of Guests</label>
<div class="dropdown">
<button class="btn btn-subtle-neutral p-0 bg-transparent text-white py-1.75 font-normal" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path fill="currentColor" d="M1 17.2q0-.85.438-1.562T2.6 14.55q1.55-.775 3.15-1.162T9 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T17 17.2v.8q0 .825-.587 1.413T15 20H3q-.825 0-1.412-.587T1 18zM21 20h-2.55q.275-.45.413-.962T19 18v-1q0-1.1-.612-2.113T16.65 13.15q1.275.15 2.4.513t2.1.887q.9.5 1.375 1.112T23 17v1q0 .825-.587 1.413T21 20M6.175 10.825Q5 9.65 5 8t1.175-2.825T9 4t2.825 1.175T13 8t-1.175 2.825T9 12t-2.825-1.175m11.65 0Q16.65 12 15 12q-.275 0-.7-.062t-.7-.138q.675-.8 1.038-1.775T15 8t-.362-2.025T13.6 4.2q.35-.125.7-.163T15 4q1.65 0 2.825 1.175T19 8t-1.175 2.825M3 18h12v-.8q0-.275-.137-.5t-.363-.35q-1.35-.675-2.725-1.012T9 15t-2.775.338T3.5 16.35q-.225.125-.363.35T3 17.2zm7.413-8.587Q11 8.825 11 8t-.587-1.412T9 6t-1.412.588T7 8t.588 1.413T9 10t1.413-.587M9 8"></path>
</svg>
1 Person
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">1 Person</a></li>
<li><a class="dropdown-item" href="#">2 Persons</a></li>
<li><a class="dropdown-item" href="#">3 Persons</a></li>
</ul>
</div>
</div>
</div>
<button type="submit" class="btn btn-lg btn-primary w-30 px-2">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class><path d="M16.125 17.0208L11.1042 12C10.6875 12.3611 10.2014 12.6423 9.64583 12.8437C9.09028 13.0451 8.5 13.1458 7.875 13.1458C6.375 13.1458 5.10417 12.625 4.0625 11.5833C3.02083 10.5416 2.5 9.28468 2.5 7.81246C2.5 6.34024 3.02083 5.08329 4.0625 4.04163C5.10417 2.99996 6.36806 2.47913 7.85417 2.47913C9.32639 2.47913 10.5799 2.99996 11.6146 4.04163C12.6493 5.08329 13.1667 6.34024 13.1667 7.81246C13.1667 8.40968 13.0694 8.98607 12.875 9.54163C12.6806 10.0972 12.3889 10.618 12 11.1041L17.0625 16.125C17.1875 16.2361 17.25 16.3784 17.25 16.552C17.25 16.7257 17.1806 16.8819 17.0417 17.0208C16.9167 17.1458 16.7639 17.2083 16.5833 17.2083C16.4028 17.2083 16.25 17.1458 16.125 17.0208ZM7.85417 11.8958C8.97917 11.8958 9.9375 11.4965 10.7292 10.6979C11.5208 9.89926 11.9167 8.93746 11.9167 7.81246C11.9167 6.68746 11.5208 5.72565 10.7292 4.92704C9.9375 4.12843 8.97917 3.72913 7.85417 3.72913C6.71528 3.72913 5.74653 4.12843 4.94792 4.92704C4.14931 5.72565 3.75 6.68746 3.75 7.81246C3.75 8.93746 4.14931 9.89926 4.94792 10.6979C5.74653 11.4965 6.71528 11.8958 7.85417 11.8958Z" fill="currentColor"></path></svg>
Search
</button>
</form>
</div>
</div>
</div>