Framework
Theme
All
217
Headers
12
Testimonials
7
Logo Areas
6
Stats
6
Http Codes
4
Navbars
13
Pricing
6
Contact Us
6
Faq
6
Teams
7
Features
6
Call To Actions
8
Authentication
5
Blogs
4
General
1
Contents
6
Sidebars
6
Components
23
Cards Section
8
Forms
7
Tables Section
3
Typography
14
Teams Section
3
Profiles Section
5
Tables
8
Cards
17
Projects Section
3
Charts
7
Charts Section
3
Tailwind Navbars
Discover 13 Tailwind Navbars available in Loopple
Navbar With Logo And Authentication Buttons
Component from
Motion Landing Library
Builder
<div class="container mx-auto draggable">
<div class="relative flex items-center justify-between w-full px-2 bg-white py-9 group shrink-0">
<div class="shrink-0">
<img class="h-8" src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/logos/logo-nav-0.png"></img>
</div>
<div class="items-center justify-between hidden gap-12 text-sm font-medium md:flex text-grey-800">
<a class="font-bold text-dark-grey-900 hover:text-dark-grey-700" href="javascript:void(0)">Product</a>
<a class="text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Features</a>
<a class="text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Pricing</a>
<a class="text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Company</a>
</div>
<div class="items-center hidden gap-2 md:flex">
<button class="box-content flex items-center px-4 py-2 text-sm font-bold border rounded-xl border-purple-blue-500 text-purple-blue-500 hover:bg-purple-blue-500 hover:text-white focus:ring-4 focus:ring-purple-blue-100 transition duration-300">Log In</button>
<button class="flex items-center px-4 py-2 text-sm font-bold text-white border rounded-xl border-purple-blue-500 bg-purple-blue-500 hover:bg-purple-blue-700 focus:ring-4 focus:ring-purple-blue-100 transition duration-300">Sign Up</button>
</div>
<button onclick="(() => { this.closest('.group').classList.toggle('open')})()" class="flex md:hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M3 8H21C21.2652 8 21.5196 7.89464 21.7071 7.70711C21.8946 7.51957 22 7.26522 22 7C22 6.73478 21.8946 6.48043 21.7071 6.29289C21.5196 6.10536 21.2652 6 21 6H3C2.73478 6 2.48043 6.10536 2.29289 6.29289C2.10536 6.48043 2 6.73478 2 7C2 7.26522 2.10536 7.51957 2.29289 7.70711C2.48043 7.89464 2.73478 8 3 8ZM21 16H3C2.73478 16 2.48043 16.1054 2.29289 16.2929C2.10536 16.4804 2 16.7348 2 17C2 17.2652 2.10536 17.5196 2.29289 17.7071C2.48043 17.8946 2.73478 18 3 18H21C21.2652 18 21.5196 17.8946 21.7071 17.7071C21.8946 17.5196 22 17.2652 22 17C22 16.7348 21.8946 16.4804 21.7071 16.2929C21.5196 16.1054 21.2652 16 21 16ZM21 11H3C2.73478 11 2.48043 11.1054 2.29289 11.2929C2.10536 11.4804 2 11.7348 2 12C2 12.2652 2.10536 12.5196 2.29289 12.7071C2.48043 12.8946 2.73478 13 3 13H21C21.2652 13 21.5196 12.8946 21.7071 12.7071C21.8946 12.5196 22 12.2652 22 12C22 11.7348 21.8946 11.4804 21.7071 11.2929C21.5196 11.1054 21.2652 11 21 11Z" fill="black"/>
</svg>
</button>
<div class="absolute flex md:hidden transition-all duration-300 ease-in-out flex-col items-start shadow-main justify-center w-full gap-3 overflow-hidden bg-white max-h-0 group-[.open]:py-4 px-4 rounded-2xl group-[.open]:max-h-64 top-full">
<a class="font-bold text-dark-grey-900 hover:text-dark-grey-700" href="javascript:void(0)">Product</a>
<a class="text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Features</a>
<a class="text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Pricing</a>
<a class="text-dark-grey-700 hover:text-dark-grey-900" href="javascript:void(0)">Company</a>
<button class="box-content flex items-center px-4 py-2 text-sm font-bold border rounded-xl border-purple-blue-500 text-purple-blue-500 hover:bg-purple-blue-500 hover:text-white focus:ring-4 focus:ring-purple-blue-100 transition duration-300">Log In</button>
<button class="flex items-center px-4 py-2 text-sm font-bold text-white border rounded-xl border-purple-blue-500 bg-purple-blue-500 hover:bg-purple-blue-700 focus:ring-4 focus:ring-purple-blue-100 transition duration-300">Sign Up</button>
</div>
</div>
</div>Double Navigation Bar
Navbar With Sign Up Button
Navbar With Logo And Search Input
Navbar With 2 Buttons And Logo
Navbar With Centered Logo
Navbar White
Component from
Riva Dashboard Tailwind
Builder
<div class="sm:flex items-stretch justify-between grow lg:mb-0 mb-5 py-5 px-10">
<div class="flex flex-col flex-wrap justify-center mb-5 mr-3 lg:mb-0">
<span class="my-0 flex text-dark font-semibold text-[1.35rem]/[1.2] flex-col justify-center font-display">
Profile
</span>
<span class="pt-1 text-secondary-dark text-[0.95rem] font-medium">
See all your notifications
</span>
</div>
<div class="flex items-center lg:shrink-0 lg:flex-nowrap">
<div class="relative flex items-center lg:ml-4 sm:mr-0 mr-2">
<span class="absolute ml-4 leading-none -translate-y-1/2 top-1/2 text-muted">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"></path>
</svg>
</span>
<input class="block w-full min-w-[70px] py-3 pl-12 pr-4 text-base font-medium leading-normal bg-white border border-solid outline-none appearance-none placeholder:text-secondary-dark peer text-stone-500 border-stone-200 bg-clip-padding rounded-2xl" placeholder="Search..." type="text">
<span onclick="(() => { this.previousElementSibling.value=''})()" class="absolute right-0 left-auto mr-4 leading-none -translate-y-1/2 peer-placeholder-shown:hidden top-1/2 hover:text-primary text-muted">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</span>
</div>
<div class="relative lg:hidden flex items-center sm:ml-2 ml-auto">
<a href="javascript:void(0)" class="flex items-center justify-center w-12 h-12 text-base font-medium leading-normal text-center align-middle transition-colors duration-150 ease-in-out bg-transparent border border-solid shadow-none cursor-pointer rounded-2xl text-stone-500 border-stone-200 hover:text-primary active:text-primary focus:text-primary" onclick="(function(){document.querySelector('.group\\/sidebar').classList.toggle('-translate-x-full');})();">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
</svg>
</a>
</div>
<div class="relative flex items-center ml-2 lg:ml-4">
<a href="javascript:void(0)" class="flex items-center justify-center w-12 h-12 text-base font-medium leading-normal text-center align-middle transition-colors duration-150 ease-in-out bg-transparent border border-solid shadow-none cursor-pointer rounded-2xl text-stone-500 border-stone-200 hover:text-primary active:text-primary focus:text-primary">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"></path>
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
</a>
</div>
<div class="relative flex items-center ml-2 lg:ml-4">
<a href="javascript:void(0)" class="flex items-center justify-center w-12 h-12 text-base font-medium leading-normal text-center align-middle transition-colors duration-150 ease-in-out bg-transparent border border-solid shadow-none cursor-pointer rounded-2xl text-stone-500 border-stone-200 hover:text-primary active:text-primary focus:text-primary">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124 7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5"></path>
</svg>
</a>
</div>
<div class="relative flex items-center ml-2 lg:ml-4">
<a href="javascript:void(0)" class="flex items-center justify-center w-12 h-12 text-base font-semibold leading-normal text-center text-white align-middle transition-colors duration-150 ease-in-out shadow-none cursor-pointer rounded-2xl bg-primary hover:bg-primary-dark active:bg-primary-dark focus:bg-primary-dark ">
<span class="text-[1.15rem]">6</span>
</a>
</div>
</div>
</div>
