<div class="flex justify-center "> <div class="self-center top-0 w-full max-w-7xl "> <div class="flex justify-between items-center text-gray-700"> <div class="mx-2 my-4 "><ion-icon name="logo-pwa" class="text-5xl text-blue-600 hover:text-stone-600"></ion-icon></div> <ul class="hidden md:flex items-center text-[18px] font-semibold pr-10"> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"><a href="#">Home</a></li> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"><a href="#">About Us</a></li> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"><a href="#">Our Services</a></li> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"><a href="#">Portfolio</a></li> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"><a href="#">Contact</a></li> <li class="text-blue-600 hover:text-white hover:bg-blue-600 mx-4 my-1 border-2 border-blue-600 px-2 rounded-2xl "><a href="#">LogIn</a></li> <li class="text-white bg-blue-600 px-2 rounded-2xl mx-4 my-1 hover:bg-white hover:text-blue-600 hover:border-2 hover:border-blue-600"><a href="#">SignUp</a></li> </ul> <button class="block p-3 mx-10 md:hidden hover:bg-gray-200 rounded-xl group"> <div class="w-5 my-[3px] h-[3px] bg-gray-600 mb-[2px]"></div> <div class="w-5 my-[3px] h-[3px] bg-gray-600 mb-[2px]"></div> <div class="w-5 my-[3px] h-[3px] bg-gray-600"></div> <div class="absolute top-0 -right-full opacity-0 h-screen w-[60%] border bg-white group-focus:right-0 group-focus:opacity-100 transition-all ease-in duration-300 "> <ul class="flex flex-col items-center text-[18px] pt-[60px]"> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"><a href="#">Home</a></li> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"><a href="#">About Us</a></li> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"><a href="#">Our Services</a></li> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"><a href="#">Portfolio</a></li> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"><a href="#">Contact</a></li> <li class="text-blue-600 hover:text-white hover:bg-blue-600 mx-4 my-1 border-2 border-blue-600 px-2 rounded-2xl "><a href="#">LogIn</a></li> <li class="text-white bg-blue-600 px-2 rounded-2xl mx-4 my-1 hover:bg-white hover:text-blue-600 hover:border-2 hover:border-blue-600"><a href="#">SignUp</a></li> </ul> </div> </button> </div> </div> </div> <script src="https://cdn.tailwindcss.com"></script> <script src="https://use.fontawesome.com/03f8a0ebd4.js"></script> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<div class="flex justify-center " > <div class="self-center top-0 w-full max-w-7xl"> <div class="flex justify-between items-center text-gray-700"> <div class="flex mx-2"> <a href="#" class="flex"> <ion-icon name="chatbubble-ellipses-sharp" class="text-5xl text-blue-600 hover:text-stone-600"></ion-icon> <div class="mx-2 my-4 text-xl text-blue-600 hover:text-stone-600">NewChat</div> </a> </div> <ul class="hidden md:flex items-center text-[18px] font-semibold pr-10"> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"><a href="#">Product</a></li> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"><a href="#">Pricing</a></li> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"><a href="#">Services</a></li> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"><a href="#">Company</a></li> </ul> <ul class="hidden md:flex items-center text-[18px] font-semibold pr-10"> <li class="text-stone-600 hover:text-blue-600 mx-4 my-1 border-2 border-stone-600 hover:border-blue-600 px-2 rounded-2xl "><a href="#">LogIn</a></li> <li class="text-stone-600 hover:text-blue-600 mx-4 my-1 border-2 border-stone-600 hover:border-blue-600 px-2 rounded-2xl "><a href="#">SignUp</a></li> </ul> <button class="block p-3 mx-10 md:hidden hover:bg-gray-200 rounded-xl group"> <div class="w-5 my-[3px] h-[3px] bg-gray-600 mb-[2px]"></div> <div class="w-5 my-[3px] h-[3px] bg-gray-600 mb-[2px]"></div> <div class="w-5 my-[3px] h-[3px] bg-gray-600"></div> <div class="absolute top-0 -right-full opacity-0 h-screen w-[60%] border bg-white group-focus:right-0 group-focus:opacity-100 transition-all ease-in duration-300 "> <ul class="flex flex-col items-center text-[18px] pt-[60px]"> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"><a href="#">Product</a></li> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"><a href="#">Pricing</a></li> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"><a href="#">Services</a></li> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"><a href="#">Company</a></li> <li class="text-stone-600 hover:text-blue-600 mx-4 my-1 border-2 border-stone-600 hover:border-blue-600 px-2 rounded-2xl "><a href="#">LogIn</a></li> <li class="text-stone-600 hover:text-blue-600 mx-4 my-1 border-2 border-stone-600 hover:border-blue-600 px-2 rounded-2xl "><a href="#">SignUp</a></li> </ul> </div> </button> </div> </div> </div> <script src="https://cdn.tailwindcss.com"></script> <script src="https://use.fontawesome.com/03f8a0ebd4.js"></script> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<div class="flex justify-center"> <div class="self-center top-0 w-full max-w-7xl "> <div class="flex justify-between items-center border-b border-white"> <div class="flex mx-2"> <a href="#" class="flex"> <div class="mx-2 my-4 text-2xl text-white hover:border-b border-white hover:font-bold font-medium"> Explore</div> </a> </div> <ul class="hidden md:flex items-center text-[18px] font-semibold pr-10"> <li class="text-white hover:border-b border-white hover:font-bold font-medium mx-4 my-1"><a href="#">Home</a></li> <li class="text-white hover:border-b border-white hover:font-bold font-medium mx-4 my-1"><a href="#">About</a></li> <li class="text-white hover:border-b border-white hover:font-bold font-medium mx-4 my-1"><a href="#">Tour</a></li> <li class="text-white hover:border-b border-white hover:font-bold font-medium mx-4 my-1"><a href="#">Hotels</a></li> <li class="text-white hover:border-b border-white hover:font-bold font-medium mx-4 my-1"><a href="#">Blog</a></li> <li class="text-white hover:border-b border-white hover:font-bold font-medium mx-4 my-1"><a href="#">Contact</a></li> <li class="text-white hover:border-b border-white hover:font-bold font-medium mx-4 my-1"><a href="#"> <ion-icon name="search" class="text-2xl mt-2"></ion-icon> </a></li> </ul> <button class="block p-3 mx-10 md:hidden hover:bg-gray-200 rounded-xl group"> <div class="w-5 my-[3px] h-[3px] bg-gray-600 mb-[2px]"></div> <div class="w-5 my-[3px] h-[3px] bg-gray-600 mb-[2px]"></div> <div class="w-5 my-[3px] h-[3px] bg-gray-600"></div> <div class="absolute top-0 -right-full opacity-0 w-[60%] border bg-white group-focus:right-0 group-focus:opacity-100 transition-all ease-in duration-300 "> <ul class="flex flex-col items-center text-[18px] pt-[60px]"> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"> <a href="#">Home</a> </li> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"> <a href="#">About</a> </li> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"> <a href="#">Tour</a> </li> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"> <a href="#">Hotels</a> </li> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"> <a href="#">Blog</a> </li> <li class="text-stone-600 hover:text-blue-600 hover:font-bold font-medium mx-4 my-1"> <a href="#">Contact</a> </li> </ul> </div> </button> </div> </div> </div> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<div class="flex justify-center "> <nav class="self-center top-0 w-full max-w-7xl shadow bg-blue-500"> <div class="flex justify-between items-center text-white"> <h1 class="uppercase pl-10 py-4 text-xl font-sans font-bold">Logo</h1> <ul class="hidden md:flex items-center text-[18px] font-semibold pr-10"> <li class="hover:underline underline-offset-4 decoration-2 decoration-white py-2 rounded-lg px-5"><a href="#">Home</a></li> <li class="hover:underline underline-offset-4 decoration-2 decoration-white py-2 rounded-lg px-5"><a href="#">Contact</a></li> <li class="hover:underline underline-offset-4 decoration-2 decoration-white py-2 rounded-lg px-5"><a href="#">Services</a></li> <li class="hover:underline underline-offset-4 decoration-2 decoration-white py-2 rounded-lg px-5"><a href="#">About</a></li> <li class="hover:underline underline-offset-4 decoration-2 decoration-white py-2 rounded-lg px-5"><a href="#">Pricing</a></li> </ul> <button class="hidden md:flex uppercase md:mr-9 text-base border border-white px-3 py-2 my-0 font-semibold hover:bg-blue-600 rounded-2xl">register</button> <button class="block p-3 mx-10 md:hidden hover:bg-blue-600 rounded-xl group"> <div class="w-5 my-[3px] h-[3px] bg-white mb-[2px]"></div> <div class="w-5 my-[3px] h-[3px] bg-white mb-[2px]"></div> <div class="w-5 my-[3px] h-[3px] bg-white"></div> <div class="absolute top-0 -right-full opacity-0 h-screen w-[60%] border bg-blue-500 group-focus:right-0 group-focus:opacity-100 transition-all ease-in duration-300 "> <ul class="flex flex-col items-center text-[18px] pt-[60px]"> <li class="hover:bg-blue-600 py-4 px-6 w-full"><a href="#">Home</a></li> <li class="hover:bg-blue-600 py-4 px-6 w-full"><a href="#">Contacts</a></li> <li class="hover:bg-blue-600 py-4 px-6 w-full"><a href="#">Services</a></li> <li class="hover:bg-blue-600 py-4 px-6 w-full"><a href="#">About</a></li> <li class="hover:bg-blue-600 py-4 px-6 w-full"><a href="#">Pricing</a></li> <li class="hover:bg-blue-600 py-2 px-9 mt-3 border-2 border-white"><a href="#">Register</a></li> </ul> </div> </button> </div> </nav> </div>

