Explore a variety of Tailwind CSS layout examples and templates to help you build responsive and visually appealing web pages. These layouts include a range of different styles and structures to suit various types of websites and applications.
<div class="lg:grid lg:grid-cols-[16.5rem_1fr] h-full">
<div class="offcanvas-lg offcanvas-start border-e border-subtle w-66 lg:sticky top-0 h-screen" tabindex="-1" id="offcanvasLayout1" aria-labelledby="offcanvasLayout1Label" data-bs-scroll="true">
<div class="offcanvas-header px-5 py-0 border-b border-subtle h-15 flex items-center">
<a class="flex items-center gap-2 no-underline" 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>
</div>
<div class="offcanvas-body block p-5 h-[calc(100%-60px)] overflow-y-auto">
<div class="w-full">
<h2 class="text-xs mb-2 text-subtle uppercase">Dashboards</h2>
<div class="list-group w-full bg-transparent gap-0.5">
<a href="#" class="list-group-item list-group-item-action rounded-lg text-sm py-2 active"><span>E-commerce</span></a>
<a href="#" class="list-group-item list-group-item-action rounded-lg text-sm py-2"><span>Project Management</span></a>
<a href="#" class="list-group-item list-group-item-action rounded-lg text-sm py-2"><span>CRM</span></a>
</div>
</div>
<div class="w-full">
<h2 class="text-xs mb-2 text-subtle uppercase mt-6">Pages</h2>
<div class="list-group w-full bg-transparent gap-0.5">
<a href="#" class="list-group-item list-group-item-action rounded-lg text-sm py-2"><span>Social Feed</span></a>
<a href="#" class="list-group-item list-group-item-action rounded-lg text-sm py-2"><span>Profile</span></a>
<a href="#" class="list-group-item list-group-item-action rounded-lg text-sm py-2"><span>Chat</span></a>
<a href="#" class="list-group-item list-group-item-action rounded-lg text-sm py-2"><span>File Manager</span></a>
</div>
</div>
</div>
</div>
<div class="pt-15 h-full flex-1">
<nav class="navbar bg-default fixed top-0 w-full lg:w-[calc(100%-16.5rem)] border-b border-subtle px-6 justify-start h-15">
<button class="btn btn-icon lg:hidden" data-bs-toggle="offcanvas" data-bs-target="#offcanvasLayout1" aria-controls="offcanvasLayout1">
<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>
<nav aria-label="breadcrumb" class="ms-5 lg:ms-0">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#" class="link link-hover">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">E-commerce</li>
</ol>
</nav>
<div class="dropdown ms-auto">
<button class="avatar avatar-sm" data-bs-toggle="dropdown" aria-expanded="false"><img src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/refs/heads/main/apps/docs/public/images/avatar/avatar_1.webp" alt="Avatar" class="rounded-full" /></button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</nav>
<div class="p-6 flex flex-col h-full">
<div class="grid grid-cols-3 gap-4 md:gap-6">
<div class="bg-muted/50 aspect-video rounded-lg"></div>
<div class="bg-muted/50 aspect-video rounded-lg"></div>
<div class="bg-muted/50 aspect-video rounded-lg"></div>
</div>
<div class="bg-muted/50 rounded-lg mt-4 md:mt-6 flex-1"></div>
</div>
</div>
</div>
<nav class="navbar bg-default fixed top-0 w-full border-b border-subtle px-6 justify-between flex h-15 z-1035">
<div class="flex">
<button class="btn btn-icon me-3 lg:hidden" data-bs-toggle="offcanvas" data-bs-target="#offcanvasLayout2" aria-controls="offcanvasLayout2">
<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>
<a class="flex items-center gap-2 no-underline" 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>
</div>
<div class="input-group-icon w-80 hidden md:block">
<svg class="form-control-icon-start" xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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>
<input type="text" class="form-control-fill rounded-full" />
</div>
<div class="flex gap-2">
<button class="btn btn-circle btn-subtle-neutral size-8 text-muted md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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>
<div class="dropdown">
<button class="avatar avatar-sm" data-bs-toggle="dropdown" aria-expanded="false"><img src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/refs/heads/main/apps/docs/public/images/avatar/avatar_1.webp" alt="Avatar" class="rounded-full" /></button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</nav>
<div class="lg:grid lg:grid-cols-[16.5rem_1fr] h-full pt-15">
<div class="offcanvas-lg offcanvas-start border-e border-subtle w-66 lg:sticky lg:top-15 h-screen lg:h-[calc(100vh-60px)] overflow-y-scroll" tabindex="-1" id="offcanvasLayout2" aria-labelledby="offcanvasLayout2Label" data-bs-scroll="true">
<div class="offcanvas-header px-5 py-0 border-b border-subtle h-15">
<a class="flex items-center gap-2 no-underline" 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>
</div>
<div class="offcanvas-body block p-5">
<div class="w-full">
<h2 class="text-xs mb-2 text-muted uppercase">Dashboards</h2>
<div class="list-group w-full bg-transparent gap-0.5">
<a href="#" class="list-group-item list-group-item-action rounded-lg text-sm py-2 active"><span>E-commerce</span></a>
<a href="#" class="list-group-item list-group-item-action rounded-lg text-sm py-2"><span>Project Management</span></a>
<a href="#" class="list-group-item list-group-item-action rounded-lg text-sm py-2"><span>CRM</span></a>
</div>
</div>
<div class="w-full">
<h2 class="text-xs mb-2 text-muted uppercase mt-6">Pages</h2>
<div class="list-group w-full bg-transparent gap-0.5">
<a href="#" class="list-group-item list-group-item-action rounded-lg text-sm py-2"><span>Social Feed</span></a>
<a href="#" class="list-group-item list-group-item-action rounded-lg text-sm py-2"><span>Profile</span></a>
<a href="#" class="list-group-item list-group-item-action rounded-lg text-sm py-2"><span>Chat</span></a>
<a href="#" class="list-group-item list-group-item-action rounded-lg text-sm py-2"><span>File Manager</span></a>
</div>
</div>
</div>
</div>
<div class="p-6 flex flex-col h-full">
<div class="grid grid-cols-3 gap-4 md:gap-6">
<div class="bg-muted/50 aspect-video rounded-lg"></div>
<div class="bg-muted/50 aspect-video rounded-lg"></div>
<div class="bg-muted/50 aspect-video rounded-lg"></div>
</div>
<div class="bg-muted/50 rounded-lg mt-4 md:mt-6 flex-1"></div>
</div>
</div>
<div class="lg:grid lg:grid-cols-[16.5rem_1fr] h-full">
<div class="offcanvas-lg offcanvas-start border-e border-subtle w-66 lg:sticky top-0 h-screen" tabindex="-1" id="offcanvasLayout3" aria-labelledby="offcanvasLayout3Label" data-bs-scroll="true">
<div class="offcanvas-header px-5 py-0 border-b border-subtle h-15 flex items-center">
<a class="flex items-center gap-2 no-underline" 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>
</div>
<div class="offcanvas-body block py-5 px-2 h-[calc(100%-60px)] overflow-y-auto">
<div class="w-full mb-0.5">
<div class="list-group w-full bg-transparent gap-0.5">
<button class="list-group-item list-group-item-action font-semibold rounded-lg text-sm py-2 flex justify-between items-center group" type="button" data-bs-toggle="collapse" data-bs-target="#dashboardsCollapse" aria-expanded="true" aria-controls="dashboardsCollapse">
Dashboards
<svg class="group-aria-expanded:rotate-90 transition-transform" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 6l6 6l-6 6"></path></svg>
</button>
<div class="collapse show flex flex-col gap-0.5" id="dashboardsCollapse">
<a href="#" class="list-group-item list-group-item-action rounded-lg text-sm py-2 ps-8 active"><span>E-commerce</span></a>
<a href="#" class="list-group-item list-group-item-action rounded-lg text-sm py-2 ps-8"><span>Project Management</span></a>
<a href="#" class="list-group-item list-group-item-action rounded-lg text-sm py-2 ps-8"><span>CRM</span></a>
</div>
</div>
</div>
<div class="w-full">
<div class="list-group w-full bg-transparent gap-0.5">
<button class="list-group-item list-group-item-action font-semibold rounded-lg text-sm py-2 flex justify-between items-center group" type="button" data-bs-toggle="collapse" data-bs-target="#pagesCollapse" aria-expanded="true" aria-controls="pagesCollapse">
Pages
<svg class="group-aria-expanded:rotate-90 transition-transform" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 6l6 6l-6 6"></path></svg>
</button>
<div class="collapse show flex flex-col gap-0.5" id="pagesCollapse">
<a href="#" class="list-group-item list-group-item-action rounded-lg text-sm py-2 ps-8"><span>Social Feed</span></a>
<a href="#" class="list-group-item list-group-item-action rounded-lg text-sm py-2 ps-8"><span>Profile</span></a>
<a href="#" class="list-group-item list-group-item-action rounded-lg text-sm py-2 ps-8"><span>Chat</span></a>
<a href="#" class="list-group-item list-group-item-action rounded-lg text-sm py-2 ps-8"><span>File Manager</span></a>
</div>
</div>
</div>
</div>
</div>
<div class="pt-15 h-full flex-1">
<nav class="navbar bg-default fixed top-0 w-full lg:w-[calc(100%-16.5rem)] border-b border-subtle px-6 justify-start h-15">
<button class="btn btn-icon lg:hidden" data-bs-toggle="offcanvas" data-bs-target="#offcanvasLayout3" aria-controls="offcanvasLayout3">
<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>
<nav aria-label="breadcrumb" class="ms-5 lg:ms-0">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#" class="link link-hover">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">E-commerce</li>
</ol>
</nav>
<div class="dropdown ms-auto">
<button class="avatar avatar-sm" data-bs-toggle="dropdown" aria-expanded="false"><img src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/refs/heads/main/apps/docs/public/images/avatar/avatar_1.webp" alt="Avatar" class="rounded-full" /></button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</nav>
<div class="p-6 flex flex-col h-full">
<div class="grid grid-cols-3 gap-4 md:gap-6">
<div class="bg-muted/50 aspect-video rounded-lg"></div>
<div class="bg-muted/50 aspect-video rounded-lg"></div>
<div class="bg-muted/50 aspect-video rounded-lg"></div>
</div>
<div class="bg-muted/50 rounded-lg mt-4 md:mt-6 flex-1"></div>
</div>
</div>
</div>
<div class="lg:grid lg:grid-cols-[16.5rem_1fr] h-full">
<div class="offcanvas-lg offcanvas-start border-e border-subtle w-66 lg:sticky top-0 h-screen flex flex-col" tabindex="-1" id="offcanvasLayout4" aria-labelledby="offcanvasLayout4Label" data-bs-scroll="true">
<div class="offcanvas-header px-5 pt-4 flex flex-col items-start">
<a class="flex gap-2 no-underline mb-3" 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">hummingbird</h6>
</a>
<div class="input-group-icon w-full">
<svg class="form-control-icon-start" xmlns="http://www.w3.org/2000/svg" width="16" height="16" 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>
<input type="text" class="form-control form-control-sm" />
</div>
</div>
<div class="offcanvas-body flex-1 flex flex-col justify-between pt-5 pb-3 px-2">
<div class="list-group w-full bg-transparent gap-0.5">
<div class="dropdown">
<button type="button" class="list-group-item list-group-item-action rounded-lg text-sm py-2 flex items-center justify-between active" data-bs-toggle="dropdown" aria-expanded="false">
<span>Getting Started</span>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</g>
</svg>
</button>
<ul class="dropdown-menu max-lg:dropdown-menu-end lg:top-0! lg:-end-3! lg:start-full! lg:mt-0! lg:transform-none! lg:ms-0.5! py-2">
<li><a class="dropdown-item" href="#">Introduction</a></li>
<li><a class="dropdown-item active" href="#">Installation</a></li>
<li><a class="dropdown-item" href="#">Framework Guide</a></li>
<li><a class="dropdown-item" href="#">JavaScript</a></li>
<li><a class="dropdown-item" href="#">Accessibility</a></li>
</ul>
</div>
<div class="dropdown">
<button type="button" class="list-group-item list-group-item-action rounded-lg text-sm py-2 flex items-center justify-between" data-bs-toggle="dropdown" aria-expanded="false">
<span>Customize</span>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</g>
</svg>
</button>
<ul class="dropdown-menu max-lg:dropdown-menu-end lg:top-0! lg:-end-3! lg:start-full! lg:mt-0! lg:transform-none! lg:ms-0.5! py-2">
<li><a class="dropdown-item" href="#">Component</a></li>
<li><a class="dropdown-item" href="#">Theming</a></li>
<li><a class="dropdown-item" href="#">Colors</a></li>
<li><a class="dropdown-item" href="#">Dark Mode</a></li>
<li><a class="dropdown-item" href="#">Reboot</a></li>
</ul>
</div>
<div class="dropdown">
<button type="button" class="list-group-item list-group-item-action rounded-lg text-sm py-2 flex items-center justify-between" data-bs-toggle="dropdown" aria-expanded="false">
<span>Layout & content</span>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</g>
</svg>
</button>
<ul class="dropdown-menu max-lg:dropdown-menu-end lg:top-0! lg:-end-3! lg:start-full! lg:mt-0! lg:transform-none! lg:ms-0.5! py-2">
<li><a class="dropdown-item" href="#">Container</a></li>
<li><a class="dropdown-item" href="#">Typography</a></li>
<li><a class="dropdown-item" href="#">Background</a></li>
<li><a class="dropdown-item" href="#">Grid</a></li>
<li><a class="dropdown-item" href="#">Shadows</a></li>
</ul>
</div>
<div class="dropdown">
<button type="button" class="list-group-item list-group-item-action rounded-lg text-sm py-2 flex items-center justify-between" data-bs-toggle="dropdown" aria-expanded="false">
<span>Components</span>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</g>
</svg>
</button>
<ul class="dropdown-menu max-lg:dropdown-menu-end lg:top-0! lg:-end-3! lg:start-full! lg:mt-0! lg:transform-none! lg:ms-0.5! py-2">
<li><a class="dropdown-item" href="#">Buttons</a></li>
<li><a class="dropdown-item" href="#">Avatars</a></li>
<li><a class="dropdown-item" href="#">Breadcrumbs</a></li>
<li><a class="dropdown-item" href="#">Dropdown</a></li>
<li><a class="dropdown-item" href="#">Modal</a></li>
<li><a class="dropdown-item" href="#">Offcanvas</a></li>
<li><a class="dropdown-item" href="#">Loader</a></li>
<li><a class="dropdown-item" href="#">Pagination</a></li>
</ul>
</div>
</div>
<div class="card mt-auto border-subtle mx-1">
<div class="card-body p-2">
<h6 class="text-base">Need help?</h6>
<p class="card-text text-sm text-muted">Check out our documentation to get all the information you need to start working with hummingbird.</p>
<a href="#" class="btn btn-neutral btn-sm w-full">Documentation</a>
</div>
</div>
</div>
</div>
<div class="pt-15 h-full flex-1">
<nav class="navbar bg-default fixed top-0 w-full lg:w-[calc(100%-16.5rem)] border-b border-subtle px-6 justify-start h-15">
<button class="btn btn-icon lg:hidden" data-bs-toggle="offcanvas" data-bs-target="#offcanvasLayout4" aria-controls="offcanvasLayout4">
<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>
<nav aria-label="breadcrumb" class="ms-5 lg:ms-0">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#" class="link link-hover">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">E-commerce</li>
</ol>
</nav>
<div class="dropdown ms-auto">
<button class="avatar avatar-sm" data-bs-toggle="dropdown" aria-expanded="false"><img src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/refs/heads/main/apps/docs/public/images/avatar/avatar_1.webp" alt="Avatar" class="rounded-full" /></button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</nav>
<div class="p-6 flex flex-col h-full">
<div class="grid grid-cols-3 gap-4 md:gap-6">
<div class="bg-muted/50 aspect-video rounded-lg"></div>
<div class="bg-muted/50 aspect-video rounded-lg"></div>
<div class="bg-muted/50 aspect-video rounded-lg"></div>
</div>
<div class="bg-muted/50 rounded-lg mt-4 md:mt-6 flex-1"></div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg bg-default fixed top-0 w-full border-b border-subtle px-6 justify-between flex z-1035">
<div class="flex items-center">
<button class="btn btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarBlockLayout5" aria-controls="navbarBlockLayout5" 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>
<a class="navbar-brand flex items-center gap-2" 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>
</div>
<div class="flex gap-2 lg:order-1">
<button class="btn btn-circle btn-subtle-neutral size-8 text-muted">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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>
<div class="dropdown">
<button class="avatar avatar-sm" data-bs-toggle="dropdown" aria-expanded="false"><img src="https://raw.githubusercontent.com/hummingbirdui/hummingbird/refs/heads/main/apps/docs/public/images/avatar/avatar_1.webp" alt="Avatar" class="rounded-full" /></button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
<div class="collapse navbar-collapse grow-0" id="navbarBlockLayout5">
<ul class="navbar-nav mb-2 lg:mb-0">
<li class="nav-item dropdown">
<button type="button" class="nav-link flex items-center gap-1 text-sm" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dashboard
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m17 10l-5 5l-5-5"></path></svg>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">E-commerce</a></li>
<li><a class="dropdown-item" href="#">Project Management</a></li>
<li><a class="dropdown-item" href="#">CRM</a></li>
<li><a class="dropdown-item" href="#">Travel Agency</a></li>
<li><a class="dropdown-item" href="#">Stock</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<button type="button" class="nav-link flex items-center gap-1 text-sm" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
Apps
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m17 10l-5 5l-5-5"></path></svg>
</button>
<ul class="dropdown-menu">
<div class="dropend">
<li>
<button class="dropdown-item flex justify-between items-center" type="button" data-bs-toggle="dropdown" aria-expanded="false">
E-commerce
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M9.29 6.71a.996.996 0 0 0 0 1.41L13.17 12l-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01" stroke-width="0.5" stroke="currentColor"></path></svg>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Add Product</a></li>
<li><a class="dropdown-item" href="#">products</a></li>
<li><a class="dropdown-item" href="#">Customers</a></li>
<li><a class="dropdown-item" href="#">Product Details</a></li>
<li><a class="dropdown-item" href="#">Inventory</a></li>
</ul>
</li>
</div>
<div class="dropend">
<li>
<button class="dropdown-item flex justify-between items-center" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Email
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M9.29 6.71a.996.996 0 0 0 0 1.41L13.17 12l-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01" stroke-width="0.5" stroke="currentColor"></path></svg>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Inbox</a></li>
<li><a class="dropdown-item" href="#">Email Details</a></li>
<li><a class="dropdown-item" href="#">Compose</a></li>
</ul>
</li>
</div>
<div class="dropend">
<li>
<button class="dropdown-item flex justify-between items-center" type="button" data-bs-toggle="dropdown" aria-expanded="false">
File Manager
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M9.29 6.71a.996.996 0 0 0 0 1.41L13.17 12l-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01" stroke-width="0.5" stroke="currentColor"></path></svg>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Grid View</a></li>
<li><a class="dropdown-item" href="#">List View</a></li>
<li><a class="dropdown-item" href="#">Upload</a></li>
</ul>
</li>
</div>
</ul>
</li>
<li class="nav-item dropdown">
<button type="button" class="nav-link flex items-center gap-1 text-sm" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Documentation
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m17 10l-5 5l-5-5"></path></svg>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Getting Started</a></li>
<li><a class="dropdown-item" href="#">Installation</a></li>
<li><a class="dropdown-item" href="#">Configuration</a></li>
<li><a class="dropdown-item" href="#">Framework Guide</a></li>
<li><a class="dropdown-item" href="#">API Reference</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="px-6 pb-6 pt-21 flex flex-col h-full">
<div class="grid grid-cols-3 gap-4 md:gap-6">
<div class="bg-muted/50 aspect-video rounded-lg"></div>
<div class="bg-muted/50 aspect-video rounded-lg"></div>
<div class="bg-muted/50 aspect-video rounded-lg"></div>
</div>
<div class="bg-muted/50 rounded-lg mt-4 md:mt-6 flex-1"></div>
</div>