Components by salnetx | Tailwind CSS Components

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="apple-touch-icon" sizes="180x180" href="https://www.creative-tim.com/twcomponents/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://www.creative-tim.com/twcomponents/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://www.creative-tim.com/twcomponents/favicon-16x16.png"> <link rel="manifest" href="https://www.creative-tim.com/twcomponents/site.webmanifest"> <link rel="mask-icon" href="https://www.creative-tim.com/twcomponents/safari-pinned-tab.svg" color="#0ed3cf"> <meta name="msapplication-TileColor" content="#0ed3cf"> <meta name="theme-color" content="#0ed3cf"> <meta property="og:image" content="https://www.creative-tim.com/twcomponents/og-tailwindcomponents.png" /> <meta property="og:image:width" content="1280" /> <meta property="og:image:height" content="640" /> <meta property="og:image:type" content="image/png" /> <meta property="og:url" content="https://www.creative-tim.com/twcomponents/u/salnetx" /> <meta property="og:title" content="Components by salnetx | Tailwind CSS Components" /> <meta property="og:description" content="Find all the Tailwind CSS components of salnetx." /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@TwComponents" /> <meta name="twitter:title" content="Components by salnetx | Tailwind CSS Components" /> <meta name="twitter:description" content="Find all the Tailwind CSS components of salnetx." /> <meta name="twitter:image" content="https://www.creative-tim.com/twcomponents/og-tailwindcomponents.png" /> <meta name="google-site-verification" content="D4BL2NNYf_eEOMneiD3A61KMM4QiL_qas4wZfm84BVY" /> <title>Components by salnetx | Tailwind CSS Components</title> <meta name="title" content="Components by salnetx | Tailwind CSS Components"> <meta name="description" content="Find all the Tailwind CSS components of salnetx."> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"> <link rel="canonical" href="https://www.creative-tim.com/twcomponents/u/salnetx" itemprop="url"> <link rel="stylesheet" href="https://www.creative-tim.com/twcomponents/css/app.css?id=fccc92a8da50510d706fafd14c5a3b13">  <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-NN5FG6H'); </script>   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-NKDMSK6');</script>  <script> if (window.localStorage) { if (localStorage.getItem("darkMode") == "true") { document.documentElement.classList.add("dark"); } else if (localStorage.getItem("darkMode") == "false") { document.documentElement.classList.remove("dark"); } } </script> <script src="https://www.creative-tim.com/twcomponents/js/app.js?id=566fe444e4b032513b212ccf94aeda25" defer></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.29.1/min/vs/loader.min.js"></script> </head> <body>  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <div id="app" class="flex flex-col min-h-screen font-roboto dark:bg-gray-900"> <header id="header" class="border-b border-gray-100 backdrop-blur-sm bg-white/90 dark:bg-gray-900/70 dark:border-gray-700 xl:fixed xl:w-full xl:top-0 xl:left-0 xl:z-30"> <div class="container px-4 py-6 mx-auto space-y-4 xl:space-y-0 xl:flex xl:items-center xl:justify-between xl:space-x-10"> <div class="flex justify-between"> <div class="text-gray-800 dark:text-gray-200"> <div class="flex items-center"> <a href="https://www.creative-tim.com"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/creative-tim-logo-black.png" alt="logo" style="max-width: 100px" class="dark:hidden" > <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/creative-tim-logo-white.png" alt="logo" style="max-width: 100px" class="dark:block hidden" > </a> <div class="separator h-10 bg-gray-300 mx-2" style="width: 1px"></div> <a href="https://www.creative-tim.com/twcomponents" class="ml-1 2xl:text-lg"> <strong>TW Components</strong> </a> </div> </div> <div class="flex items-center space-x-2 xl:hidden"> <button @click="isOpen = !isOpen" class="p-1 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-gray-800 focus:outline-none"> <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /> </svg> </button> </div> </div> <transition v-cloak enter-active-class="transition duration-100 ease-out transform" enter-class="scale-95 opacity-0" enter-to-class="scale-100 opacity-100" leave-active-class="transition duration-75 ease-in transform" leave-class="scale-100 opacity-100" leave-to-class="scale-95 opacity-0" > <div v-show="isOpen" class="flex flex-col space-y-4 xl:hidden"> <div class="flex flex-col space-y-3 xl:space-y-0 xl:flex-row xl:space-x-5 xl:items-center"> <dropdown padding="p-4" position="xl:right-auto xl:left-0" class="hidden xl:block"> <button class="text-gray-500 dark:text-gray-200 hover:text-gray-800 dark:hover:text-gray-400 xl:text-sm 2xl:text-base transition-colors duration-200 flex items-center space-x-1 focus:outline-none"> <span>Components</span> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /> </svg> </button> <template v-slot:content> <div class="w-[36rem] "> <a href="https://www.creative-tim.com/twcomponents/components" class="inline-flex px-4 text-sm font-medium text-gray-800 dark:text-white hover:underline mt-2"> All Components </a> <div class="grid grid-cols-3 mt-2 gap-x-4 divide-gray-100 dark:divide-gray-700 max-h-[73vh] overflow-y-auto"> <div class="pr-4 border-r border-gray-100 dark:border-gray-700"> <a href="https://www.creative-tim.com/twcomponents/awesome" class="flex justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> awesome <span>69</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/accordions" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Accordions <span>7</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/alerts" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Alerts <span>37</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/alpinejs" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Alpinejs <span>93</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/avatars" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Avatars <span>21</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/badges" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Badges <span>10</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/banner" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Banner <span>13</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/blockquote" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Blockquote <span>3</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/bottom-navigation" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Bottom Navigation <span>5</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/breadcrumb" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Breadcrumb <span>10</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/button-group" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Button Group <span>11</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/buttons" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Buttons <span>441</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/calendar" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Calendar <span>12</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/cards" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Cards <span>840</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/carousel" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Carousel <span>5</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/charts" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Charts <span>13</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/chat" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Chat <span>12</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/checkbox" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Checkbox <span>15</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/chip" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Chip <span>9</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/collapse" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Collapse <span>4</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/cursor" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Cursor <span>0</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/dashboard" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Dashboard <span>36</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/datepicker" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Datepicker <span>3</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/device-mockups" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Device Mockups <span>4</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/drawer" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Drawer <span>2</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/dropdowns" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Dropdowns <span>42</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/faq" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Faq <span>8</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/features" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Features <span>23</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/file-upload" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> File Upload <span>6</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/floating-label" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Floating Label <span>9</span> </a> </div> <div class="pr-4 border-r border-gray-100 dark:border-gray-700"> <a href="https://www.creative-tim.com/twcomponents/awesome" class="hidden justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> awesome <span>69</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/footers" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Footers <span>19</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/forms" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Forms <span>414</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/gallery" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Gallery <span>6</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/grid" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Grid <span>17</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/headers" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Headers <span>36</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/headings" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Headings <span>1</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/hr" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Hr <span>1</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/icons" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Icons <span>103</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/images" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Images <span>17</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/indicators" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Indicators <span>2</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/inputs" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Inputs <span>182</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/jumbotron" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Jumbotron <span>9</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/kbd" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Kbd <span>1</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/kit" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Kit <span>3</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/layout" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Layout <span>89</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/links" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Links <span>3</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/list" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> List <span>51</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/logins" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Logins <span>131</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/masonry" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Masonry <span>5</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/mega-menu" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Mega Menu <span>2</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/menu" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Menu <span>23</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/modals" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Modals <span>62</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/music-player" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Music Player <span>6</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/navbars" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Navbars <span>33</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/navigations" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Navigations <span>296</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/number-input" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Number Input <span>20</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/pages" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Pages <span>699</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/pagination" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Pagination <span>14</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/paragraphs" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Paragraphs <span>4</span> </a> </div> <div class="pr-4 "> <a href="https://www.creative-tim.com/twcomponents/awesome" class="hidden justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> awesome <span>69</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/popover" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Popover <span>11</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/pricing" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Pricing <span>26</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/progress" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Progress <span>9</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/radio-button" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Radio Button <span>9</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/range-slider" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Range Slider <span>7</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/rating" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Rating <span>10</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/scrollbar" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Scrollbar <span>10</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/search-bar" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Search bar <span>9</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/selects" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Selects <span>16</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/shadows" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Shadows <span>1</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/sidebar" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Sidebar <span>43</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/skeleton" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Skeleton <span>5</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/slider" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Slider <span>15</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/speed-dial" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Speed dial <span>0</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/spinner" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Spinner <span>7</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/stepper" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Stepper <span>2</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/switch" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Switch <span>10</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/tables" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Tables <span>76</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/tabs" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Tabs <span>25</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/testimonials" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Testimonials <span>10</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/text" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Text <span>8</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/textarea" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Textarea <span>3</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/timeline" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Timeline <span>18</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/toast" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Toast <span>4</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/toggle" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Toggle <span>13</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/tooltip" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Tooltip <span>9</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/typography" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Typography <span>11</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/video" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Video <span>6</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/widget" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Widget <span>752</span> </a> </div> </div> </div> </template> </dropdown> <a class="text-gray-500 dark:text-gray-200 hover:text-gray-800 dark:hover:text-gray-400 transition-colors duration-200 2xl:text-base xl:text-sm xl:hidden" href="https://www.creative-tim.com/twcomponents/components">Components</a> <dropdown padding="p-2" position="xl:right-auto xl:left-0" class="hidden xl:block"> <button class="flex items-center space-x-1 text-gray-500 transition-colors duration-200 xl:text-sm 2xl:text-base dark:text-gray-200 hover:text-gray-800 dark:hover:text-gray-400 focus:outline-none"> <span>Resources</span> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /> </svg> </button> <template v-slot:content> <div class="w-[28rem] "> <div class="grid grid-cols-2 mt-2 gap-x-4 divide-gray-100 dark:divide-gray-700 max-h-[73vh] overflow-y-auto"> <div class="pr-4 border-r border-gray-100 dark:border-gray-700"> <a href="https://www.creative-tim.com/twcomponents/cheatsheet/" target="_blank" class="flex justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Cheatsheet </a> <a href="https://www.creative-tim.com/twcomponents/gradient-generator/" target="_blank" class="flex justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Gradient Generator </a> <a href="https://www.creative-tim.com/blog/" target="_blank" class="flex justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Blog </a> <a href="https://www.material-tailwind.com/roots-of-ui-ux-design?ref=twcomponents" target="_blank" class="flex justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> UI / UX Book <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> </div> <div class="pr-4"> <a href="https://www.material-tailwind.com/free?ref=twcomponents" target="_blank" class="flex justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Free Blocks <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> <a href="https://www.material-tailwind.com/blocks?ref=twcomponents" target="_blank" class="flex justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> PRO Blocks <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> <a href="https://www.material-tailwind.com/docs/react/installation?ref=twcomponents" target="_blank" class="flex justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> React Components <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> <a href="https://www.creative-tim.com/templates/tailwind-dashboard?ref=twcomponents" target="_blank" class="flex justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Admin & Dashboards <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> <a href="https://www.creative-tim.com/templates/tailwind?ref=twcomponents" target="_blank" class="flex justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Templates & Kits <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> </div> </div> </div> </template> </dropdown> <dropdown> <button class="flex items-center space-x-1 text-gray-500 transition-colors duration-200 xl:text-sm 2xl:text-base dark:text-gray-200 hover:text-gray-800 dark:hover:text-gray-400 focus:outline-none"> <span>Ecosystem</span> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /> </svg> </button> <template v-slot:content> <div class="overflow-y-auto w-60 max-h-96"> <a target="_blank" href="https://www.material-tailwind.com/?ref=tailwindcomponents" class="flex items-center justify-between px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"> <span>Material Tailwind</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> <a target="_blank" href="https://www.material-tailwind.com/docs/react/installation?ref=tailwindcomponents" class="flex items-center justify-between px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"> <span>React Tailwind</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> <a target="_blank" href="https://www.david-ui-angular.com/?ref=tailwindcomponents" class="flex items-center justify-between px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"> <span>Angular Tailwind</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> <a target="_blank" href="https://www.creative-tim.com/product/astro-launch-ui?ref=tailwindcomponents" class="flex items-center justify-between px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"> <span>Astro Tailwind</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> <a target="_blank" href="https://www.creative-tim.com/services/updivision?ref=tailwindcomponents" class="flex items-center justify-between px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"> <span>Custom Development</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> </div> </template> </dropdown> </div> <div class="flex flex-col space-y-4 xl:space-y-0 xl:flex-row xl:items-center xl:space-x-3"> <a target="_blank" href="https://www.material-tailwind.com/blocks?ref=tw-components" class="text-gray-500 transition-colors duration-200 dark:text-gray-200 hover:text-gray-800 dark:hover:text-gray-400 2xl:text-base xl:text-sm relative mr-2" > <span>PRO Blocks</span> <span class="w-[7px] absolute -right-2 -top-1 h-[7px] rounded-full bg-primary"></span> </a> <a class="text-gray-500 dark:text-gray-200 hover:text-gray-800 dark:hover:text-gray-400 2xl:text-base xl:text-sm relative transition-colors duration-200 mr-2" href="https://www.creative-tim.com/twcomponents/discover"> <span>Discover</span> </a> <form action="https://www.creative-tim.com/twcomponents/search" class="flex flex-wrap justify-between md:flex-row"> <input type="search" name="query" class="w-full h-12 px-4 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg xl:transition-all xl:duration-200 xl:w-24 xl:focus:w-28 2xl:w-32 2xl:focus:w-44 xl:h-10 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-primary dark:focus:border-primary focus:outline-none focus:ring focus:ring-primary dark:placeholder-gray-400 focus:ring-opacity-20" placeholder="Search" required> </form> <a href="https://www.creative-tim.com/twcomponents/submit-component" class="flex items-center justify-center h-12 px-5 text-sm font-medium text-center text-white transition-colors duration-200 transform rounded-lg xl:h-10 bg-primary hover:bg-primary/70"> Submit </a> <a href="https://www.creative-tim.com/twcomponents/login" class="flex items-center justify-center h-12 px-4 mt-2 text-sm text-center text-gray-600 transition-colors duration-200 transform border rounded-lg xl:h-10 dark:text-gray-300 dark:border-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none"> Login </a> <dark-mode></dark-mode> </div> </div> </transition> <div class="hidden xl:flex xl:flex-row xl:items-center xl:justify-between xl:flex-1 xl:space-x-2"> <div class="flex flex-col space-y-3 xl:space-y-0 xl:flex-row xl:space-x-5 xl:items-center"> <dropdown padding="p-4" position="xl:right-auto xl:left-0" class="hidden xl:block"> <button class="text-gray-500 dark:text-gray-200 hover:text-gray-800 dark:hover:text-gray-400 xl:text-sm 2xl:text-base transition-colors duration-200 flex items-center space-x-1 focus:outline-none"> <span>Components</span> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /> </svg> </button> <template v-slot:content> <div class="w-[36rem] "> <a href="https://www.creative-tim.com/twcomponents/components" class="inline-flex px-4 text-sm font-medium text-gray-800 dark:text-white hover:underline mt-2"> All Components </a> <div class="grid grid-cols-3 mt-2 gap-x-4 divide-gray-100 dark:divide-gray-700 max-h-[73vh] overflow-y-auto"> <div class="pr-4 border-r border-gray-100 dark:border-gray-700"> <a href="https://www.creative-tim.com/twcomponents/awesome" class="flex justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> awesome <span>69</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/accordions" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Accordions <span>7</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/alerts" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Alerts <span>37</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/alpinejs" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Alpinejs <span>93</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/avatars" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Avatars <span>21</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/badges" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Badges <span>10</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/banner" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Banner <span>13</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/blockquote" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Blockquote <span>3</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/bottom-navigation" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Bottom Navigation <span>5</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/breadcrumb" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Breadcrumb <span>10</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/button-group" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Button Group <span>11</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/buttons" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Buttons <span>441</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/calendar" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Calendar <span>12</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/cards" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Cards <span>840</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/carousel" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Carousel <span>5</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/charts" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Charts <span>13</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/chat" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Chat <span>12</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/checkbox" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Checkbox <span>15</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/chip" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Chip <span>9</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/collapse" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Collapse <span>4</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/cursor" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Cursor <span>0</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/dashboard" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Dashboard <span>36</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/datepicker" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Datepicker <span>3</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/device-mockups" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Device Mockups <span>4</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/drawer" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Drawer <span>2</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/dropdowns" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Dropdowns <span>42</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/faq" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Faq <span>8</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/features" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Features <span>23</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/file-upload" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> File Upload <span>6</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/floating-label" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Floating Label <span>9</span> </a> </div> <div class="pr-4 border-r border-gray-100 dark:border-gray-700"> <a href="https://www.creative-tim.com/twcomponents/awesome" class="hidden justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> awesome <span>69</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/footers" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Footers <span>19</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/forms" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Forms <span>414</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/gallery" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Gallery <span>6</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/grid" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Grid <span>17</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/headers" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Headers <span>36</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/headings" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Headings <span>1</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/hr" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Hr <span>1</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/icons" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Icons <span>103</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/images" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Images <span>17</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/indicators" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Indicators <span>2</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/inputs" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Inputs <span>182</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/jumbotron" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Jumbotron <span>9</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/kbd" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Kbd <span>1</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/kit" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Kit <span>3</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/layout" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Layout <span>89</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/links" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Links <span>3</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/list" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> List <span>51</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/logins" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Logins <span>131</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/masonry" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Masonry <span>5</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/mega-menu" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Mega Menu <span>2</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/menu" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Menu <span>23</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/modals" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Modals <span>62</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/music-player" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Music Player <span>6</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/navbars" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Navbars <span>33</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/navigations" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Navigations <span>296</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/number-input" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Number Input <span>20</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/pages" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Pages <span>699</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/pagination" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Pagination <span>14</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/paragraphs" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Paragraphs <span>4</span> </a> </div> <div class="pr-4 "> <a href="https://www.creative-tim.com/twcomponents/awesome" class="hidden justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> awesome <span>69</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/popover" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Popover <span>11</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/pricing" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Pricing <span>26</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/progress" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Progress <span>9</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/radio-button" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Radio Button <span>9</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/range-slider" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Range Slider <span>7</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/rating" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Rating <span>10</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/scrollbar" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Scrollbar <span>10</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/search-bar" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Search bar <span>9</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/selects" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Selects <span>16</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/shadows" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Shadows <span>1</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/sidebar" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Sidebar <span>43</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/skeleton" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Skeleton <span>5</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/slider" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Slider <span>15</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/speed-dial" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Speed dial <span>0</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/spinner" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Spinner <span>7</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/stepper" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Stepper <span>2</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/switch" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Switch <span>10</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/tables" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Tables <span>76</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/tabs" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Tabs <span>25</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/testimonials" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Testimonials <span>10</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/text" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Text <span>8</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/textarea" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Textarea <span>3</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/timeline" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Timeline <span>18</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/toast" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Toast <span>4</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/toggle" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Toggle <span>13</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/tooltip" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Tooltip <span>9</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/typography" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Typography <span>11</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/video" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Video <span>6</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/widget" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Widget <span>752</span> </a> </div> </div> </div> </template> </dropdown> <a class="text-gray-500 dark:text-gray-200 hover:text-gray-800 dark:hover:text-gray-400 transition-colors duration-200 2xl:text-base xl:text-sm xl:hidden" href="https://www.creative-tim.com/twcomponents/components">Components</a> <dropdown padding="p-2" position="xl:right-auto xl:left-0" class="hidden xl:block"> <button class="flex items-center space-x-1 text-gray-500 transition-colors duration-200 xl:text-sm 2xl:text-base dark:text-gray-200 hover:text-gray-800 dark:hover:text-gray-400 focus:outline-none"> <span>Resources</span> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /> </svg> </button> <template v-slot:content> <div class="w-[28rem] "> <div class="grid grid-cols-2 mt-2 gap-x-4 divide-gray-100 dark:divide-gray-700 max-h-[73vh] overflow-y-auto"> <div class="pr-4 border-r border-gray-100 dark:border-gray-700"> <a href="https://www.creative-tim.com/twcomponents/cheatsheet/" target="_blank" class="flex justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Cheatsheet </a> <a href="https://www.creative-tim.com/twcomponents/gradient-generator/" target="_blank" class="flex justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Gradient Generator </a> <a href="https://www.creative-tim.com/blog/" target="_blank" class="flex justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Blog </a> <a href="https://www.material-tailwind.com/roots-of-ui-ux-design?ref=twcomponents" target="_blank" class="flex justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> UI / UX Book <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> </div> <div class="pr-4"> <a href="https://www.material-tailwind.com/free?ref=twcomponents" target="_blank" class="flex justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Free Blocks <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> <a href="https://www.material-tailwind.com/blocks?ref=twcomponents" target="_blank" class="flex justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> PRO Blocks <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> <a href="https://www.material-tailwind.com/docs/react/installation?ref=twcomponents" target="_blank" class="flex justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> React Components <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> <a href="https://www.creative-tim.com/templates/tailwind-dashboard?ref=twcomponents" target="_blank" class="flex justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Admin & Dashboards <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> <a href="https://www.creative-tim.com/templates/tailwind?ref=twcomponents" target="_blank" class="flex justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Templates & Kits <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> </div> </div> </div> </template> </dropdown> <dropdown> <button class="flex items-center space-x-1 text-gray-500 transition-colors duration-200 xl:text-sm 2xl:text-base dark:text-gray-200 hover:text-gray-800 dark:hover:text-gray-400 focus:outline-none"> <span>Ecosystem</span> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /> </svg> </button> <template v-slot:content> <div class="overflow-y-auto w-60 max-h-96"> <a target="_blank" href="https://www.material-tailwind.com/?ref=tailwindcomponents" class="flex items-center justify-between px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"> <span>Material Tailwind</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> <a target="_blank" href="https://www.material-tailwind.com/docs/react/installation?ref=tailwindcomponents" class="flex items-center justify-between px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"> <span>React Tailwind</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> <a target="_blank" href="https://www.david-ui-angular.com/?ref=tailwindcomponents" class="flex items-center justify-between px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"> <span>Angular Tailwind</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> <a target="_blank" href="https://www.creative-tim.com/product/astro-launch-ui?ref=tailwindcomponents" class="flex items-center justify-between px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"> <span>Astro Tailwind</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> <a target="_blank" href="https://www.creative-tim.com/services/updivision?ref=tailwindcomponents" class="flex items-center justify-between px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"> <span>Custom Development</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> </svg> </a> </div> </template> </dropdown> </div> <div class="flex flex-col space-y-4 xl:space-y-0 xl:flex-row xl:items-center xl:space-x-3"> <a target="_blank" href="https://www.material-tailwind.com/blocks?ref=tw-components" class="text-gray-500 transition-colors duration-200 dark:text-gray-200 hover:text-gray-800 dark:hover:text-gray-400 2xl:text-base xl:text-sm relative mr-2" > <span>PRO Blocks</span> <span class="w-[7px] absolute -right-2 -top-1 h-[7px] rounded-full bg-primary"></span> </a> <a class="text-gray-500 dark:text-gray-200 hover:text-gray-800 dark:hover:text-gray-400 2xl:text-base xl:text-sm relative transition-colors duration-200 mr-2" href="https://www.creative-tim.com/twcomponents/discover"> <span>Discover</span> </a> <form action="https://www.creative-tim.com/twcomponents/search" class="flex flex-wrap justify-between md:flex-row"> <input type="search" name="query" class="w-full h-12 px-4 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg xl:transition-all xl:duration-200 xl:w-24 xl:focus:w-28 2xl:w-32 2xl:focus:w-44 xl:h-10 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-primary dark:focus:border-primary focus:outline-none focus:ring focus:ring-primary dark:placeholder-gray-400 focus:ring-opacity-20" placeholder="Search" required> </form> <a href="https://www.creative-tim.com/twcomponents/submit-component" class="flex items-center justify-center h-12 px-5 text-sm font-medium text-center text-white transition-colors duration-200 transform rounded-lg xl:h-10 bg-primary hover:bg-primary/70"> Submit </a> <a href="https://www.creative-tim.com/twcomponents/login" class="flex items-center justify-center h-12 px-4 mt-2 text-sm text-center text-gray-600 transition-colors duration-200 transform border rounded-lg xl:h-10 dark:text-gray-300 dark:border-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none"> Login </a> <dark-mode></dark-mode> </div> </div> </div> </header> <main class="flex-1 xl:pt-[5.5rem]"> <section class="h-48 sm:h-72 2xl:h-80 bg-gradient-to-r from-[#79fffd] to-primary"></section> <section class="container px-4 py-10 mx-auto -mt-28"> <div class="flex flex-col items-center"> <img class="object-cover w-32 h-32 bg-white border-4 border-white rounded-lg dark:bg-gray-900 dark:border-gray-900" src="https://www.creative-tim.com/twcomponents/storage/avatars/Z0TbtN0bSzW7B6r9j8LUen36NgJkX3gBusOeuMfZ.png" alt="salnetx Profile on Tailwind Components Website"> <div class="flex flex-col items-center mt-4"> <h3 class="text-xl font-semibold text-center text-gray-800 sm:text-3xl dark:text-gray-200">salnetx</h3> <h5 class="text-lg text-center text-gray-500 dark:text-gray-300">@salnetx</h5> <p class="max-w-lg mx-auto mt-2 text-lg text-center text-gray-500 description-link dark:text-gray-300">web developer & designer. <a ref="nofollow" href="https://salnet.xyz">salnet.xyz</a></p> <div class="flex flex-col items-center mt-2 sm:flex-row sm:space-x-6"> <p class="text-gray-500 dark:text-gray-400"><span class="font-bold">9</span> Components</p> <p class="mt-3 text-center text-gray-500 dark:text-gray-400 sm:mt-0">Member Since 1 year ago</p> </div> <div class="flex flex-wrap items-center mt-4 gap-x-3"> <p class="text-sm font-medium text-gray-700 dark:text-gray-300">Share</p> <a target="_blank" href="https://web.facebook.com/sharer.php?u=https://www.creative-tim.com/twcomponents/u/salnetx" class="p-2 text-gray-600 border rounded-lg dark:hover:bg-gray-800 dark:text-white hover:bg-gray-100"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z" fill="currentColor"></path> </svg> </a> <a target="_blank" href="https://twitter.com/intent/tweet?text=salnetx Profile on Tailwind Components Website&url=https://www.creative-tim.com/twcomponents/u/salnetx" class="p-2 text-gray-600 border rounded-lg dark:hover:bg-gray-800 dark:text-white hover:bg-gray-100"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19.995 6.68799C20.8914 6.15208 21.5622 5.30823 21.882 4.31399C21.0397 4.81379 20.118 5.16587 19.157 5.35499C17.8246 3.94552 15.7135 3.60251 14.0034 4.51764C12.2933 5.43277 11.4075 7.37948 11.841 9.26999C8.39062 9.09676 5.17598 7.4669 2.99702 4.78599C1.85986 6.74741 2.44097 9.25477 4.32502 10.516C3.64373 10.4941 2.97754 10.3096 2.38202 9.97799C2.38202 9.99599 2.38202 10.014 2.38202 10.032C2.38241 12.0751 3.82239 13.8351 5.82502 14.24C5.19308 14.4119 4.53022 14.4372 3.88702 14.314C4.45022 16.0613 6.06057 17.2583 7.89602 17.294C6.37585 18.4871 4.49849 19.1342 2.56602 19.131C2.22349 19.1315 1.88123 19.1118 1.54102 19.072C3.50341 20.333 5.78739 21.0023 8.12002 21C11.3653 21.0223 14.484 19.7429 16.7787 17.448C19.0734 15.1531 20.3526 12.0342 20.33 8.78899C20.33 8.60299 20.3257 8.41799 20.317 8.23399C21.1575 7.62659 21.8828 6.87414 22.459 6.01199C21.676 6.35905 20.8455 6.58691 19.995 6.68799Z" fill="currentColor"></path> </svg> </a> <a target="_blank" href="https://www.linkedin.com/sharing/share-offsite/?url=https://www.creative-tim.com/twcomponents/u/salnetx" class="p-2 text-gray-600 border rounded-lg dark:hover:bg-gray-800 dark:text-white focus:outline-none hover:bg-gray-100"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13 21H9V9H13V11C13.8526 9.91525 15.1456 9.26857 16.525 9.237C19.0056 9.25077 21.0072 11.2694 21 13.75V21H17V14.25C16.84 13.1326 15.8818 12.3036 14.753 12.306C14.2593 12.3216 13.7932 12.5378 13.4624 12.9046C13.1316 13.2715 12.9646 13.7573 13 14.25V21ZM7 21H3V9H7V21ZM5 7C3.89543 7 3 6.10457 3 5C3 3.89543 3.89543 3 5 3C6.10457 3 7 3.89543 7 5C7 5.53043 6.78929 6.03914 6.41421 6.41421C6.03914 6.78929 5.53043 7 5 7Z" fill="currentColor"></path> </svg> </a> <a target="_blank" href="http://www.reddit.com/submit?url=https://www.creative-tim.com/twcomponents/u/salnetx&title=salnetx Profile on Tailwind Components Website" class="p-2 text-gray-600 border rounded-lg dark:hover:bg-gray-800 dark:text-white hover:bg-gray-100"> <svg width="22" height="21" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15.4688 6.38672C16.1016 6.38672 16.5938 6.63281 16.9453 7.08984C17.2969 7.58203 17.4023 8.07422 17.2969 8.63672C17.1914 9.19922 16.875 9.62109 16.3125 9.90234C16.3828 10.1836 16.418 10.4648 16.418 10.7812C16.418 11.7656 16.0664 12.6797 15.3984 13.4883C14.7305 14.2969 13.8516 14.9297 12.7266 15.4219C11.6016 15.9141 10.3359 16.125 9 16.125C7.66406 16.125 6.43359 15.9141 5.30859 15.4219C4.18359 14.9297 3.26953 14.2969 2.60156 13.4883C1.93359 12.6797 1.61719 11.7656 1.61719 10.7812C1.61719 10.5 1.65234 10.2188 1.72266 9.9375C1.125 9.65625 0.773438 9.19922 0.667969 8.63672C0.5625 8.07422 0.703125 7.58203 1.05469 7.08984C1.40625 6.63281 1.89844 6.42188 2.53125 6.42188C3.02344 6.42188 3.48047 6.63281 3.86719 6.98438C5.20312 6.07031 6.78516 5.54297 8.64844 5.47266L9.73828 0.621094C9.73828 0.550781 9.80859 0.515625 9.87891 0.445312C9.94922 0.375 10.0195 0.375 10.125 0.375L13.5352 1.14844C13.6406 0.9375 13.8164 0.726562 14.0273 0.585938C14.2383 0.445312 14.4844 0.375 14.7656 0.375C15.1523 0.375 15.4688 0.515625 15.75 0.796875C16.0312 1.07812 16.1719 1.39453 16.1719 1.78125C16.1719 2.16797 16.0312 2.48438 15.75 2.76562C15.4688 3.04688 15.1523 3.15234 14.7656 3.15234C14.3789 3.15234 14.0625 3.04688 13.7812 2.76562C13.5 2.48438 13.3945 2.16797 13.3945 1.78125L10.3008 1.07812L9.31641 5.47266C10.2305 5.50781 11.1094 5.64844 11.9531 5.92969C12.7617 6.21094 13.5 6.52734 14.1328 6.94922C14.4844 6.59766 14.9414 6.42188 15.4688 6.38672ZM4.53516 10.1133C4.53516 10.5 4.67578 10.8164 4.95703 11.0977C5.23828 11.3789 5.55469 11.4844 5.94141 11.4844C6.29297 11.4844 6.60938 11.3789 6.89062 11.0977C7.17188 10.8164 7.3125 10.5 7.3125 10.1133C7.3125 9.72656 7.17188 9.41016 6.89062 9.12891C6.60938 8.84766 6.29297 8.70703 5.94141 8.70703C5.55469 8.70703 5.23828 8.84766 4.95703 9.12891C4.67578 9.41016 4.53516 9.72656 4.53516 10.1133ZM12.0938 13.3828C12.1641 13.3477 12.1992 13.2773 12.1992 13.1719C12.1992 13.1016 12.1641 12.9961 12.0938 12.9258C12.0234 12.8555 11.918 12.8203 11.8477 12.8203C11.7422 12.8203 11.6719 12.8555 11.6016 12.9258C11.25 13.2773 10.7227 13.4883 10.0195 13.5938C9.31641 13.7344 8.61328 13.7344 7.91016 13.5938C7.20703 13.4531 6.67969 13.2422 6.36328 12.9258C6.29297 12.8555 6.22266 12.8203 6.15234 12.8203C6.04688 12.8203 5.97656 12.8555 5.90625 12.9258C5.83594 12.9961 5.80078 13.1016 5.80078 13.1719C5.80078 13.2773 5.83594 13.3477 5.90625 13.3828C6.32812 13.8047 6.92578 14.1211 7.76953 14.2617C8.57812 14.4023 9.38672 14.4023 10.2305 14.2617C11.0391 14.1211 11.6719 13.8047 12.0938 13.3828ZM12.0586 11.4844C12.4102 11.4844 12.7617 11.3789 13.043 11.0977C13.3242 10.8164 13.4648 10.5 13.4648 10.1133C13.4648 9.72656 13.3242 9.41016 13.043 9.12891C12.7617 8.84766 12.4102 8.70703 12.0586 8.70703C11.6719 8.70703 11.3555 8.84766 11.0742 9.12891C10.793 9.41016 10.6875 9.76172 10.6875 10.1133C10.6875 10.5 10.793 10.8164 11.0742 11.0977C11.3555 11.3789 11.6719 11.4844 12.0586 11.4844Z" fill="currentColor"/> </svg> </a> <a target="_blank" href="whatsapp://send?text=https://www.creative-tim.com/twcomponents/u/salnetx" data-action="share/whatsapp/share" class="p-2 text-gray-600 border rounded-lg dark:hover:bg-gray-800 dark:text-white hover:bg-gray-100"> <svg width="21" height="22" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13.3945 2.66016C14.1328 3.43359 14.6953 4.27734 15.1172 5.22656C15.5391 6.17578 15.75 7.16016 15.75 8.17969C15.75 9.58594 15.3633 10.8867 14.6602 12.082C13.957 13.2773 12.9727 14.2266 11.7773 14.9297C10.582 15.6328 9.28125 15.9844 7.875 15.9844C6.53906 15.9844 5.27344 15.668 4.14844 15.0352L0 16.125L1.125 12.082C0.421875 10.8867 0.0703125 9.58594 0.0703125 8.17969C0.0703125 6.77344 0.421875 5.47266 1.125 4.27734C1.82812 3.08203 2.77734 2.13281 3.97266 1.42969C5.16797 0.726562 6.46875 0.375 7.875 0.375C8.89453 0.375 9.87891 0.585938 10.8281 0.972656C11.7773 1.39453 12.6211 1.95703 13.3945 2.66016ZM7.875 14.6836C9.03516 14.6836 10.125 14.4023 11.1445 13.8047C12.1289 13.2422 12.9375 12.4336 13.5352 11.4492C14.1328 10.4648 14.4492 9.375 14.4492 8.17969C14.4492 7.33594 14.2734 6.52734 13.9219 5.71875C13.5703 4.94531 13.0781 4.24219 12.4453 3.60938C11.8125 2.97656 11.1094 2.51953 10.3359 2.16797C9.5625 1.85156 8.71875 1.67578 7.875 1.67578C6.67969 1.67578 5.58984 1.99219 4.60547 2.55469C3.62109 3.15234 2.8125 3.96094 2.25 4.94531C1.65234 5.92969 1.37109 7.01953 1.37109 8.17969C1.37109 9.44531 1.6875 10.5703 2.39062 11.625L2.53125 11.8711L1.86328 14.2617L4.32422 13.6289L4.57031 13.7695C5.55469 14.4023 6.67969 14.6836 7.875 14.6836ZM11.4258 9.79688L11.5312 9.86719C11.6719 9.9375 11.7773 10.0078 11.8125 10.043C11.8125 10.1133 11.8125 10.2188 11.8125 10.3945C11.8125 10.6055 11.7422 10.7812 11.6719 10.9922C11.6016 11.2031 11.3906 11.3789 11.1094 11.5898C10.8281 11.8008 10.582 11.9062 10.3711 11.9062C10.0195 11.9766 9.70312 11.9766 9.42188 11.9062C9.07031 11.8359 8.57812 11.6953 8.01562 11.4141C6.82031 10.9219 5.73047 9.9375 4.74609 8.53125L4.67578 8.46094C4.14844 7.75781 3.90234 7.08984 3.90234 6.45703C3.90234 5.85938 4.11328 5.33203 4.53516 4.875L4.57031 4.83984C4.71094 4.69922 4.88672 4.59375 5.09766 4.59375H5.51953C5.58984 4.59375 5.66016 4.62891 5.73047 4.66406C5.80078 4.69922 5.83594 4.76953 5.90625 4.91016L6.50391 6.35156C6.57422 6.49219 6.57422 6.63281 6.53906 6.70312C6.39844 6.94922 6.25781 7.16016 6.08203 7.33594C5.97656 7.44141 5.90625 7.51172 5.90625 7.58203C5.87109 7.65234 5.90625 7.6875 5.97656 7.75781C6.29297 8.39062 6.67969 8.84766 7.13672 9.19922C7.45312 9.48047 7.94531 9.76172 8.61328 10.0781C8.78906 10.1836 8.92969 10.1836 9.03516 10.043C9.31641 9.69141 9.52734 9.44531 9.66797 9.26953C9.70312 9.19922 9.77344 9.12891 9.84375 9.12891C9.91406 9.12891 9.98438 9.16406 10.0898 9.16406C10.2656 9.23438 10.7227 9.44531 11.4258 9.79688Z" fill="currentColor"/> </svg> </a> <copy-url border="1" url="https://www.creative-tim.com/twcomponents/u/salnetx"></copy-url> </div> <div class="hidden mt-4 sm:space-y-0 sm:flex sm:items-center sm:space-x-3"> <a href="http://twitter.com/salnetx" class="flex items-center justify-center px-4 py-2 space-x-3 text-sm text-gray-600 transition-colors duration-300 transform border rounded-lg dark:text-gray-200 dark:border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none"> <svg class="w-4 h-4 text-blue-500 fill-current" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 612" xml:space="preserve"><g><path d="M612,116.258c-22.525,9.981-46.694,16.75-72.088,19.772c25.929-15.527,45.777-40.155,55.184-69.411 c-24.322,14.379-51.169,24.82-79.775,30.48c-22.907-24.437-55.49-39.658-91.63-39.658c-69.334,0-125.551,56.217-125.551,125.513 c0,9.828,1.109,19.427,3.251,28.606C197.065,206.32,104.556,156.337,42.641,80.386c-10.823,18.51-16.98,40.078-16.98,63.101 c0,43.559,22.181,81.993,55.835,104.479c-20.575-0.688-39.926-6.348-56.867-15.756v1.568c0,60.806,43.291,111.554,100.693,123.104 c-10.517,2.83-21.607,4.398-33.08,4.398c-8.107,0-15.947-0.803-23.634-2.333c15.985,49.907,62.336,86.199,117.253,87.194 c-42.947,33.654-97.099,53.655-155.916,53.655c-10.134,0-20.116-0.612-29.944-1.721c55.567,35.681,121.536,56.485,192.438,56.485 c230.948,0,357.188-191.291,357.188-357.188l-0.421-16.253C573.872,163.526,595.211,141.422,612,116.258z"></path></g></svg> <span>salnetx</span> </a> </div> </div> </div> <div class="mt-4 space-y-2 sm:hidden"> <a href="http://twitter.com/salnetx" class="flex items-center justify-center px-4 py-2 space-x-3 text-sm text-gray-600 transition-colors duration-300 transform border rounded-lg dark:text-gray-200 dark:border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none"> <svg class="w-4 h-4 text-blue-500 fill-current" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 612" xml:space="preserve"><g><path d="M612,116.258c-22.525,9.981-46.694,16.75-72.088,19.772c25.929-15.527,45.777-40.155,55.184-69.411 c-24.322,14.379-51.169,24.82-79.775,30.48c-22.907-24.437-55.49-39.658-91.63-39.658c-69.334,0-125.551,56.217-125.551,125.513 c0,9.828,1.109,19.427,3.251,28.606C197.065,206.32,104.556,156.337,42.641,80.386c-10.823,18.51-16.98,40.078-16.98,63.101 c0,43.559,22.181,81.993,55.835,104.479c-20.575-0.688-39.926-6.348-56.867-15.756v1.568c0,60.806,43.291,111.554,100.693,123.104 c-10.517,2.83-21.607,4.398-33.08,4.398c-8.107,0-15.947-0.803-23.634-2.333c15.985,49.907,62.336,86.199,117.253,87.194 c-42.947,33.654-97.099,53.655-155.916,53.655c-10.134,0-20.116-0.612-29.944-1.721c55.567,35.681,121.536,56.485,192.438,56.485 c230.948,0,357.188-191.291,357.188-357.188l-0.421-16.253C573.872,163.526,595.211,141.422,612,116.258z"></path></g></svg> <span>salnetx</span> </a> </div> <div class="grid gap-8 mt-16 md:grid-cols-2 lg:grid-cols-3"> <div> <a href="https://www.creative-tim.com/twcomponents/component/tailwindcss-card-3" class="relative block overflow-hidden bg-gray-100 rounded-lg shadow aspect-w-16 aspect-h-10 dark:bg-gray-800"> <img class="w-full h-full object-cover" alt="tailwind Tailwind Css Mobile App" loading="" src="https://tailwindcomponents.com/storage/11138/conversions/temp54390-thumb.jpg" alt="temp54390"> </a> <div class="flex items-center justify-between mt-4"> <div class="flex items-center space-x-4"> <a href="https://www.creative-tim.com/twcomponents/u/salnetx" class="flex-shrink-0 w-10 h-10 overflow-hidden rounded-full "> <img class="object-cover w-full h-full" src="https://www.creative-tim.com/twcomponents/storage/avatars/Z0TbtN0bSzW7B6r9j8LUen36NgJkX3gBusOeuMfZ.png" alt="salnetx"> </a> <div class="flex flex-col space-y-1"> <a href="https://www.creative-tim.com/twcomponents/component/tailwindcss-card-3" class="font-semibold text-gray-800 transition-colors duration-300 dark:text-gray-200 sm:text-lg dark:hover:text-primary hover:text-primary hover:underline">Tailwind Css Mobile App</a> <a href="https://www.creative-tim.com/twcomponents/u/salnetx" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">salnetx</a> </div> </div> <div class="flex items-center space-x-2 text-gray-400"> <div class="flex items-center space-x-1"> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M14.243 5.757a6 6 0 10-.986 9.284 1 1 0 111.087 1.678A8 8 0 1118 10a3 3 0 01-4.8 2.401A4 4 0 1114 10a1 1 0 102 0c0-1.537-.586-3.07-1.757-4.243zM12 10a2 2 0 10-4 0 2 2 0 004 0z" clip-rule="evenodd" /> </svg> <span class="text-sm font-medium">3.3</span> </div> <div class="flex items-center space-x-1"> <svg width="13" class="text-gray-400" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13.5799 6.25565C13.7496 6.42529 13.8344 6.62619 13.8344 6.85833C13.8344 7.09047 13.7496 7.29136 13.5799 7.46101C13.4103 7.63065 13.2094 7.71547 12.9773 7.71547H0.97726C0.745117 7.71547 0.544224 7.63065 0.374581 7.46101C0.204939 7.29136 0.120117 7.09047 0.120117 6.85833C0.120117 6.62619 0.204939 6.42529 0.374581 6.25565L6.37458 0.25565C6.54422 0.0860069 6.74512 0.00118542 6.97726 0.00118542C7.2094 0.00118542 7.4103 0.0860069 7.57994 0.25565L13.5799 6.25565Z" fill="currentColor"/> </svg> <span class="text-sm font-medium">2</span> </div> </div> </div> </div> <div> <a href="https://www.creative-tim.com/twcomponents/component/floating-footer" class="relative block overflow-hidden bg-gray-100 rounded-lg shadow aspect-w-16 aspect-h-10 dark:bg-gray-800"> </a> <div class="flex items-center justify-between mt-4"> <div class="flex items-center space-x-4"> <a href="https://www.creative-tim.com/twcomponents/u/salnetx" class="flex-shrink-0 w-10 h-10 overflow-hidden rounded-full "> <img class="object-cover w-full h-full" src="https://www.creative-tim.com/twcomponents/storage/avatars/Z0TbtN0bSzW7B6r9j8LUen36NgJkX3gBusOeuMfZ.png" alt="salnetx"> </a> <div class="flex flex-col space-y-1"> <a href="https://www.creative-tim.com/twcomponents/component/floating-footer" class="font-semibold text-gray-800 transition-colors duration-300 dark:text-gray-200 sm:text-lg dark:hover:text-primary hover:text-primary hover:underline">Tailwind CSS Floating Footer Menu</a> <a href="https://www.creative-tim.com/twcomponents/u/salnetx" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">salnetx</a> </div> </div> <div class="flex items-center space-x-2 text-gray-400"> <div class="flex items-center space-x-1"> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M14.243 5.757a6 6 0 10-.986 9.284 1 1 0 111.087 1.678A8 8 0 1118 10a3 3 0 01-4.8 2.401A4 4 0 1114 10a1 1 0 102 0c0-1.537-.586-3.07-1.757-4.243zM12 10a2 2 0 10-4 0 2 2 0 004 0z" clip-rule="evenodd" /> </svg> <span class="text-sm font-medium">3.3</span> </div> <div class="flex items-center space-x-1"> <svg width="13" class="text-gray-400" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13.5799 6.25565C13.7496 6.42529 13.8344 6.62619 13.8344 6.85833C13.8344 7.09047 13.7496 7.29136 13.5799 7.46101C13.4103 7.63065 13.2094 7.71547 12.9773 7.71547H0.97726C0.745117 7.71547 0.544224 7.63065 0.374581 7.46101C0.204939 7.29136 0.120117 7.09047 0.120117 6.85833C0.120117 6.62619 0.204939 6.42529 0.374581 6.25565L6.37458 0.25565C6.54422 0.0860069 6.74512 0.00118542 6.97726 0.00118542C7.2094 0.00118542 7.4103 0.0860069 7.57994 0.25565L13.5799 6.25565Z" fill="currentColor"/> </svg> <span class="text-sm font-medium">1</span> </div> </div> </div> </div> <div> <a href="https://www.creative-tim.com/twcomponents/component/card-45" class="relative block overflow-hidden bg-gray-100 rounded-lg shadow aspect-w-16 aspect-h-10 dark:bg-gray-800"> <img class="w-full h-full object-cover" alt="tailwind Pricing Card" loading="" src="https://tailwindcomponents.com/storage/10947/conversions/temp21236-thumb.jpg" alt="temp21236"> </a> <div class="flex items-center justify-between mt-4"> <div class="flex items-center space-x-4"> <a href="https://www.creative-tim.com/twcomponents/u/salnetx" class="flex-shrink-0 w-10 h-10 overflow-hidden rounded-full "> <img class="object-cover w-full h-full" src="https://www.creative-tim.com/twcomponents/storage/avatars/Z0TbtN0bSzW7B6r9j8LUen36NgJkX3gBusOeuMfZ.png" alt="salnetx"> </a> <div class="flex flex-col space-y-1"> <a href="https://www.creative-tim.com/twcomponents/component/card-45" class="font-semibold text-gray-800 transition-colors duration-300 dark:text-gray-200 sm:text-lg dark:hover:text-primary hover:text-primary hover:underline">Pricing Card</a> <a href="https://www.creative-tim.com/twcomponents/u/salnetx" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">salnetx</a> </div> </div> <div class="flex items-center space-x-2 text-gray-400"> <div class="flex items-center space-x-1"> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M14.243 5.757a6 6 0 10-.986 9.284 1 1 0 111.087 1.678A8 8 0 1118 10a3 3 0 01-4.8 2.401A4 4 0 1114 10a1 1 0 102 0c0-1.537-.586-3.07-1.757-4.243zM12 10a2 2 0 10-4 0 2 2 0 004 0z" clip-rule="evenodd" /> </svg> <span class="text-sm font-medium">3.3</span> </div> </div> </div> </div> <div> <a href="https://www.creative-tim.com/twcomponents/component/template" class="relative block overflow-hidden bg-gray-100 rounded-lg shadow aspect-w-16 aspect-h-10 dark:bg-gray-800"> <img class="w-full h-full object-cover" alt="tailwind Template" loading="" src="https://tailwindcomponents.com/storage/10924/conversions/temp81058-thumb.jpg" alt="temp81058"> </a> <div class="flex items-center justify-between mt-4"> <div class="flex items-center space-x-4"> <a href="https://www.creative-tim.com/twcomponents/u/salnetx" class="flex-shrink-0 w-10 h-10 overflow-hidden rounded-full "> <img class="object-cover w-full h-full" src="https://www.creative-tim.com/twcomponents/storage/avatars/Z0TbtN0bSzW7B6r9j8LUen36NgJkX3gBusOeuMfZ.png" alt="salnetx"> </a> <div class="flex flex-col space-y-1"> <a href="https://www.creative-tim.com/twcomponents/component/template" class="font-semibold text-gray-800 transition-colors duration-300 dark:text-gray-200 sm:text-lg dark:hover:text-primary hover:text-primary hover:underline">Template</a> <a href="https://www.creative-tim.com/twcomponents/u/salnetx" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">salnetx</a> </div> </div> <div class="flex items-center space-x-2 text-gray-400"> <div class="flex items-center space-x-1"> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M14.243 5.757a6 6 0 10-.986 9.284 1 1 0 111.087 1.678A8 8 0 1118 10a3 3 0 01-4.8 2.401A4 4 0 1114 10a1 1 0 102 0c0-1.537-.586-3.07-1.757-4.243zM12 10a2 2 0 10-4 0 2 2 0 004 0z" clip-rule="evenodd" /> </svg> <span class="text-sm font-medium">3.3</span> </div> <div class="flex items-center space-x-1"> <svg width="13" class="text-gray-400" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13.5799 6.25565C13.7496 6.42529 13.8344 6.62619 13.8344 6.85833C13.8344 7.09047 13.7496 7.29136 13.5799 7.46101C13.4103 7.63065 13.2094 7.71547 12.9773 7.71547H0.97726C0.745117 7.71547 0.544224 7.63065 0.374581 7.46101C0.204939 7.29136 0.120117 7.09047 0.120117 6.85833C0.120117 6.62619 0.204939 6.42529 0.374581 6.25565L6.37458 0.25565C6.54422 0.0860069 6.74512 0.00118542 6.97726 0.00118542C7.2094 0.00118542 7.4103 0.0860069 7.57994 0.25565L13.5799 6.25565Z" fill="currentColor"/> </svg> <span class="text-sm font-medium">1</span> </div> </div> </div> </div> <div> <a href="https://www.creative-tim.com/twcomponents/component/tailwindcss-headers" class="relative block overflow-hidden bg-gray-100 rounded-lg shadow aspect-w-16 aspect-h-10 dark:bg-gray-800"> <img class="w-full h-full object-cover" alt="tailwind Tailwindcss Headers" loading="" src="https://tailwindcomponents.com/storage/10885/conversions/temp70420-thumb.jpg" alt="temp70420"> </a> <div class="flex items-center justify-between mt-4"> <div class="flex items-center space-x-4"> <a href="https://www.creative-tim.com/twcomponents/u/salnetx" class="flex-shrink-0 w-10 h-10 overflow-hidden rounded-full "> <img class="object-cover w-full h-full" src="https://www.creative-tim.com/twcomponents/storage/avatars/Z0TbtN0bSzW7B6r9j8LUen36NgJkX3gBusOeuMfZ.png" alt="salnetx"> </a> <div class="flex flex-col space-y-1"> <a href="https://www.creative-tim.com/twcomponents/component/tailwindcss-headers" class="font-semibold text-gray-800 transition-colors duration-300 dark:text-gray-200 sm:text-lg dark:hover:text-primary hover:text-primary hover:underline">Tailwindcss Headers</a> <a href="https://www.creative-tim.com/twcomponents/u/salnetx" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">salnetx</a> </div> </div> <div class="flex items-center space-x-2 text-gray-400"> <div class="flex items-center space-x-1"> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M14.243 5.757a6 6 0 10-.986 9.284 1 1 0 111.087 1.678A8 8 0 1118 10a3 3 0 01-4.8 2.401A4 4 0 1114 10a1 1 0 102 0c0-1.537-.586-3.07-1.757-4.243zM12 10a2 2 0 10-4 0 2 2 0 004 0z" clip-rule="evenodd" /> </svg> <span class="text-sm font-medium">3.3</span> </div> <div class="flex items-center space-x-1"> <svg width="13" class="text-gray-400" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13.5799 6.25565C13.7496 6.42529 13.8344 6.62619 13.8344 6.85833C13.8344 7.09047 13.7496 7.29136 13.5799 7.46101C13.4103 7.63065 13.2094 7.71547 12.9773 7.71547H0.97726C0.745117 7.71547 0.544224 7.63065 0.374581 7.46101C0.204939 7.29136 0.120117 7.09047 0.120117 6.85833C0.120117 6.62619 0.204939 6.42529 0.374581 6.25565L6.37458 0.25565C6.54422 0.0860069 6.74512 0.00118542 6.97726 0.00118542C7.2094 0.00118542 7.4103 0.0860069 7.57994 0.25565L13.5799 6.25565Z" fill="currentColor"/> </svg> <span class="text-sm font-medium">5</span> </div> </div> </div> </div> <div> <a href="https://www.creative-tim.com/twcomponents/component/nav-bar" class="relative block overflow-hidden bg-gray-100 rounded-lg shadow aspect-w-16 aspect-h-10 dark:bg-gray-800"> <img class="w-full h-full object-cover" alt="tailwind Nav Bar" loading="" src="https://tailwindcomponents.com/storage/10886/conversions/temp37128-thumb.jpg" alt="temp37128"> </a> <div class="flex items-center justify-between mt-4"> <div class="flex items-center space-x-4"> <a href="https://www.creative-tim.com/twcomponents/u/salnetx" class="flex-shrink-0 w-10 h-10 overflow-hidden rounded-full "> <img class="object-cover w-full h-full" src="https://www.creative-tim.com/twcomponents/storage/avatars/Z0TbtN0bSzW7B6r9j8LUen36NgJkX3gBusOeuMfZ.png" alt="salnetx"> </a> <div class="flex flex-col space-y-1"> <a href="https://www.creative-tim.com/twcomponents/component/nav-bar" class="font-semibold text-gray-800 transition-colors duration-300 dark:text-gray-200 sm:text-lg dark:hover:text-primary hover:text-primary hover:underline">Nav Bar</a> <a href="https://www.creative-tim.com/twcomponents/u/salnetx" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">salnetx</a> </div> </div> <div class="flex items-center space-x-2 text-gray-400"> <div class="flex items-center space-x-1"> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M14.243 5.757a6 6 0 10-.986 9.284 1 1 0 111.087 1.678A8 8 0 1118 10a3 3 0 01-4.8 2.401A4 4 0 1114 10a1 1 0 102 0c0-1.537-.586-3.07-1.757-4.243zM12 10a2 2 0 10-4 0 2 2 0 004 0z" clip-rule="evenodd" /> </svg> <span class="text-sm font-medium">3.3</span> </div> </div> </div> </div> <div> <a href="https://www.creative-tim.com/twcomponents/component/tailwindcss-card-2" class="relative block overflow-hidden bg-gray-100 rounded-lg shadow aspect-w-16 aspect-h-10 dark:bg-gray-800"> <img class="w-full h-full object-cover" alt="tailwind Tailwind CSS Card" loading="" src="https://tailwindcomponents.com/storage/10291/conversions/temp65528-thumb.jpg" alt="temp65528"> </a> <div class="flex items-center justify-between mt-4"> <div class="flex items-center space-x-4"> <a href="https://www.creative-tim.com/twcomponents/u/salnetx" class="flex-shrink-0 w-10 h-10 overflow-hidden rounded-full "> <img class="object-cover w-full h-full" src="https://www.creative-tim.com/twcomponents/storage/avatars/Z0TbtN0bSzW7B6r9j8LUen36NgJkX3gBusOeuMfZ.png" alt="salnetx"> </a> <div class="flex flex-col space-y-1"> <a href="https://www.creative-tim.com/twcomponents/component/tailwindcss-card-2" class="font-semibold text-gray-800 transition-colors duration-300 dark:text-gray-200 sm:text-lg dark:hover:text-primary hover:text-primary hover:underline">Tailwind CSS Card</a> <a href="https://www.creative-tim.com/twcomponents/u/salnetx" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">salnetx</a> </div> </div> <div class="flex items-center space-x-2 text-gray-400"> <div class="flex items-center space-x-1"> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M14.243 5.757a6 6 0 10-.986 9.284 1 1 0 111.087 1.678A8 8 0 1118 10a3 3 0 01-4.8 2.401A4 4 0 1114 10a1 1 0 102 0c0-1.537-.586-3.07-1.757-4.243zM12 10a2 2 0 10-4 0 2 2 0 004 0z" clip-rule="evenodd" /> </svg> <span class="text-sm font-medium">3.3</span> </div> <div class="flex items-center space-x-1"> <svg width="13" class="text-gray-400" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13.5799 6.25565C13.7496 6.42529 13.8344 6.62619 13.8344 6.85833C13.8344 7.09047 13.7496 7.29136 13.5799 7.46101C13.4103 7.63065 13.2094 7.71547 12.9773 7.71547H0.97726C0.745117 7.71547 0.544224 7.63065 0.374581 7.46101C0.204939 7.29136 0.120117 7.09047 0.120117 6.85833C0.120117 6.62619 0.204939 6.42529 0.374581 6.25565L6.37458 0.25565C6.54422 0.0860069 6.74512 0.00118542 6.97726 0.00118542C7.2094 0.00118542 7.4103 0.0860069 7.57994 0.25565L13.5799 6.25565Z" fill="currentColor"/> </svg> <span class="text-sm font-medium">6</span> </div> </div> </div> </div> <div> <a href="https://www.creative-tim.com/twcomponents/component/simple-landing-page" class="relative block overflow-hidden bg-gray-100 rounded-lg shadow aspect-w-16 aspect-h-10 dark:bg-gray-800"> <img class="w-full h-full object-cover" alt="tailwind Tailwind CSS Simple Landing Page" loading="" src="https://tailwindcomponents.com/storage/9951/conversions/temp61899-thumb.jpg" alt="temp61899"> </a> <div class="flex items-center justify-between mt-4"> <div class="flex items-center space-x-4"> <a href="https://www.creative-tim.com/twcomponents/u/salnetx" class="flex-shrink-0 w-10 h-10 overflow-hidden rounded-full "> <img class="object-cover w-full h-full" src="https://www.creative-tim.com/twcomponents/storage/avatars/Z0TbtN0bSzW7B6r9j8LUen36NgJkX3gBusOeuMfZ.png" alt="salnetx"> </a> <div class="flex flex-col space-y-1"> <a href="https://www.creative-tim.com/twcomponents/component/simple-landing-page" class="font-semibold text-gray-800 transition-colors duration-300 dark:text-gray-200 sm:text-lg dark:hover:text-primary hover:text-primary hover:underline">Tailwind CSS Simple Landing Page</a> <a href="https://www.creative-tim.com/twcomponents/u/salnetx" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">salnetx</a> </div> </div> <div class="flex items-center space-x-2 text-gray-400"> <div class="flex items-center space-x-1"> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M14.243 5.757a6 6 0 10-.986 9.284 1 1 0 111.087 1.678A8 8 0 1118 10a3 3 0 01-4.8 2.401A4 4 0 1114 10a1 1 0 102 0c0-1.537-.586-3.07-1.757-4.243zM12 10a2 2 0 10-4 0 2 2 0 004 0z" clip-rule="evenodd" /> </svg> <span class="text-sm font-medium">3.0</span> </div> <div class="flex items-center space-x-1"> <svg width="13" class="text-gray-400" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13.5799 6.25565C13.7496 6.42529 13.8344 6.62619 13.8344 6.85833C13.8344 7.09047 13.7496 7.29136 13.5799 7.46101C13.4103 7.63065 13.2094 7.71547 12.9773 7.71547H0.97726C0.745117 7.71547 0.544224 7.63065 0.374581 7.46101C0.204939 7.29136 0.120117 7.09047 0.120117 6.85833C0.120117 6.62619 0.204939 6.42529 0.374581 6.25565L6.37458 0.25565C6.54422 0.0860069 6.74512 0.00118542 6.97726 0.00118542C7.2094 0.00118542 7.4103 0.0860069 7.57994 0.25565L13.5799 6.25565Z" fill="currentColor"/> </svg> <span class="text-sm font-medium">3</span> </div> </div> </div> </div> <div> <a href="https://www.creative-tim.com/twcomponents/component/tailwindcss-card-1" class="relative block overflow-hidden bg-gray-100 rounded-lg shadow aspect-w-16 aspect-h-10 dark:bg-gray-800"> <img class="w-full h-full object-cover" alt="tailwind Tailwind CSS Social Cards" loading="" src="https://tailwindcomponents.com/storage/9950/conversions/temp18636-thumb.jpg" alt="temp18636"> </a> <div class="flex items-center justify-between mt-4"> <div class="flex items-center space-x-4"> <a href="https://www.creative-tim.com/twcomponents/u/salnetx" class="flex-shrink-0 w-10 h-10 overflow-hidden rounded-full "> <img class="object-cover w-full h-full" src="https://www.creative-tim.com/twcomponents/storage/avatars/Z0TbtN0bSzW7B6r9j8LUen36NgJkX3gBusOeuMfZ.png" alt="salnetx"> </a> <div class="flex flex-col space-y-1"> <a href="https://www.creative-tim.com/twcomponents/component/tailwindcss-card-1" class="font-semibold text-gray-800 transition-colors duration-300 dark:text-gray-200 sm:text-lg dark:hover:text-primary hover:text-primary hover:underline">Tailwind CSS Social Cards</a> <a href="https://www.creative-tim.com/twcomponents/u/salnetx" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">salnetx</a> </div> </div> <div class="flex items-center space-x-2 text-gray-400"> <div class="flex items-center space-x-1"> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M14.243 5.757a6 6 0 10-.986 9.284 1 1 0 111.087 1.678A8 8 0 1118 10a3 3 0 01-4.8 2.401A4 4 0 1114 10a1 1 0 102 0c0-1.537-.586-3.07-1.757-4.243zM12 10a2 2 0 10-4 0 2 2 0 004 0z" clip-rule="evenodd" /> </svg> <span class="text-sm font-medium">3.0</span> </div> </div> </div> </div> </div> </section> </main>   <footer class="relative bg-gray-900 px-8 pt-24 pb-6"> <div class="container mx-auto"> <div class="flex flex-wrap"> <div class="mx-auto w-full md:px-24"> <div class="items-top mb-6 flex flex-wrap"> <div class="w-6/12 pt-6 md:ml-auto md:px-4 md:pt-0 xl:w-3/12"> <span class="text-md mb-4 block font-medium text-white">Company</span> <ul class="list-unstyled"> <li> <a href="https://www.creative-tim.com/presentation?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" > About Us </a> </li> <li> <a href="https://github.com/creativetimofficial" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" target="_blank"> Github </a> </li> <li> <a href="https://www.creative-tim.com/templates/free?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" > Freebies </a> </li> <li> <a href="https://www.creative-tim.com/templates/premium?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" > Premium </a> </li> <li> <a href="https://www.creative-tim.com/blog?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" target="_blank"> Blog </a> </li> <li> <a href="https://www.creative-tim.com/affiliates/new?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" > Affiliate Program </a> </li> <li> <a href="https://www.creative-tim.com/club?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" target="_blank"> Creative Tim Club </a> </li> </ul> </div> <div class="w-6/12 pt-6 md:ml-auto md:px-4 md:pt-0 xl:w-3/12"> <span class="text-md mb-4 block font-medium text-white">Help and Support</span> <ul class="list-unstyled"> <li> <a href="https://www.creative-tim.com/knowledge-center?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" target="_blank"> Knowledge Center </a> </li> <li> <a href="https://www.creative-tim.com/contact-us?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" target="_blank"> Contact Us </a> </li> <li> <a href="https://www.creative-tim.com/support-terms?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" target="_blank"> Premium Support </a> </li> <li> <a href="https://www.creative-tim.com/services/updivision/?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" target="_blank"> Custom Development </a> </li> <li> <a href="https://www.creative-tim.com/knowledge-center/terms-of-service/?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" > Terms & Conditions </a> </li> <li> <a href="https://creative-tim.com/knowledge-center/privacy-policy/?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" > Privacy Policy </a> </li> <li> <a href="https://www.creative-tim.com/license?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" > Licenses </a> </li> <li> <a href="https://iradesign.io/?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" target="_blank"> Illustrations </a> </li> </ul> </div> <div class="w-6/12 pt-6 md:ml-auto md:px-4 md:pt-0 xl:w-3/12"> <span class="text-md mb-4 block font-medium text-white">Tailwind Resources</span> <ul class="list-unstyled"> <li> <a href="https://www.creative-tim.com/templates/tailwind-dashboard?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" target="_blank"> Admin & Dashboards </a> </li> <li> <a href=" https://www.creative-tim.com/templates/tailwind/?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" target="_blank"> Templates & Kits </a> </li> <li> <a href="https://www.material-tailwind.com/?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" target="_blank"> React & Tailwind Framework </a> </li> <li> <a href="https://www.material-tailwind.com/?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" target="_blank"> HTML & Tailwind Framework </a> </li> <li> <a href="https://www.material-tailwind.com/figma?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" target="_blank"> Figma Design System </a> </li> <li> <a href="https://www.creative-tim.com/twcomponents/cheatsheet/" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" > TW Cheatsheet </a> </li> <li> <a href="https://www.creative-tim.com/twcomponents/gradient-generator/" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" > TW Gradient Generator </a> </li> <li> <a href="https://www.creative-tim.com/twcomponents/" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" > TW Components </a> </li> </ul> </div> <div class="w-6/12 pt-6 md:ml-auto md:px-4 md:pt-0 xl:w-3/12"> <span class="text-md mb-4 block font-medium text-white">Developer Resources</span> <ul class="list-unstyled"> <li> <a href="https://www.galichat.com/?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" target="_blank"> GaliChat AI Assistant </a> </li> <li> <a href="https://www.creative-tim.com/gpts?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" target="_blank"> GPTs Collection </a> </li> <li> <a href="https://www.creative-tim.com/cheatsheet/bootstrap4?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" target="_blank"> Bootstrap Cheat Sheet </a> </li> <li> <a href="https://www.creative-tim.com/cheatsheet/chatgpt-prompts/?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" target="_blank"> ChatGPT Prompts </a> </li> <li> <a href="https://code-mentor.ai/?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" target="_blank"> AI Code Mentor </a> </li> <li> <a href="https://www.digitalocean.com/?refcode=276af09d9975&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=CopyPaste" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" target="_blank"> Digital Ocean </a> </li> <li> <a href="https://www.creative-tim.com/software?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" target="_blank"> Top Software Companies </a> </li> <li> <a href="https://www.creative-tim.com/software-engineering-intelligence?ref=twcomponents" class="block pb-2 text-sm font-normal leading-relaxed text-white/60 transition-colors hover:text-white" target="_blank"> Software Engineering Intelligence </a> </li> </ul> </div> </div> </div> </div> <hr class="my-6 border-gray-500"> <div class="w-full md:w-4/12 mx-auto text-center"> <a href="https://www.creative-tim.com/" class="mx-auto inline-block"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/software/logo-creative-tim.png" alt="logo" class="max-w-[100px]"> </a> </div> <div class="flex flex-wrap items-center justify-center gap-2"> <div class="text-center"> <div class="text-md mt-2 py-1 font-normal text-white/60">Web, Platform & Design Copyright © 2025 <a href="https://www.creative-tim.com" class="text-inherit transition-all">Creative Tim. </a> <br/> Component copyrights belongs to their authors. Made with 鉂わ笍 for a better web. </div> </div> </div> </div> </footer> </div> <script src="//cdn.carbonads.com/carbon.js?serve=CE7DEK7J&placement=tailwindcomponentscom" id="_carbonads_js"></script> <style> #carbonads { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; } #carbonads { display: flex; position: fixed; bottom: 60px; right: 30px; z-index:50; max-width: 330px; background-color: hsl(0, 0%, 98%); box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, .1); } #carbonads a { color: inherit; text-decoration: none; } #carbonads a:hover { color: inherit; } #carbonads span { position: relative; display: block; overflow: hidden; } #carbonads .carbon-wrap { display: flex; } .carbon-img { display: block; margin: 0; line-height: 1; } .carbon-img img { display: block; } .carbon-text { font-size: 13px; padding: 10px; line-height: 1.5; text-align: left; } .carbon-poweredby { display: block; padding: 8px 10px; background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4); text-align: center; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; font-size: 9px; line-height: 1; } </style>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-110182129-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-110182129-1'); </script>  <noscript> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NN5FG6H" height="0" width="0" style="display:none;visibility:hidden"></iframe> </noscript>  <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebSite", "url": "https://www.creative-tim.com/twcomponents", "potentialAction": { "@type": "SearchAction", "target": "https://www.creative-tim.com/twcomponents/search?query={query}", "query-input": "required name=query" } } </script> </body> </html>

CINXE.COM

Components by salnetx | Tailwind CSS Components