<div class="flex justify-center "> <nav class="self-center top-0 w-full max-w-7xl shadow bg-yellow-500"> <div class="flex justify-between items-center text-black"> <div class="order-1 md:order-2 md:mr-64 pl-10 py-4 text-lg font-bold text-black">CSS</div> <ul class="hidden md:flex items-center text-sm font-medium pr-10"> <li class="hover:text-white hover:underline underline-offset-4 decoration-2 decoration-white py-2 rounded-lg px-5"> <a href="#">Home</a></li> <li class="hover:text-white hover:underline underline-offset-4 decoration-2 decoration-white py-2 rounded-lg px-5"> <a href="#">Contact</a></li> <li class="hover:text-white hover:underline underline-offset-4 decoration-2 decoration-white py-2 rounded-lg px-5"> <a href="#">Services</a></li> <li class="hover:text-white hover:underline underline-offset-4 decoration-2 decoration-white py-2 rounded-lg px-5"> <a href="#">Support</a></li> </ul> <button class="hidden md:flex md:order-3 uppercase md:mr-9 text-sm border border-white px-3 py-2 my-0 font-semibold hover:bg-yellow-400 hover:text-white rounded">register</button> <button class="block order-2 p-3 mx-10 md:hidden hover:bg-yellow-400 rounded-xl group"> <div class="w-5 my-[3px] h-[3px] bg-black mb-[2px]"></div> <div class="w-5 my-[3px] h-[3px] bg-black mb-[2px]"></div> <div class="w-5 my-[3px] h-[3px] bg-black"></div> <div class="absolute top-0 -right-full opacity-0 h-screen w-[60%] border bg-yellow-400 group-focus:right-0 group-focus:opacity-100 transition-all ease-in duration-300 "> <ul class="flex flex-col items-center text-[18px] pt-[60px]"> <li class="hover:bg-yellow-500 hover:text-white hover:underline underline-offset-4 decoration-2 decoration-white py-4 px-6 w-full"><a href="#">Home</a></li> <li class="hover:bg-yellow-500 hover:text-white hover:underline underline-offset-4 decoration-2 decoration-white py-4 px-6 w-full"><a href="#">Contacts</a></li> <li class="hover:bg-yellow-500 hover:text-white hover:underline underline-offset-4 decoration-2 decoration-white py-4 px-6 w-full"><a href="#">Services</a></li> <li class="hover:bg-yellow-500 hover:text-white hover:underline underline-offset-4 decoration-2 decoration-white py-4 px-6 w-full"><a href="#">About</a></li> <li class="hover:bg-yellow-500 hover:text-white hover:underline underline-offset-4 decoration-2 decoration-white py-4 px-6 w-full"><a href="#">Pricing</a></li> <li class="hover:bg-yellow-500 hover:text-white py-2 px-9 mt-3 border-2 border-white"><a href="#">Register</a></li> </ul> </div> </button> </div> </nav> </div>

