Tailwind CSS Components - 600+ Free Examples and Templates

<!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" /> <meta property="og:title" content="Tailwind CSS Components - 600+ Free Examples and Templates" /> <meta property="og:description" content="A free repository of open source Tailwind CSS components and templates to bootstrap your new apps, projects or landing sites!" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@TwComponents" /> <meta name="twitter:title" content="Tailwind CSS Components - 600+ Free Examples and Templates" /> <meta name="twitter:description" content="A free repository of open source Tailwind CSS components and templates to bootstrap your new apps, projects or landing sites!" /> <meta name="twitter:image" content="https://www.creative-tim.com/twcomponents/og-tailwindcomponents.png" /> <meta name="google-site-verification" content="D4BL2NNYf_eEOMneiD3A61KMM4QiL_qas4wZfm84BVY" /> <title>Tailwind CSS Components - 600+ Free Examples and Templates</title> <meta name="title" content="Tailwind CSS Components - 600+ Free Examples and Templates"> <meta name="description" content="A free repository of open source Tailwind CSS components and templates to bootstrap your new apps, projects or landing sites!"> <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" itemprop="url"> <link rel="stylesheet" href="https://www.creative-tim.com/twcomponents/css/app.css?id=fccc92a8da50510d706fafd14c5a3b13"> <style> #native-card-js .native-card { display: flex; position: relative; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; box-sizing: border-box; text-decoration: none; border-radius: 8px; box-shadow: 0 0 2px hsl(0deg 0% 0% / 25%); height: 256px; flex-direction: column; align-items: flex-start; justify-content: center; } @media (max-width: 576px){ #native-card-js .native-card { height: 192px; } } #native-card-js .native-logo { margin-bottom: 10px; width: auto; height: 40px; } #native-card-js .native-desc { margin-bottom: 20px; font-size: 16px; line-height: 1.4; } #native-card-js .native-cta { display: inline-block; padding: 8px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; letter-spacing: .4px; text-transform: uppercase; border: none !important; border-radius: 4px; } #native-card-js .native-sponsored { position: absolute; top: 0; right: 0; padding: 4px 8px; font-size: 8px; font-weight: 600; line-height: 1; letter-spacing: .1px; text-transform: uppercase; border-top-right-radius: 8px; border-bottom-left-radius: 8px; } </style> <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></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-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>34</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>20</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>9</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>9</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>9</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>440</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>830</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>11</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>8</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>3</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>2</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>41</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>18</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>410</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>102</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>181</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>88</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>50</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>129</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>61</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>30</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>698</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>13</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>10</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>8</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>9</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>9</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>8</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>42</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>9</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>75</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>24</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>9</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>16</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>12</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> <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>34</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>20</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>9</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>9</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>9</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>440</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>830</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>11</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>8</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>3</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>2</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>41</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>18</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>410</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>102</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>181</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>88</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>50</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>129</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>61</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>30</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>698</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>13</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>10</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>8</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>9</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>9</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>8</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>42</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>9</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>75</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>24</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>9</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>16</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>12</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> <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="container px-4 py-10 mx-auto lg:h-128 lg:space-x-8 lg:flex lg:items-center"> <div class="w-full text-center lg:text-left lg:w-1/2 lg:-mt-8"> <h1 class="text-3xl leading-snug text-gray-800 dark:text-gray-200 md:text-4xl"> A <span class="font-semibold">free repository</span> for community <br class="hidden lg:block"> components using <span class="font-semibold underline decoration-primary">Tailwind CSS</span> </h1> <p class="mt-4 text-lg text-gray-500 dark:text-gray-300">Open source Tailwind UI components and templates to <br class="hidden lg:block"> bootstrap your new apps, projects or landing sites!</p> <div class="mt-6 bg-transparent border rounded-lg dark:border-gray-700 lg:w-2/3 focus-within:border-primary focus-within:ring focus-within:ring-primary dark:focus-within:border-primary focus-within:ring-opacity-20"> <form action="https://www.creative-tim.com/twcomponents/search" class="flex flex-wrap justify-between md:flex-row"> <input type="search" name="query" class="flex-1 h-10 px-4 m-1 text-gray-700 placeholder-gray-400 bg-transparent border-none appearance-none lg:h-12 dark:text-gray-200 focus:outline-none focus:placeholder-transparent focus:ring-0" placeholder="Search Components" required> <button type="submit" class="flex items-center justify-center w-full p-2 m-1 text-white transition-colors duration-300 transform rounded-lg lg:w-12 lg:h-12 lg:p-0 bg-primary hover:bg-primary/70 focus:outline-none focus:bg-primary/70"> <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg> </button> </form> </div> </div> <div class="w-full mt-4 lg:mt-0 lg:w-1/2"> <img class="w-full h-full max-w-md mx-auto" src="https://www.creative-tim.com/twcomponents/svg/website-designer-bro-purple.svg" alt="tailwind css components"> </div> </section> <section class="container px-4 pt-4 pb-10 mx-auto"> <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Latest components</h3> <p class="mt-4 text-gray-500 dark:text-gray-400">The newest featured Tailwind CSS components and templates from the community</p> <div class="grid gap-8 mt-8 md:grid-cols-2 lg:grid-cols-3"> <div id="native-card-js" class="row-start-2 native-js md:col-start-2 md:col-end-3 lg:col-start-3 lg:col-end-4"> <div class="hide-with-banner"> <div class="relative overflow-hidden rounded-lg"> <div class="relative hide-with-banner"> <a href="https://www.creative-tim.com/builder#soft-ui-dashboard-tailwind-builder" target="_blank" class="flex flex-col w-full h-full py-5"> <div class="z-10 flex-col items-start justify-center px-6"> <div class="absolute bg-gray-900 w-full h-full top-0 left-0 rounded-lg opacity-50 z-9"></div> <div class="z-10 relative"> <img src="https://www.creative-tim.com/twcomponents/images/ap/tailwind-logo.png" alt="tailwind-logo" class="h-8 mb-4" /> <p class="mt-3 text-sm tracking-wide text-white">Low Code</p> <p class="mb-5 text-base font-bold tracking-wide text-white md:text-xl">Soft UI Dashboard </br> Tailwind Builder</p> <div class="mb-3"> <span class="px-5 py-2 mt-2 text-xs font-bold text-white rounded-lg shadow-md bg-gradient-to-tl from-purple-700 to-pink-500 uppercase"> Try for free </span> </div> </div> </div> <img src="https://www.creative-tim.com/twcomponents/images/ap/tc-builder.jpg" class="absolute bottom-0 left-0 object-cover w-full h-full overflow-hidden rounded-md" /> </a> </div> </div> <div class="mt-3"> <div class="leading-snug w-72 lg:w-full "> <a target="_blank" href="https://www.creative-tim.com/builder#soft-ui-dashboard-tailwind-builder"> <h4 class="font-bold text-gray-800 truncate whitespace-nowrap hover:text-primary dark:text-gray-200">Tailwind Builder</h4> </a> <p class="text-sm text-gray-600 truncate dark:text-gray-400">Drag & Drop Tailwind CSS Template Builder</p> </div> </div> </div> </div> <div> <a href="https://www.creative-tim.com/twcomponents/component/shadcn-ui-settings-card-component-horizon-ai-boilerplate" 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 Shadcn UI Settings Card Component - Horizon AI Boilerplate" loading="" src="https://tailwindcomponents.com/storage/12696/conversions/temp18521-thumb.jpg" alt="temp18521"> </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/vldmihalache" 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/6GqYXtE71l3147PGI8ZciCj48iGIsrjaOWkPJKWq.jpg" alt="vldmihalache"> </a> <div class="flex flex-col space-y-1"> <a href="https://www.creative-tim.com/twcomponents/component/shadcn-ui-settings-card-component-horizon-ai-boilerplate" 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">Shadcn UI Settings Card Component - Horizon AI Boilerplate</a> <a href="https://www.creative-tim.com/twcomponents/u/vldmihalache" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">vldmihalache</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/shadcn-ui-dark-mode-table-component-horizon-ai-boilerplate" 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 Shadcn UI Dark Mode Table Component - Horizon AI Boilerplate" loading="" src="https://tailwindcomponents.com/storage/12693/conversions/temp23565-thumb.jpg" alt="temp23565"> </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/vldmihalache" 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/6GqYXtE71l3147PGI8ZciCj48iGIsrjaOWkPJKWq.jpg" alt="vldmihalache"> </a> <div class="flex flex-col space-y-1"> <a href="https://www.creative-tim.com/twcomponents/component/shadcn-ui-dark-mode-table-component-horizon-ai-boilerplate" 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">Shadcn UI Dark Mode Table Component - Horizon AI Boilerplate</a> <a href="https://www.creative-tim.com/twcomponents/u/vldmihalache" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">vldmihalache</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/hr-point-to-point" 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 hr point to point" loading="" src="https://tailwindcomponents.com/storage/12692/conversions/temp89169-thumb.jpg" alt="temp89169"> </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/bernethe" class="flex-shrink-0 w-10 h-10 overflow-hidden rounded-full "> <img class="object-cover w-full h-full" src="https://avatars.githubusercontent.com/u/1207297?v=4" alt="bernethe"> </a> <div class="flex flex-col space-y-1"> <a href="https://www.creative-tim.com/twcomponents/component/hr-point-to-point" 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">hr point to point</a> <a href="https://www.creative-tim.com/twcomponents/u/bernethe" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">bernethe</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/sign-in-modal-tailwind-css" 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 Sign In Modal - Tailwind CSS" loading="" src="https://tailwindcomponents.com/storage/12677/conversions/temp73146-thumb.jpg" alt="temp73146"> </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/creative-tim" 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/TpXC86kLAsEjEFhN5zBp9Q8a8mzO4aigKXwfc5zm.jpg" alt="Creative Tim"> </a> <div class="flex flex-col space-y-1"> <a href="https://www.creative-tim.com/twcomponents/component/sign-in-modal-tailwind-css" 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">Sign In Modal - Tailwind CSS</a> <a href="https://www.creative-tim.com/twcomponents/u/creative-tim" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">Creative Tim</a> </div> </div> <div class="flex items-center space-x-2 text-gray-400"> <div class="flex items-center space-x-1 text-primary"> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /> </svg> <p class="text-sm font-medium">Forked</p> </div> <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/web-30-modal-tailwind-css" 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 Web 3.0 Modal - Tailwind CSS" loading="" src="https://tailwindcomponents.com/storage/12675/conversions/temp20079-thumb.jpg" alt="temp20079"> </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/creative-tim" 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/TpXC86kLAsEjEFhN5zBp9Q8a8mzO4aigKXwfc5zm.jpg" alt="Creative Tim"> </a> <div class="flex flex-col space-y-1"> <a href="https://www.creative-tim.com/twcomponents/component/web-30-modal-tailwind-css" 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">Web 3.0 Modal - Tailwind CSS</a> <a href="https://www.creative-tim.com/twcomponents/u/creative-tim" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">Creative Tim</a> </div> </div> <div class="flex items-center space-x-2 text-gray-400"> <div class="flex items-center space-x-1 text-primary"> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /> </svg> <p class="text-sm font-medium">Forked</p> </div> <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> </section> <section class="container px-4 py-10 mx-auto"> <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Top creators</h3> <p class="mt-4 text-gray-500 dark:text-gray-400">Meet the foremost component creators within the realm of Tailwind CSS.</p> <div class="grid gap-8 mt-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"> <a href="https://www.creative-tim.com/twcomponents/u/creative-tim" class="p-4 transition-colors duration-200 bg-white border border-gray-200 rounded-lg dark:hover:bg-gray-800 dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-100"> <div class="flex items-center gap-x-3"> <img src="https://www.creative-tim.com/twcomponents/storage/avatars/TpXC86kLAsEjEFhN5zBp9Q8a8mzO4aigKXwfc5zm.jpg" alt="Creative Tim Profile on Tailwind Components Website" class="object-cover w-12 h-12 rounded-full"> <div class="flex-1"> <div class="flex items-center justify-between"> <h2 class="font-semibold tracking-wide text-gray-800 dark:text-white">Creative Tim</h2> <p class="mt-1 text-sm font-medium tracking-wide text-gray-600 dark:text-gray-400">#1</p> </div> <p class="mt-1 text-sm tracking-wide text-gray-600 dark:text-gray-400">200 Components</p> </div> </div> </a> <a href="https://www.creative-tim.com/twcomponents/u/banny" class="p-4 transition-colors duration-200 bg-white border border-gray-200 rounded-lg dark:hover:bg-gray-800 dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-100"> <div class="flex items-center gap-x-3"> <img src="https://www.gravatar.com/avatar/6dc5e4950b260687309cb98b1e54a539" alt="banny Profile on Tailwind Components Website" class="object-cover w-12 h-12 rounded-full"> <div class="flex-1"> <div class="flex items-center justify-between"> <h2 class="font-semibold tracking-wide text-gray-800 dark:text-white">banny</h2> <p class="mt-1 text-sm font-medium tracking-wide text-gray-600 dark:text-gray-400">#2</p> </div> <p class="mt-1 text-sm tracking-wide text-gray-600 dark:text-gray-400">123 Components</p> </div> </div> </a> <a href="https://www.creative-tim.com/twcomponents/u/shehab-coding" class="p-4 transition-colors duration-200 bg-white border border-gray-200 rounded-lg dark:hover:bg-gray-800 dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-100"> <div class="flex items-center gap-x-3"> <img src="https://www.creative-tim.com/twcomponents/storage/avatars/WkI7PkGHABCVvWWVtUHrC0XaDCmoUKDN5t5mpAwQ.jpg" alt="Shehab coding Profile on Tailwind Components Website" class="object-cover w-12 h-12 rounded-full"> <div class="flex-1"> <div class="flex items-center justify-between"> <h2 class="font-semibold tracking-wide text-gray-800 dark:text-white">Shehab coding</h2> <p class="mt-1 text-sm font-medium tracking-wide text-gray-600 dark:text-gray-400">#3</p> </div> <p class="mt-1 text-sm tracking-wide text-gray-600 dark:text-gray-400">97 Components</p> </div> </div> </a> <a href="https://www.creative-tim.com/twcomponents/u/khatabwedaa" class="p-4 transition-colors duration-200 bg-white border border-gray-200 rounded-lg dark:hover:bg-gray-800 dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-100"> <div class="flex items-center gap-x-3"> <img src="https://www.creative-tim.com/twcomponents/storage/avatars/ckQ2aybMQQJgUPv1HOe9XbpNmQmltLlWyy4CSVuJ.jpg" alt="khatabwedaa Profile on Tailwind Components Website" class="object-cover w-12 h-12 rounded-full"> <div class="flex-1"> <div class="flex items-center justify-between"> <h2 class="font-semibold tracking-wide text-gray-800 dark:text-white">khatabwedaa</h2> <p class="mt-1 text-sm font-medium tracking-wide text-gray-600 dark:text-gray-400">#4</p> </div> <p class="mt-1 text-sm tracking-wide text-gray-600 dark:text-gray-400">92 Components</p> </div> </div> </a> <a href="https://www.creative-tim.com/twcomponents/u/harrishash" class="p-4 transition-colors duration-200 bg-white border border-gray-200 rounded-lg dark:hover:bg-gray-800 dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-100"> <div class="flex items-center gap-x-3"> <img src="https://www.creative-tim.com/twcomponents/storage/avatars/ILXgUJYPjEo0P9gYmGhFUpUfK0VaR4l7yAfAUMuS.png" alt="Harrishash Profile on Tailwind Components Website" class="object-cover w-12 h-12 rounded-full"> <div class="flex-1"> <div class="flex items-center justify-between"> <h2 class="font-semibold tracking-wide text-gray-800 dark:text-white">Harrishash</h2> <p class="mt-1 text-sm font-medium tracking-wide text-gray-600 dark:text-gray-400">#5</p> </div> <p class="mt-1 text-sm tracking-wide text-gray-600 dark:text-gray-400">81 Components</p> </div> </div> </a> <a href="https://www.creative-tim.com/twcomponents/u/material-tailwind" class="p-4 transition-colors duration-200 bg-white border border-gray-200 rounded-lg dark:hover:bg-gray-800 dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-100"> <div class="flex items-center gap-x-3"> <img src="https://www.creative-tim.com/twcomponents/storage/avatars/21ZisJofZDGSjmtcFGoLN7QhbCE6Np1rzwjqUZIN.jpg" alt="Material Tailwind Profile on Tailwind Components Website" class="object-cover w-12 h-12 rounded-full"> <div class="flex-1"> <div class="flex items-center justify-between"> <h2 class="font-semibold tracking-wide text-gray-800 dark:text-white">Material Tailwind</h2> <p class="mt-1 text-sm font-medium tracking-wide text-gray-600 dark:text-gray-400">#6</p> </div> <p class="mt-1 text-sm tracking-wide text-gray-600 dark:text-gray-400">81 Components</p> </div> </div> </a> <a href="https://www.creative-tim.com/twcomponents/u/zoltanszogyenyi" class="p-4 transition-colors duration-200 bg-white border border-gray-200 rounded-lg dark:hover:bg-gray-800 dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-100"> <div class="flex items-center gap-x-3"> <img src="https://www.creative-tim.com/twcomponents/storage/avatars/hvDqTaSchLjQZhxZu4Fksqia6vYMKwdv1IScC0vD.jpg" alt="zoltanszogyenyi Profile on Tailwind Components Website" class="object-cover w-12 h-12 rounded-full"> <div class="flex-1"> <div class="flex items-center justify-between"> <h2 class="font-semibold tracking-wide text-gray-800 dark:text-white">zoltanszogyenyi</h2> <p class="mt-1 text-sm font-medium tracking-wide text-gray-600 dark:text-gray-400">#7</p> </div> <p class="mt-1 text-sm tracking-wide text-gray-600 dark:text-gray-400">65 Components</p> </div> </div> </a> <a href="https://www.creative-tim.com/twcomponents/u/yousef-najib" class="p-4 transition-colors duration-200 bg-white border border-gray-200 rounded-lg dark:hover:bg-gray-800 dark:bg-gray-900 dark:border-gray-700 hover:bg-gray-100"> <div class="flex items-center gap-x-3"> <img src="https://www.creative-tim.com/twcomponents/storage/avatars/HOh38rDP25DJDFRZh4FIZFZ1pNLJTM9D0vdbD3K4.jpg" alt="Yousef Najib Profile on Tailwind Components Website" class="object-cover w-12 h-12 rounded-full"> <div class="flex-1"> <div class="flex items-center justify-between"> <h2 class="font-semibold tracking-wide text-gray-800 dark:text-white">Yousef Najib</h2> <p class="mt-1 text-sm font-medium tracking-wide text-gray-600 dark:text-gray-400">#8</p> </div> <p class="mt-1 text-sm tracking-wide text-gray-600 dark:text-gray-400">56 Components</p> </div> </div> </a> </div> </section> <section class="container px-4 py-10 mx-auto"> <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Popular components</h3> <p class="mt-4 text-gray-500 dark:text-gray-400">The most popular Tailwind CSS components.</p> <div class="grid gap-8 mt-8 md:grid-cols-2 lg:grid-cols-3 noads"> <div class="row-start-4 overflow-hidden md:row-start-3 md:col-start-1 lg:row-start-1 lg:col-start-2"> <a target="_blank" href="https://www.creative-tim.com/twcomponents/promotes/19" class="block duration-300 ease-out transform"> <div class="aspect-w-16 aspect-h-10"> <img class="object-cover w-full h-full rounded-lg shadow-md" src="https://www.creative-tim.com/twcomponents/storage/KxO3PDW8qGGcFeRKDTaGG59DitxQX4YQ7CZ68PnT.jpg" alt="Material Tailwind PRO image"> </div> <div class="justify-between mt-6 sm:flex sm:items-center"> <div class="flex items-center space-x-3 lg:items-start lg:flex-col lg:space-x-0 xl:flex-row xl:space-x-3"> <h2 class="font-semibold text-gray-800 dark:text-gray-200 sm:text-lg dark:hover:text-primary hover:text-primary hover:underline"> Material Tailwind PRO </h2> <div class="flex items-center mt-1 space-x-4"> <span class="px-2 py-1 text-xs font-normal text-teal-700 uppercase bg-teal-200 rounded-md dark:text-teal-800 dark:bg-teal-400 bg-opacity-40">Material Tailwind</span> <span class="px-2 py-1 text-xs font-normal text-yellow-700 uppercase bg-yellow-200 rounded-md ">Premium</span> </div> </div> <p class="mt-2 text-lg font-medium text-gray-700 dark:text-gray-300 sm:mt-0">$99</p> </div> <p class="mt-2 text-gray-500 truncate dark:text-gray-300">Premium Tailwind CSS Components Library built with React and HTML to deliver unique and fully functional web projects in no time! Stunning design inspired by Google's Material Design.</p> </a> </div> </div> <div class="flex justify-center mt-10"> <a href="https://www.creative-tim.com/twcomponents/components" class="px-4 py-2 mt-2 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"> See more components </a> </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 © 2024 <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> function checkAds() { const ad = document.querySelector('#_custom_'); if (!ad) { return; } Array.from(ad.parentNode.querySelectorAll('.hide-with-banner')).forEach(el => el.parentNode.removeChild(el)); target.removeAttribute('href'); return true; } const target = document.querySelector('#native-card-js'); const adObserver = new MutationObserver((mutations) => { if (checkAds()) { adObserver.disconnect(); } }) adObserver.observe(target, { attributes: true, childList: true, characterData: true, subtree: true }) const interval = setInterval(() => { if (checkAds()) { clearInterval(interval); } }, 16) </script> <script> (function(){ if(typeof _bsa !== 'undefined' && _bsa) { _bsa.init('custom', 'CESD6KJU', 'placement:tailwindcomponentscom', { target: '.native-js', template: ` <a href="##statlink##" class="native-card" style="background: ##backgroundColor##; color: ##textColor##;"> <img class="native-logo" src="##logo##"> <div class="native-desc"> ##description##</div> <div class="native-cta" style="background-color: ##ctaBackgroundColor##; color: ##ctaTextColor##">##callToAction##</div> <div style="background-color: ##textColor##; color: ##backgroundColor##" class="native-sponsored">Sponsored</div> </a>`, } ); } })(); </script> <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

Tailwind CSS Components - 600+ Free Examples and Templates