Tailwind CSS Simple Navbar

=="" !="" open\"="" h-6="" text-lg\">\r\n="" <svg="" x-show="\"!" viewbox="\"0" 0="" 48="" 48\"="" fill="\"none\"" xmlns="\"http:\/\/www.w3.org\/2000\/svg\"\r\n" :class="\"{'transition-full" each-in-out="" transform="" duration-500':!="" open}\">\r\n="" <rect="" width="\"48\"" height="\"48\"" fill-opacity="\"0.01\"><\/rect>\r\n" <path="" d="\"M7.94977" 11.9498h39.9498\"="" stroke="\"currentColor\"" stroke-width="\"2\"" stroke-linecap="\"round\"" stroke-linejoin="\"round\"><\/path>\r\n" 23.9498h39.9498\"="" 35.9498h39.9498\"="" svg>\r\n\r\n="" 24="" 24\"="" feather-x\">\r\n="" <line="" x1="\"18\"" y1="\"6\"" x2="\"6\"" y2="\"18\"><\/line>" svg>\r\n="" button>\r\n="" x-ref="\"tab\"\r\n" :style="\"handleToggle()\"\r\n" w-full="" overflow-hidden="" transition-all="" duration-700="" lg:hidden="" max-h-0\">\r\n="" flex-col="" my-3="" space-y-2="" text-lg="" hover:font-b="" text-gray-600\">\r\n="" <a="" href="https://www.creative-tim.com/"#\"" <hr>\r\n="" px-5="" space-y-6\">\r\n="" grid-cols-2="" gap-y-4="" gap-x-8\">="" \r\n="" font-medium="" text-gray-900="" hover:text-gray-700\">\r\n="" about\r\n="" contact\r\n="" div>="" <div>\r\n="" flex="" items-center="" justify-center="" text-white="" px-4="" py-2="" border="" border-transparent="" rounded-md="" shadow-sm="" text-base="" bg-gray-600="" hover:bg-gray-700\">\r\n="" sign="" up\r\n="" <p="" text-center="" text-gray-500\">\r\n="" existing="" customer?\r\n="" hover:text-gray-900\">\r\n="" in\r\n="" p>\r\n="" lg="" lg:flex="" lg:items-center="" lg:w-auto\">\r\n="" flex-1="" pt-6="" text-gray-500="" lg:pt-0="" list-reset="" lg:flex\">\r\n="" no-underline="" hover:text-gray-900="" link\r\n="" div>\r\n\r\n="" dropdown="" 1="" open:="" false="" }\"="" @mouseleave="\"open" false\"="" inline-block\"="" open,="" 'text-gray-600':="" !open="" }\">\r\n="" @mouseover="\"open" true\"="" p-2="" rounded-md\">\r\n="" <span="" dropdown<\="" span>\r\n="" open="" ?="" '':="" '-rotate-180'\"\r\n="" duration-500="" transform\">\r\n="" h-4="" fill-current\"="" 20="" 20\">\r\n="" 12.95l.707.707l15.657="" 8l-1.414-1.414l10="" 10.828="" 5.757="" 6.586="" 4.343="" 8z\"\="" >\r\n="" svg>="" x-transition:enter="\"transition" ease-out="" duration-300\"\r\n="" x-transition:enter-start="\"opacity-0" scale-90\"\r\n="" x-transition:enter-end="\"opacity-100" scale-100\"\r\n="" x-transition:leave="\"transition" ease-in="" x-transition:leave-start="\"opacity-100" x-transition:leave-end="\"opacity-0" right-0="" py-1="" bg-white="" rounded-lg="" shadow-xl="" min-w-max\">\r\n="" hover:bg-gray-100\">lorem,="" ipsum.<\="" ipsum="" dolor.<\="" hover:bg-gray-100\">lorem="" dolor="" sit="" amet.<\="" whitespace-nowrap="" inline-flex="" -->\r\n<\="" nav>","author_type":"app\\user","author_id":5110,"collection_id":null,"fork_id":null,"votes":1,"score":"5.0","visits":1563,"popularity":167,"slug":"simple-navbar-5","approved":1,"created_at":"2024-07-29t00:00:00.000000z","updated_at":"2024-09-19t05:10:49.000000z","downloads":21,"code_views":252,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\="" \="" cdn.tailwindcss.com","should_tweet":0,"media":[],"author":{"id":5110,"name":"josuapsianturi","slug":"josuapsianturi","bio":"anyone="" can="" code","avatar":"https:\="" avatars.githubusercontent.com\="" u\="" 54291811?v="4","header":null,"created_at":"2021-09-19T07:59:02.000000Z","updated_at":"2023-11-20T12:38:00.000000Z"},"tags":[{"id":8,"name":{"en":"Dropdowns"},"description":"Find" your="" inspiration="" with="" these="" awesome="" examples!="" they="" are="" versatile,="" beautifully="" designed,="" and="" ready-to-use="" in="" tailwind="" project.","meta_description":"find="" project.","slug":{"en":"dropdowns"},"type":null,"order_column":4,"created_at":"2020-09-29t11:19:38.000000z","updated_at":"2022-08-01t16:22:27.000000z","pivot":{"taggable_type":"app\\component","taggable_id":7029,"tag_id":8}},{"id":3,"name":{"en":"navigations"},"description":"looking="" to="" ensure="" a="" predictable="" consistent="" user="" experience="" on="" website?="" check="" out="" our="" 200+="" navigation="" examples="" that="" built="" using="" the="" most="" popular="" utility-first="" framework="" choose="" one="" suits="" needs.","meta_description":"choose="" from="" -="" ui.","slug":{"en":"navigations"},"type":null,"order_column":9,"created_at":"2019-07-04t08:20:17.000000z","updated_at":"2022-08-01t16:12:24.000000z","pivot":{"taggable_type":"app\\component","taggable_id":7029,"tag_id":3}},{"id":28,"name":{"en":"navbars"},"description":"navbar="" is="" used="" list="" of="" links="" positioned="" top="" side="" page.="" see="" below="" collection="" navbar="" you="" add="" directly="" ui="" project.","meta_description":"visit="" project="" links.","slug":{"en":"navbars"},"type":null,"order_column":27,"created_at":"2022-08-31t14:20:14.000000z","updated_at":"2022-12-21t11:02:37.000000z","pivot":{"taggable_type":"app\\component","taggable_id":7029,"tag_id":28}}],"fork":null,"favorites":[]}"="" :edit="false"> Full screen Preview

Download