<div class="flex justify-center "> <nav class="self-center top-0 w-full max-w-7xl shadow bg-green-500"> <div class="flex justify-between items-center text-white"> <h1 class="uppercase pl-10 py-4 text-xl font-sans font-bold">logo</h1> <ul class="hidden md:flex items-center text-[18px] font-semibold pr-10 space-x-1"> <li class="hover:border border-dotted py-1 rounded-lg px-4"><a href="#">Home</a></li> <li class="hover:border border-dotted py-1 rounded-lg px-4"><a href="#">Portfolio</a></li> <li class="hover:border border-dotted py-1 rounded-lg px-4"><a href="#">Services</a></li> <li class="hover:border border-dotted py-1 rounded-lg px-4"><a href="#">About</a></li> <li class="hover:border border-dotted py-1 rounded-lg px-4 "><a href="#">Pricing</a></li> <button class="hidden md:flex text-base border border-white px-5 py-2 my-0 font-semibold hover:bg-green-600 rounded-2xl">Shop</button> </ul> <button class="block p-3 mx-10 md:hidden hover:bg-green-600 rounded-xl group"> <div class="w-5 my-[3px] h-[3px] bg-white mb-[2px]"></div> <div class="w-5 my-[3px] h-[3px] bg-white mb-[2px]"></div> <div class="w-5 my-[3px] h-[3px] bg-white"></div> <div class="absolute top-0 -left-full opacity-0 h-screen w-[60%] border bg-green-500 group-focus:left-0 group-focus:opacity-100 transition-all ease-in duration-300 "> <ul class="flex flex-col items-center text-[18px] pt-[60px] "> <li class="hover:bg-green-600 py-4 px-6 w-full"><a href="#">Home</a></li> <li class="hover:bg-green-600 py-4 px-6 w-full"><a href="#">Portfolio</a></li> <li class="hover:bg-green-600 py-4 px-6 w-full"><a href="#">Services</a></li> <li class="hover:bg-green-600 py-4 px-6 w-full"><a href="#">About</a></li> <li class="hover:bg-green-600 py-4 px-6 w-full"><a href="#">Pricing</a></li> <li class="hover:bg-green-600 py-2 px-9 mt-3 border-2 border-white "><a href="#">Shop</a></li> </ul> </div> </button> </div> </nav> </div>

