Copied!
<div class="w-full mx-auto border-b 2xl:max-w-7xl">
<div x-data="{ open: false }" class="relative flex flex-col w-full p-5 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
<div class="flex flex-row items-center justify-between lg:justify-start"> <a class="text-lg tracking-tight uppercase focus:outline-none focus:ring lg:text-2xl" href="/"> <span class="lg:text-lg uppecase focus:ring-0">
daisystatic
</span> </a> <button @click="open = !open" class="inline-flex items-center justify-center p-2 text-neutral hover:text-base-300 focus:outline-none focus:text-base-300 md:hidden"> <svg class="w-6 h-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
<path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg> </button> </div>
<nav :class="{'flex': open, 'hidden': !open}" class="flex-col flex-grow hidden py-10 md:flex lg:py-0 md:justify-start md:flex-row">
<ul class="space-y-2 list-none md:space-y-0 md:items-center md:inline-flex">
<li> <a href="#" class="px-2 py-2 text-sm lg:px-6 md:px-3 link link-hover lg:ml-auto">
All
<span class="hidden lg:inline">
courses
</span> </a> </li>
<li> <a href="#" class="px-2 py-2 text-sm lg:px-6 md:px-3 link link-hover lg:ml-auto">
New courses
</a> </li>
<li> <a href="#" class="px-2 py-2 text-sm lg:px-6 md:px-3 link link-hover lg:ml-auto">
Free
<span class="hidden lg:inline">
Courses
</span> </a> </li>
</ul>
</nav>
</div>
</div> Copied!
<div class="w-full mx-auto border-b 2xl:max-w-7xl">
<div x-data="{ open: false }" class="relative flex flex-col w-full p-5 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
<div class="flex flex-row items-center justify-between lg:justify-start"> <a class="text-lg tracking-tight uppercase focus:outline-none focus:ring lg:text-2xl" href="/"> <span class="lg:text-lg uppecase focus:ring-0">
daisystatic
</span> </a> <button @click="open = !open" class="inline-flex items-center justify-center p-2 text-neutral hover:text-base-300 focus:outline-none focus:text-base-300 md:hidden"> <svg class="w-6 h-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
<path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg> </button> </div>
<nav :class="{'flex': open, 'hidden': !open}" class="flex-col flex-grow hidden py-10 md:flex lg:py-0 md:justify-center md:flex-row">
<ul class="space-y-2 list-none md:space-y-0 md:items-center md:inline-flex">
<li> <a href="#" class="px-2 py-2 text-sm lg:px-6 md:px-3 link link-hover lg:ml-auto">
All
<span class="hidden lg:inline">
courses
</span> </a> </li>
<li> <a href="#" class="px-2 py-2 text-sm lg:px-6 md:px-3 link link-hover lg:ml-auto">
New courses
</a> </li>
<li> <a href="#" class="px-2 py-2 text-sm lg:px-6 md:px-3 link link-hover lg:ml-auto">
Free
<span class="hidden lg:inline">
Courses
</span> </a> </li>
</ul>
</nav>
</div>
</div> Copied!
<div class="w-full mx-auto border-b 2xl:max-w-7xl">
<div x-data="{ open: false }" class="relative flex flex-col w-full p-5 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
<div class="flex flex-row items-center justify-between lg:justify-start"> <a class="text-lg tracking-tight uppercase focus:outline-none focus:ring lg:text-2xl" href="/"> <span class="lg:text-lg uppecase focus:ring-0">
daisystatic
</span> </a> <button @click="open = !open" class="inline-flex items-center justify-center p-2 text-neutral hover:text-base-300 focus:outline-none focus:text-base-300 md:hidden"> <svg class="w-6 h-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
<path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg> </button> </div>
<nav :class="{'flex': open, 'hidden': !open}" class="flex-col flex-grow hidden py-10 md:flex lg:py-0 md:justify-end md:flex-row">
<ul class="space-y-2 list-none md:space-y-0 md:items-center md:inline-flex">
<li> <a href="#" class="px-2 py-2 text-sm lg:px-6 md:px-3 link link-hover lg:ml-auto">
All
<span class="hidden lg:inline">
courses
</span> </a> </li>
<li> <a href="#" class="px-2 py-2 text-sm lg:px-6 md:px-3 link link-hover lg:ml-auto">
New courses
</a> </li>
<li> <a href="#" class="px-2 py-2 text-sm lg:px-6 md:px-3 link link-hover lg:ml-auto">
Free
<span class="hidden lg:inline">
Courses
</span> </a> </li>
</ul>
</nav>
</div>
</div> Copied!
<div class="w-full mx-auto border-b 2xl:max-w-7xl border-base">
<div x-data="{ open: false }" class="relative flex flex-col w-full p-5 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
<div class="flex flex-row items-center justify-between lg:justify-start"> <a class="text-lg tracking-tight uppercase focus:outline-none focus:ring lg:text-2xl" href="/"> <span class="lg:text-lg uppecase focus:ring-0">
daisystatic
</span> </a> <button @click="open = !open" class="inline-flex items-center justify-center p-2 text-neutral hover:text-base-300 focus:outline-none focus:text-base-300 md:hidden"> <svg class="w-6 h-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
<path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg> </button> </div>
<nav :class="{'flex': open, 'hidden': !open}" class="flex-col items-center flex-grow hidden md:pb-0 md:flex md:justify-end md:flex-row"> <a class="px-2 py-2 text-sm lg:px-6 md:px-3 link link-hover lg:ml-auto" href="#">
About
</a> <a class="px-2 py-2 text-sm lg:px-6 md:px-3 link link-hover" href="#">
Company
</a>
<div class="inline-flex items-center gap-2 list-none lg:ml-auto"> <a class="block px-4 py-2 mt-2 text-sm md:mt-0 link link-hover focus:outline-none focus:shadow-outline" href="{% url 'login' %}">
Sign in
</a> <a class="inline-flex items-center justify-center px-4 py-2 text-sm font-semibold text-primary-content bg-primary rounded-full group focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 hover:border-white hover:text-white active:bg-gray-800 active:text-white focus-visible:outline-black" href="#">
Sign up
</a> </div>
</nav>
</div>
</div> Copied!
<div class="w-full mx-auto border-b 2xl:max-w-7xl">
<div x-data="{ open: false }" class="relative flex flex-col w-full p-5 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
<div class="flex flex-row items-center justify-between lg:justify-start"> <a class="text-lg tracking-tight uppercase focus:outline-none focus:ring lg:text-2xl" href="/"> <span class="lg:text-lg uppecase focus:ring-0">
daisystatic
</span> </a> <button @click="open = !open" class="inline-flex items-center justify-center p-2 text-gray-400 hover:text-black focus:outline-none focus:text-black md:hidden"> <svg class="w-6 h-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
<path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg> </button> </div>
<nav :class="{'flex': open, 'hidden': !open}" class="flex-col items-center flex-grow hidden md:pb-0 md:flex md:justify-end md:flex-row"> <a class="px-2 py-2 text-sm lg:px-6 md:px-3 link link-hover" href="#">
About
</a> <a class="px-2 py-2 text-sm lg:px-6 md:px-3 link link-hover" href="#">
Company
</a>
<div class="inline-flex items-center gap-2 list-none lg:ml-auto"> <a class="block px-4 py-2 mt-2 text-sm md:mt-0 link link-hover focus:outline-none focus:shadow-outline" href="{% url 'login' %}">
Sign in
</a> <a class="inline-flex items-center justify-center px-4 py-2 text-sm font-semibold text-primary-content bg-primary rounded-full group focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 hover:border-white hover:text-white active:bg-gray-800 active:text-white focus-visible:outline-black" href="#">
Sign up
</a> </div>
</nav>
</div>
<div class="flex items-center justify-between w-full px-8 overflow-y-auto border-t whitespace-nowrap scroll-hidden md:px-6"> <a class="py-4 pr-2 text-sm transition ease-in-out transform border-b-2 border-transparent duration-650 focus:outline-none focus:shadow-none md:my-0 hover:border-primary hover:text-primary" href="#">
Overview
</a> <a class="px-2 py-4 text-sm transition ease-in-out transform border-b-2 border-transparent duration-650 focus:outline-none focus:shadow-none md:my-0 hover:border-primary hover:text-primary" href="#">
Integrations
</a> <a class="px-2 py-4 text-sm transition ease-in-out transform border-b-2 border-transparent duration-650 focus:outline-none focus:shadow-none md:my-0 hover:border-primary hover:text-primary" href="#">
Activity
</a> <a class="px-2 py-4 text-sm transition ease-in-out transform border-b-2 border-transparent duration-650 focus:outline-none focus:shadow-none md:my-0 hover:border-primary hover:text-primary" href="#">
Domains
</a> <a class="px-2 py-4 text-sm transition ease-in-out transform border-b-2 border-transparent duration-650 focus:outline-none focus:shadow-none md:my-0 hover:border-primary hover:text-primary" href="#">
Usage
</a> <a class="px-2 py-4 text-sm transition ease-in-out transform border-b-2 border-transparent duration-650 focus:outline-none focus:shadow-none md:my-0 hover:border-primary hover:text-primary" href="#">
Settings
</a> <a class="px-2 py-4 text-sm transition ease-in-out transform border-b-2 border-transparent duration-650 focus:outline-none focus:shadow-none md:my-0 hover:border-primary hover:text-primary" href="#">
Feedback
</a> <a class="px-2 py-4 text-sm transition ease-in-out transform border-b-2 border-transparent duration-650 focus:outline-none focus:shadow-none md:my-0 hover:border-primary hover:text-primary" href="#">
Changelog
</a> <a class="px-2 py-4 text-sm transition ease-in-out transform border-b-2 border-transparent duration-650 focus:outline-none focus:shadow-none md:my-0 hover:border-primary hover:text-primary" href="#">
Docs
</a> </div>
</div> Copied!
<div class="w-full mx-auto border-b 2xl:max-w-7xl">
<div x-data="{ open: false }" class="relative flex flex-col w-full p-5 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
<div class="flex flex-row items-center justify-between lg:justify-start"> <a class="text-lg tracking-tight uppercase focus:outline-none focus:ring lg:text-2xl" href="/"> <span class="lg:text-lg uppecase focus:ring-0">
daisystatic
</span> </a> <button @click="open = !open" class="inline-flex items-center justify-center p-2 text-gray-400 hover:text-black focus:outline-none focus:text-black md:hidden"> <svg class="w-6 h-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
<path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg> </button> </div>
<nav :class="{'flex': open, 'hidden': !open}" class="flex-col items-center flex-grow hidden md:pb-0 md:flex md:justify-end md:flex-row"> <a class="px-2 py-2 text-sm lg:px-6 md:px-3 link link-hover" href="#">
About
</a> <a class="px-2 py-2 text-sm lg:px-6 md:px-3 link link-hover" href="#">
Company
</a>
<div class="hidden mx-10 md:block lg:ml-auto">
<div class="relative"> <span class="absolute inset-y-0 left-0 flex items-center pl-3"> <svg class="w-5 h-5 text-neutral-content" viewBox="0 0 24 24" fill="none"> <path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> <input type="text" class="w-full py-2 pl-10 pr-4 input input-bordered sm:text-sm rounded-xl " placeholder="Search"> </div>
</div>
<div class="inline-flex items-center gap-2 list-none"> <a class="block px-4 py-2 mt-2 text-sm md:mt-0 link link-hover focus:outline-none focus:shadow-outline" href="{% url 'login' %}">
Sign in
</a> <a class="inline-flex items-center justify-center px-4 py-2 text-sm font-semibold text-primary-content bg-primary rounded-full group focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 hover:border-white hover:text-white active:bg-gray-800 active:text-white focus-visible:outline-black" href="#">
Sign up
</a> </div>
</nav>
</div>
</div> Copied!
<div class="w-full mx-auto border-b 2xl:max-w-7xl border-base">
<div x-data="{ open: false }" class="relative flex flex-col w-full p-5 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
<div class="flex flex-row items-center justify-between lg:justify-start"> <a class="text-lg tracking-tight uppercase focus:outline-none focus:ring lg:text-2xl" href="/"> <span class="lg:text-lg uppecase focus:ring-0">
daisystatic
</span> </a> <button @click="open = !open" class="inline-flex items-center justify-center p-2 text-neutral hover:text-base-300 focus:outline-none focus:text-base-300 md:hidden"> <svg class="w-6 h-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path :class="{'hidden': open, 'inline-flex': !open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
<path :class="{'hidden': !open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg> </button> </div>
<nav :class="{'flex': open, 'hidden': !open}" class="flex-col items-center flex-grow hidden md:pb-0 md:flex md:justify-end md:flex-row"> <a class="px-2 py-2 text-sm lg:px-6 md:px-3 link link-hover lg:ml-auto" href="">
About
</a> <a class="px-2 py-2 text-sm lg:px-6 md:px-3 link link-hover" href="">
Company
</a>
<div class="inline-flex items-center gap-2 list-none lg:ml-auto">
<div class="dropdown dropdown-end"> <label tabindex="0" class="btn btn-ghost btn-circle avatar">
<div class="w-10 rounded-full"> <img alt="Tailwind CSS Navbar component" src="https://images.unsplash.com/flagged/photo-1570612861542-284f4c12e75f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"> </div>
</label>
<ul tabindex="0" class="mt-3 z-[1] p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
<li> <a class="justify-between">
Profile
<span class="badge">New</span> </a> </li>
<li><a>Settings</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>