<div class="flex justify-center "> <nav class="self-center fixed top-0 w-full max-w-7xl shadow bg-black"> <div class="flex justify-between items-center text-white"> <h1 class="uppercase pl-5 py-4 text-lg font-sans font-bold">tailwind</h1> <ul class="hidden md:flex items-center text-[18px] font-semibold pl-32"> <li class="hover:underline underline-offset-4 decoration-2 decoration-white py-2 rounded-lg px-5"><a href="#">Home</a></li> <li class="hover:underline underline-offset-4 decoration-2 decoration-white py-2 rounded-lg px-5"><a href="#">Contact</a></li> <li class="hover:underline underline-offset-4 decoration-2 decoration-white py-2 rounded-lg px-5"><a href="#">Services</a></li> <li class="hover:underline underline-offset-4 decoration-2 decoration-white py-2 rounded-lg px-5"><a href="#">About</a></li> <li class="hover:underline underline-offset-4 decoration-2 decoration-white py-2 rounded-lg px-5"><a href="#">Pricing</a></li> </ul> <div class="text-white text-center text-base pr-5 hidden lg:inline-flex"> <a href="#" class="w-8 h-8 inline-block rounded-full pt-[6px] hover:text-blue-500"><i class="fa fa-twitter"></i></a> <a href="#" class="w-8 h-8 inline-block rounded-full pt-[5px] hover:text-blue-500"><i class="fa fa-instagram"></i></a> <a href="#" class="w-8 h-8 inline-block rounded-full pt-[5px] hover:text-blue-500"><i class="fa fa-facebook"></i></a> <a href="#" class="w-8 h-8 inline-block rounded-full pt-[5px] hover:text-blue-500"><i class="fa fa-google"></i></a> <a href="#" class="w-8 h-8 inline-block rounded-full pt-[5px] hover:text-blue-500"><i class="fa fa-linkedin"></i></a> </div> <button class="block p-3 mx-10 md:hidden hover:bg-black rounded-xl group"> <div class="w-5 my-[3px] h-[3px] bg-white mb-[2px]"></div> <div class="w-5 my-[3px] h-[3px] bg-white mb-[2px]"></div> <div class="w-5 my-[3px] h-[3px] bg-white"></div> <div class="absolute top-0 -right-full opacity-0 h-screen w-[60%] border bg-black group-focus:right-0 group-focus:opacity-100 transition-all ease-in duration-300 "> <ul class="flex flex-col items-center text-[18px] pt-[60px]"> <li class="hover:border border-white py-4 px-6 w-full"><a href="#">Home</a></li> <li class="hover:border border-white py-4 px-6 w-full"><a href="#">Contacts</a></li> <li class="hover:border border-white py-4 px-6 w-full"><a href="#">Services</a></li> <li class="hover:border border-white py-4 px-6 w-full"><a href="#">About</a></li> <li class="hover:border border-white py-4 px-6 w-full"><a href="#">Pricing</a></li> </ul> </div> </button> </div> </nav> </div> <script src="https://use.fontawesome.com/03f8a0ebd4.js"></script>

<div class="flex justify-center "> <nav class="self-center fixed top-0 w-full max-w-7xl shadow bg-gray-100"> <div class="flex justify-between items-center text-gray-800"> <h1 class="md:order-6 uppercase pl-5 py-4 text-lg font-sans font-bold">tailwind</h1> <ul class="md:order-10 hidden md:flex items-center text-[18px] font-semibold "> <li class="hover:underline underline-offset-4 decoration-2 decoration-gray-800 py-2 rounded-lg px-5"><a href="#">Home</a></li> <li class="hover:underline underline-offset-4 decoration-2 decoration-gray-800 py-2 rounded-lg px-5"><a href="#">Contact</a></li> <li class="hover:underline underline-offset-4 decoration-2 decoration-gray-800 py-2 rounded-lg px-5"><a href="#">Services</a></li> <li class="hover:underline underline-offset-4 decoration-2 decoration-gray-800 py-2 rounded-lg px-5"><a href="#">About</a></li> <li class="hover:underline underline-offset-4 decoration-2 decoration-gray-800 py-2 rounded-lg px-5"><a href="#">Pricing</a></li> </ul> <div class="text-gray-800 text-center text-lg pr-5 hidden lg:inline-flex md:order-9 lg:pl-60"> <a href="#" class="w-8 h-8 inline-block rounded-full pt-[6px] hover:text-blue-500"><i class="fa fa-twitter"></i></a> <a href="#" class="w-8 h-8 inline-block rounded-full pt-[5px] hover:text-blue-500"><i class="fa fa-instagram"></i></a> <a href="#" class="w-8 h-8 inline-block rounded-full pt-[5px] hover:text-blue-500"><i class="fa fa-facebook"></i></a> <a href="#" class="w-8 h-8 inline-block rounded-full pt-[5px] hover:text-blue-500"><i class="fa fa-google"></i></a> <a href="#" class="w-8 h-8 inline-block rounded-full pt-[5px] hover:text-blue-500"><i class="fa fa-linkedin"></i></a> </div> <button class="block p-3 mx-10 md:hidden hover:bg-gray-300 rounded-xl group"> <div class="w-5 my-[3px] h-[3px] bg-gray-800 mb-[2px]"></div> <div class="w-5 my-[3px] h-[3px] bg-gray-800 mb-[2px]"></div> <div class="w-5 my-[3px] h-[3px] bg-gray-800"></div> <div class="absolute top-0 -right-full opacity-0 h-screen w-[60%] border bg-gray-300 group-focus:right-0 group-focus:opacity-100 transition-all ease-in duration-300 "> <ul class="flex flex-col items-center text-[18px] pt-[60px]"> <li class="hover:bg-gray-200 hover:border border-white py-4 px-6 w-full"><a href="#">Home</a></li> <li class="hover:bg-gray-200 hover:border border-white py-4 px-6 w-full"><a href="#">Contacts</a></li> <li class="hover:bg-gray-200 hover:border border-white py-4 px-6 w-full"><a href="#">Services</a></li> <li class="hover:bg-gray-200 hover:border border-white py-4 px-6 w-full"><a href="#">About</a></li> <li class="hover:bg-gray-200 hover:border border-white py-4 px-6 w-full"><a href="#">Pricing</a></li> <li class=" hover:bg-gray-200 py-2 px-9 mt-3 border-2 border-white"><a href="#">Register</a></li> </ul> </div> </button> </div> </nav> </div> <script src="https://use.fontawesome.com/03f8a0ebd4.js"></script>