60+ Tailwind CSS modals - Free and Premium Components Collection.

<!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/components/modals" /> <meta property="og:title" content="60+ Tailwind CSS modals - Free and Premium Components Collection." /> <meta property="og:description" content="Choose from our extensive collection of responsive modals to create dialogs, popovers, light boxes, and so on." /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@TwComponents" /> <meta name="twitter:title" content="60+ Tailwind CSS modals - Free and Premium Components Collection." /> <meta name="twitter:description" content="Choose from our extensive collection of responsive modals to create dialogs, popovers, light boxes, and so on." /> <meta name="twitter:image" content="https://www.creative-tim.com/twcomponents/og-tailwindcomponents.png" /> <meta name="google-site-verification" content="D4BL2NNYf_eEOMneiD3A61KMM4QiL_qas4wZfm84BVY" /> <title>60+ Tailwind CSS modals - Free and Premium Components Collection.</title> <meta name="title" content="60+ Tailwind CSS modals - Free and Premium Components Collection."> <meta name="description" content="Choose from our extensive collection of responsive modals to create dialogs, popovers, light boxes, and so on."> <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/components/modals" itemprop="url"> <link rel="stylesheet" href="https://www.creative-tim.com/twcomponents/css/app.css?id=fccc92a8da50510d706fafd14c5a3b13"> <link rel="preload" href="https://tailwindcomponents.com/storage/12676/temp73215.png" as="image" > <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> <form action="https://www.creative-tim.com/twcomponents/search" class="flex flex-wrap justify-between md:flex-row"> <input type="search" name="query" class="w-full h-12 px-4 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg xl:transition-all xl:duration-200 xl:w-24 xl:focus:w-28 2xl:w-32 2xl:focus:w-44 xl:h-10 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-primary dark:focus:border-primary focus:outline-none focus:ring focus:ring-primary dark:placeholder-gray-400 focus:ring-opacity-20" placeholder="Search" required> </form> <a href="https://www.creative-tim.com/twcomponents/submit-component" class="flex items-center justify-center h-12 px-5 text-sm font-medium text-center text-white transition-colors duration-200 transform rounded-lg xl:h-10 bg-primary hover:bg-primary/70"> Submit </a> <a href="https://www.creative-tim.com/twcomponents/login" class="flex items-center justify-center h-12 px-4 mt-2 text-sm text-center text-gray-600 transition-colors duration-200 transform border rounded-lg xl:h-10 dark:text-gray-300 dark:border-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none"> Login </a> <dark-mode></dark-mode> </div> </div> </transition> <div class="hidden xl:flex xl:flex-row xl:items-center xl:justify-between xl:flex-1 xl:space-x-2"> <div class="flex flex-col space-y-3 xl:space-y-0 xl:flex-row xl:space-x-5 xl:items-center"> <dropdown padding="p-4" position="xl:right-auto xl:left-0" class="hidden xl:block"> <button class="text-gray-500 dark:text-gray-200 hover:text-gray-800 dark:hover:text-gray-400 xl:text-sm 2xl:text-base transition-colors duration-200 flex items-center space-x-1 focus:outline-none"> <span>Components</span> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /> </svg> </button> <template v-slot:content> <div class="w-[36rem] "> <a href="https://www.creative-tim.com/twcomponents/components" class="inline-flex px-4 text-sm font-medium text-gray-800 dark:text-white hover:underline mt-2"> All Components </a> <div class="grid grid-cols-3 mt-2 gap-x-4 divide-gray-100 dark:divide-gray-700 max-h-[73vh] overflow-y-auto"> <div class="pr-4 border-r border-gray-100 dark:border-gray-700"> <a href="https://www.creative-tim.com/twcomponents/awesome" class="flex justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> awesome <span>69</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/accordions" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Accordions <span>7</span> </a> <a href="https://www.creative-tim.com/twcomponents/components/alerts" class="flex items-center justify-between w-full py-2 px-4 text-sm text-gray-600 capitalize transition-colors duration-200 transform gap-x-2 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> Alerts <span>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> <form action="https://www.creative-tim.com/twcomponents/search" class="flex flex-wrap justify-between md:flex-row"> <input type="search" name="query" class="w-full h-12 px-4 text-sm text-gray-700 bg-white border border-gray-200 rounded-lg xl:transition-all xl:duration-200 xl:w-24 xl:focus:w-28 2xl:w-32 2xl:focus:w-44 xl:h-10 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-primary dark:focus:border-primary focus:outline-none focus:ring focus:ring-primary dark:placeholder-gray-400 focus:ring-opacity-20" placeholder="Search" required> </form> <a href="https://www.creative-tim.com/twcomponents/submit-component" class="flex items-center justify-center h-12 px-5 text-sm font-medium text-center text-white transition-colors duration-200 transform rounded-lg xl:h-10 bg-primary hover:bg-primary/70"> Submit </a> <a href="https://www.creative-tim.com/twcomponents/login" class="flex items-center justify-center h-12 px-4 mt-2 text-sm text-center text-gray-600 transition-colors duration-200 transform border rounded-lg xl:h-10 dark:text-gray-300 dark:border-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none"> Login </a> <dark-mode></dark-mode> </div> </div> </div> </header> <main class="flex-1 xl:pt-[5.5rem]"> <section class="container px-4 py-10 mx-auto"> <h1 class="text-3xl font-semibold text-center text-gray-800 dark:text-gray-200"> 60+ Tailwind CSS Modals Components </h1> <p class="max-w-6xl mx-auto mt-4 text-base text-center text-gray-500 dark:text-gray-400 md:text-lg"> Choose from our extensive collection of responsive modals to create dialogs, popovers, light boxes, and so on. Show interactive information to your website users using these Tailwind snippets. </p> <div class="mt-8 md:flex md:items-center md:justify-between md:space-x-8"> <div class="flex items-center space-x-4 overflow-y-auto md:max-w-lg xl:max-w-5xl 2xl:max-w-7xl lg:max-w-3xl whitespace-nowrap"> <a href="https://www.creative-tim.com/twcomponents/components" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg capitalize">All</a> <a title="Tailwind Accordions" href="https://www.creative-tim.com/twcomponents/components/accordions" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Accordions</a> <a title="Tailwind Alerts" href="https://www.creative-tim.com/twcomponents/components/alerts" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Alerts</a> <a title="Tailwind Alpinejs" href="https://www.creative-tim.com/twcomponents/components/alpinejs" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Alpinejs</a> <a title="Tailwind Avatars" href="https://www.creative-tim.com/twcomponents/components/avatars" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Avatars</a> <a title="Tailwind Badges" href="https://www.creative-tim.com/twcomponents/components/badges" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Badges</a> <a title="Tailwind Banner" href="https://www.creative-tim.com/twcomponents/components/banner" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Banner</a> <a title="Tailwind Blockquote" href="https://www.creative-tim.com/twcomponents/components/blockquote" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Blockquote</a> <a title="Tailwind Bottom Navigation" href="https://www.creative-tim.com/twcomponents/components/bottom-navigation" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Bottom Navigation</a> <a title="Tailwind Breadcrumb" href="https://www.creative-tim.com/twcomponents/components/breadcrumb" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Breadcrumb</a> <a title="Tailwind Button Group" href="https://www.creative-tim.com/twcomponents/components/button-group" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Button Group</a> <a title="Tailwind Buttons" href="https://www.creative-tim.com/twcomponents/components/buttons" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Buttons</a> <a title="Tailwind Calendar" href="https://www.creative-tim.com/twcomponents/components/calendar" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Calendar</a> <a title="Tailwind Cards" href="https://www.creative-tim.com/twcomponents/components/cards" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Cards</a> <a title="Tailwind Carousel" href="https://www.creative-tim.com/twcomponents/components/carousel" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Carousel</a> <a title="Tailwind Charts" href="https://www.creative-tim.com/twcomponents/components/charts" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Charts</a> <a title="Tailwind Chat" href="https://www.creative-tim.com/twcomponents/components/chat" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Chat</a> <a title="Tailwind Checkbox" href="https://www.creative-tim.com/twcomponents/components/checkbox" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Checkbox</a> <a title="Tailwind Chip" href="https://www.creative-tim.com/twcomponents/components/chip" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Chip</a> <a title="Tailwind Collapse" href="https://www.creative-tim.com/twcomponents/components/collapse" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Collapse</a> <a title="Tailwind Cursor" href="https://www.creative-tim.com/twcomponents/components/cursor" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Cursor</a> <a title="Tailwind Dashboard" href="https://www.creative-tim.com/twcomponents/components/dashboard" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Dashboard</a> <a title="Tailwind Datepicker" href="https://www.creative-tim.com/twcomponents/components/datepicker" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Datepicker</a> <a title="Tailwind Device Mockups" href="https://www.creative-tim.com/twcomponents/components/device-mockups" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Device Mockups</a> <a title="Tailwind Drawer" href="https://www.creative-tim.com/twcomponents/components/drawer" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Drawer</a> <a title="Tailwind Dropdowns" href="https://www.creative-tim.com/twcomponents/components/dropdowns" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Dropdowns</a> <a title="Tailwind Faq" href="https://www.creative-tim.com/twcomponents/components/faq" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Faq</a> <a title="Tailwind Features" href="https://www.creative-tim.com/twcomponents/components/features" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Features</a> <a title="Tailwind File Upload" href="https://www.creative-tim.com/twcomponents/components/file-upload" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">File Upload</a> <a title="Tailwind Floating Label" href="https://www.creative-tim.com/twcomponents/components/floating-label" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Floating Label</a> <a title="Tailwind Footers" href="https://www.creative-tim.com/twcomponents/components/footers" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Footers</a> <a title="Tailwind Forms" href="https://www.creative-tim.com/twcomponents/components/forms" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Forms</a> <a title="Tailwind Gallery" href="https://www.creative-tim.com/twcomponents/components/gallery" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Gallery</a> <a title="Tailwind Grid" href="https://www.creative-tim.com/twcomponents/components/grid" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Grid</a> <a title="Tailwind Headers" href="https://www.creative-tim.com/twcomponents/components/headers" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Headers</a> <a title="Tailwind Headings" href="https://www.creative-tim.com/twcomponents/components/headings" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Headings</a> <a title="Tailwind Hr" href="https://www.creative-tim.com/twcomponents/components/hr" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Hr</a> <a title="Tailwind Icons" href="https://www.creative-tim.com/twcomponents/components/icons" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Icons</a> <a title="Tailwind Images" href="https://www.creative-tim.com/twcomponents/components/images" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Images</a> <a title="Tailwind Indicators" href="https://www.creative-tim.com/twcomponents/components/indicators" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Indicators</a> <a title="Tailwind Inputs" href="https://www.creative-tim.com/twcomponents/components/inputs" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Inputs</a> <a title="Tailwind Jumbotron" href="https://www.creative-tim.com/twcomponents/components/jumbotron" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Jumbotron</a> <a title="Tailwind Kbd" href="https://www.creative-tim.com/twcomponents/components/kbd" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Kbd</a> <a title="Tailwind Kit" href="https://www.creative-tim.com/twcomponents/components/kit" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Kit</a> <a title="Tailwind Layout" href="https://www.creative-tim.com/twcomponents/components/layout" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Layout</a> <a title="Tailwind Links" href="https://www.creative-tim.com/twcomponents/components/links" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Links</a> <a title="Tailwind List" href="https://www.creative-tim.com/twcomponents/components/list" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">List</a> <a title="Tailwind Logins" href="https://www.creative-tim.com/twcomponents/components/logins" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Logins</a> <a title="Tailwind Masonry" href="https://www.creative-tim.com/twcomponents/components/masonry" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Masonry</a> <a title="Tailwind Mega Menu" href="https://www.creative-tim.com/twcomponents/components/mega-menu" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Mega Menu</a> <a title="Tailwind Menu" href="https://www.creative-tim.com/twcomponents/components/menu" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Menu</a> <a title="Tailwind Modals" href="https://www.creative-tim.com/twcomponents/components/modals" class="px-3 py-1.5 font-medium text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-800 rounded-lg">Modals</a> <a title="Tailwind Music Player" href="https://www.creative-tim.com/twcomponents/components/music-player" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Music Player</a> <a title="Tailwind Navbars" href="https://www.creative-tim.com/twcomponents/components/navbars" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Navbars</a> <a title="Tailwind Navigations" href="https://www.creative-tim.com/twcomponents/components/navigations" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Navigations</a> <a title="Tailwind Number Input" href="https://www.creative-tim.com/twcomponents/components/number-input" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Number Input</a> <a title="Tailwind Pages" href="https://www.creative-tim.com/twcomponents/components/pages" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Pages</a> <a title="Tailwind Pagination" href="https://www.creative-tim.com/twcomponents/components/pagination" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Pagination</a> <a title="Tailwind Paragraphs" href="https://www.creative-tim.com/twcomponents/components/paragraphs" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Paragraphs</a> <a title="Tailwind Popover" href="https://www.creative-tim.com/twcomponents/components/popover" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Popover</a> <a title="Tailwind Pricing" href="https://www.creative-tim.com/twcomponents/components/pricing" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Pricing</a> <a title="Tailwind Progress" href="https://www.creative-tim.com/twcomponents/components/progress" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Progress</a> <a title="Tailwind Radio Button" href="https://www.creative-tim.com/twcomponents/components/radio-button" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Radio Button</a> <a title="Tailwind Range Slider" href="https://www.creative-tim.com/twcomponents/components/range-slider" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Range Slider</a> <a title="Tailwind Rating" href="https://www.creative-tim.com/twcomponents/components/rating" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Rating</a> <a title="Tailwind Scrollbar" href="https://www.creative-tim.com/twcomponents/components/scrollbar" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Scrollbar</a> <a title="Tailwind Search bar" href="https://www.creative-tim.com/twcomponents/components/search-bar" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Search bar</a> <a title="Tailwind Selects" href="https://www.creative-tim.com/twcomponents/components/selects" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Selects</a> <a title="Tailwind Shadows" href="https://www.creative-tim.com/twcomponents/components/shadows" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Shadows</a> <a title="Tailwind Sidebar" href="https://www.creative-tim.com/twcomponents/components/sidebar" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Sidebar</a> <a title="Tailwind Skeleton" href="https://www.creative-tim.com/twcomponents/components/skeleton" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Skeleton</a> <a title="Tailwind Slider" href="https://www.creative-tim.com/twcomponents/components/slider" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Slider</a> <a title="Tailwind Speed dial" href="https://www.creative-tim.com/twcomponents/components/speed-dial" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Speed dial</a> <a title="Tailwind Spinner" href="https://www.creative-tim.com/twcomponents/components/spinner" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Spinner</a> <a title="Tailwind Stepper" href="https://www.creative-tim.com/twcomponents/components/stepper" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Stepper</a> <a title="Tailwind Switch" href="https://www.creative-tim.com/twcomponents/components/switch" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Switch</a> <a title="Tailwind Tables" href="https://www.creative-tim.com/twcomponents/components/tables" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Tables</a> <a title="Tailwind Tabs" href="https://www.creative-tim.com/twcomponents/components/tabs" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Tabs</a> <a title="Tailwind Testimonials" href="https://www.creative-tim.com/twcomponents/components/testimonials" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Testimonials</a> <a title="Tailwind Text" href="https://www.creative-tim.com/twcomponents/components/text" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Text</a> <a title="Tailwind Textarea" href="https://www.creative-tim.com/twcomponents/components/textarea" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Textarea</a> <a title="Tailwind Timeline" href="https://www.creative-tim.com/twcomponents/components/timeline" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Timeline</a> <a title="Tailwind Toast" href="https://www.creative-tim.com/twcomponents/components/toast" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Toast</a> <a title="Tailwind Toggle" href="https://www.creative-tim.com/twcomponents/components/toggle" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Toggle</a> <a title="Tailwind Tooltip" href="https://www.creative-tim.com/twcomponents/components/tooltip" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Tooltip</a> <a title="Tailwind Typography" href="https://www.creative-tim.com/twcomponents/components/typography" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Typography</a> <a title="Tailwind Video" href="https://www.creative-tim.com/twcomponents/components/video" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Video</a> <a title="Tailwind Widget" href="https://www.creative-tim.com/twcomponents/components/widget" class="px-3 py-1.5 text-gray-500 dark:text-gray-400 rounded-lg capitalize hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg">Widget</a> </div> <dropdown> <button type="button" class="flex items-center justify-center px-4 py-2 mt-4 space-x-3 text-gray-600 transition-colors duration-300 transform border rounded-lg md:mt-0 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 focus:border-primary dark:focus:border-primary focus:outline-none focus:ring focus:ring-primary focus:ring-opacity-20"> <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>All version</span> </button> <template v-slot:content> <div class="w-32"> <a href="https://www.creative-tim.com/twcomponents/components/modals" class="block px-4 py-2 text-sm text-gray-700 capitalize transition-colors duration-300 transform dark:text-gray-300 hover:text-primary dark:hover:text-primary"> All version </a> <a href="https://www.creative-tim.com/twcomponents/components/modals?version=3" class="block px-4 py-2 text-sm text-gray-700 capitalize transition-colors duration-300 transform dark:text-gray-300 hover:text-primary dark:hover:text-primary"> version 3 </a> <a href="https://www.creative-tim.com/twcomponents/components/modals?version=2" class="block px-4 py-2 text-sm text-gray-700 capitalize transition-colors duration-300 transform dark:text-gray-300 hover:text-primary dark:hover:text-primary"> version 2 </a> <a href="https://www.creative-tim.com/twcomponents/components/modals?version=1" class="block px-4 py-2 text-sm text-gray-700 capitalize transition-colors duration-300 transform dark:text-gray-300 hover:text-primary dark:hover:text-primary"> version 1 </a> <a href="https://www.creative-tim.com/twcomponents/components/modals?version=0" class="block px-4 py-2 text-sm text-gray-700 capitalize transition-colors duration-300 transform dark:text-gray-300 hover:text-primary dark:hover:text-primary"> Beta version </a> </div> </template> </dropdown> </div> <div class="grid gap-8 mt-8 md:grid-cols-2 lg:grid-cols-3"> <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/22" 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/3bndUUuhluLQZNWA3jy4ZRq29CoKcJFqX1pba7HX.webp" alt="Notus Admin Dashboard Page 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"> Notus Admin Dashboard Page </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">Creative Tim</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">$69</p> </div> <p class="mt-2 text-gray-500 truncate dark:text-gray-300">In short, the admin panel is where the content is created and the website is managed. This is the key to how a content management system (CMS) works. Develop your Tailwind CSS Admin Dashboard super fast.</p> </a> </div> <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://material-tailwind.com?ref=tailwindcomponents" 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-blue-600 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/react-html.png" class="w-20 mb-4" /> <p class="text-xs text-white">React Components Library</p> <p class="mb-5 font-sans text-2xl font-bold text-white"> Material Tailwind </p> <div class="mb-3"> <span class="h-8 px-4 py-3 font-sans text-xs font-bold text-white bg-blue-500 rounded-lg shadow-md">Get Started</span> </div> </div> </div> <img src="https://www.creative-tim.com/twcomponents/images/ap/tc-material-tailwind-bg.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://material-tailwind.com?ref=tailwindcomponents"> <h4 class="font-bold text-gray-800 truncate whitespace-nowrap hover:text-primary dark:text-gray-200">Material Tailwind</h4> </a> <p class="text-sm text-gray-600 truncate dark:text-gray-400">React components library</p> </div> </div> </div> </div> <div> <a href="https://www.creative-tim.com/twcomponents/component/tailwind-css-modal-2" class="relative block overflow-hidden bg-gray-100 rounded-lg shadow aspect-w-16 aspect-h-10 dark:bg-gray-800"> <img class="w-full h-full object-cover" alt="tailwind Tailwind CSS Modal" loading="" src="https://tailwindcomponents.com/storage/12676/conversions/temp73215-thumb.jpg" alt="temp73215"> </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/tailwind-css-modal-2" class="font-semibold text-gray-800 transition-colors duration-300 dark:text-gray-200 sm:text-lg dark:hover:text-primary hover:text-primary hover:underline">Tailwind CSS Modal</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"> <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/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> <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/modal-16" class="relative block overflow-hidden bg-gray-100 rounded-lg shadow aspect-w-16 aspect-h-10 dark:bg-gray-800"> <img class="w-full h-full object-cover" alt="tailwind Tailwind CSS Modal" loading="" src="https://tailwindcomponents.com/storage/11808/conversions/temp56977-thumb.jpg" alt="temp56977"> </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/dedwards" 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/22264411?v=4" alt="dedwards"> </a> <div class="flex flex-col space-y-1"> <a href="https://www.creative-tim.com/twcomponents/component/modal-16" class="font-semibold text-gray-800 transition-colors duration-300 dark:text-gray-200 sm:text-lg dark:hover:text-primary hover:text-primary hover:underline">Tailwind CSS Modal</a> <a href="https://www.creative-tim.com/twcomponents/u/dedwards" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">dedwards</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/modal-video-with-alpinejs" 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 Modal Video with Alpine.js" loading="" src="https://tailwindcomponents.com/storage/11641/conversions/temp46412-thumb.jpg" alt="temp46412"> </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/pasquale-vitiello" 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/EDrC5X3fQiJWevFCJoBsHH6oEuOnPBN0A8VLKsEx.jpg" alt="Pasquale Vitiello"> </a> <div class="flex flex-col space-y-1"> <a href="https://www.creative-tim.com/twcomponents/component/modal-video-with-alpinejs" 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">Modal Video with Alpine.js</a> <a href="https://www.creative-tim.com/twcomponents/u/pasquale-vitiello" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">Pasquale Vitiello</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">11</span> </div> </div> </div> </div> <div> <a href="https://www.creative-tim.com/twcomponents/component/modal-transition-animation" 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 Modal Transition Animation" loading="" src="https://tailwindcomponents.com/storage/10876/conversions/temp54817-thumb.jpg" alt="temp54817"> </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/dhaifullah" 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/RIX6FF6f21qt8KgHvVTbF0Wqhr0oSReduGsJH2iR.jpg" alt="dhaifullah"> </a> <div class="flex flex-col space-y-1"> <a href="https://www.creative-tim.com/twcomponents/component/modal-transition-animation" 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">Modal Transition Animation</a> <a href="https://www.creative-tim.com/twcomponents/u/dhaifullah" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">dhaifullah</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/modal-scrollable-responsive-with-alpine-js" class="relative block overflow-hidden bg-gray-100 rounded-lg shadow aspect-w-16 aspect-h-10 dark:bg-gray-800"> <img class="w-full h-full object-cover" alt="tailwind Tailwind CSS Modal Scrollable Responsive with Alpine Js" loading="" src="https://tailwindcomponents.com/storage/10592/conversions/temp89620-thumb.jpg" alt="temp89620"> </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/dhaifullah" 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/RIX6FF6f21qt8KgHvVTbF0Wqhr0oSReduGsJH2iR.jpg" alt="dhaifullah"> </a> <div class="flex flex-col space-y-1"> <a href="https://www.creative-tim.com/twcomponents/component/modal-scrollable-responsive-with-alpine-js" class="font-semibold text-gray-800 transition-colors duration-300 dark:text-gray-200 sm:text-lg dark:hover:text-primary hover:text-primary hover:underline">Tailwind CSS Modal Scrollable Responsive with Alpine Js</a> <a href="https://www.creative-tim.com/twcomponents/u/dhaifullah" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">dhaifullah</a> </div> </div> <div class="flex items-center space-x-2 text-gray-400"> <div class="flex items-center space-x-1"> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M14.243 5.757a6 6 0 10-.986 9.284 1 1 0 111.087 1.678A8 8 0 1118 10a3 3 0 01-4.8 2.401A4 4 0 1114 10a1 1 0 102 0c0-1.537-.586-3.07-1.757-4.243zM12 10a2 2 0 10-4 0 2 2 0 004 0z" clip-rule="evenodd" /> </svg> <span class="text-sm font-medium">3.3</span> </div> <div class="flex items-center space-x-1"> <svg width="13" class="text-gray-400" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13.5799 6.25565C13.7496 6.42529 13.8344 6.62619 13.8344 6.85833C13.8344 7.09047 13.7496 7.29136 13.5799 7.46101C13.4103 7.63065 13.2094 7.71547 12.9773 7.71547H0.97726C0.745117 7.71547 0.544224 7.63065 0.374581 7.46101C0.204939 7.29136 0.120117 7.09047 0.120117 6.85833C0.120117 6.62619 0.204939 6.42529 0.374581 6.25565L6.37458 0.25565C6.54422 0.0860069 6.74512 0.00118542 6.97726 0.00118542C7.2094 0.00118542 7.4103 0.0860069 7.57994 0.25565L13.5799 6.25565Z" fill="currentColor"/> </svg> <span class="text-sm font-medium">5</span> </div> </div> </div> </div> <div> <a href="https://www.creative-tim.com/twcomponents/component/modal-15" class="relative block overflow-hidden bg-gray-100 rounded-lg shadow aspect-w-16 aspect-h-10 dark:bg-gray-800"> <img class="w-full h-full object-cover" alt="tailwind Tailwind CSS Modal" loading="" src="https://tailwindcomponents.com/storage/10584/conversions/temp41881-thumb.jpg" alt="temp41881"> </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/frankuxui" 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/IOqIBG2MU0VsPT4derkDqyWqQpsM5TSMjQthsX1u.jpg" alt="frankuxui"> </a> <div class="flex flex-col space-y-1"> <a href="https://www.creative-tim.com/twcomponents/component/modal-15" class="font-semibold text-gray-800 transition-colors duration-300 dark:text-gray-200 sm:text-lg dark:hover:text-primary hover:text-primary hover:underline">Tailwind CSS Modal</a> <a href="https://www.creative-tim.com/twcomponents/u/frankuxui" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">frankuxui</a> </div> </div> <div class="flex items-center space-x-2 text-gray-400"> <div class="flex items-center space-x-1"> <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M14.243 5.757a6 6 0 10-.986 9.284 1 1 0 111.087 1.678A8 8 0 1118 10a3 3 0 01-4.8 2.401A4 4 0 1114 10a1 1 0 102 0c0-1.537-.586-3.07-1.757-4.243zM12 10a2 2 0 10-4 0 2 2 0 004 0z" clip-rule="evenodd" /> </svg> <span class="text-sm font-medium">3.3</span> </div> <div class="flex items-center space-x-1"> <svg width="13" class="text-gray-400" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M13.5799 6.25565C13.7496 6.42529 13.8344 6.62619 13.8344 6.85833C13.8344 7.09047 13.7496 7.29136 13.5799 7.46101C13.4103 7.63065 13.2094 7.71547 12.9773 7.71547H0.97726C0.745117 7.71547 0.544224 7.63065 0.374581 7.46101C0.204939 7.29136 0.120117 7.09047 0.120117 6.85833C0.120117 6.62619 0.204939 6.42529 0.374581 6.25565L6.37458 0.25565C6.54422 0.0860069 6.74512 0.00118542 6.97726 0.00118542C7.2094 0.00118542 7.4103 0.0860069 7.57994 0.25565L13.5799 6.25565Z" fill="currentColor"/> </svg> <span class="text-sm font-medium">6</span> </div> </div> </div> </div> <div> <a href="https://www.creative-tim.com/twcomponents/component/modal-card-project" class="relative block overflow-hidden bg-gray-100 rounded-lg shadow aspect-w-16 aspect-h-10 dark:bg-gray-800"> <img class="w-full h-full object-cover" alt="tailwind Tailwind CSS Modal Card Project" loading="" src="https://tailwindcomponents.com/storage/10576/conversions/temp55497-thumb.jpg" alt="temp55497"> </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/dhaifullah" 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/RIX6FF6f21qt8KgHvVTbF0Wqhr0oSReduGsJH2iR.jpg" alt="dhaifullah"> </a> <div class="flex flex-col space-y-1"> <a href="https://www.creative-tim.com/twcomponents/component/modal-card-project" class="font-semibold text-gray-800 transition-colors duration-300 dark:text-gray-200 sm:text-lg dark:hover:text-primary hover:text-primary hover:underline">Tailwind CSS Modal Card Project</a> <a href="https://www.creative-tim.com/twcomponents/u/dhaifullah" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">dhaifullah</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">3</span> </div> </div> </div> </div> <div> <a href="https://www.creative-tim.com/twcomponents/component/modal-input-with-alpine-js-with-style-headless-ui" class="relative block overflow-hidden bg-gray-100 rounded-lg shadow aspect-w-16 aspect-h-10 dark:bg-gray-800"> <img class="w-full h-full object-cover" alt="tailwind Tailwind CSS Subscribe Modal" loading="" src="https://tailwindcomponents.com/storage/10559/conversions/temp13659-thumb.jpg" alt="temp13659"> </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/dhaifullah" 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/RIX6FF6f21qt8KgHvVTbF0Wqhr0oSReduGsJH2iR.jpg" alt="dhaifullah"> </a> <div class="flex flex-col space-y-1"> <a href="https://www.creative-tim.com/twcomponents/component/modal-input-with-alpine-js-with-style-headless-ui" class="font-semibold text-gray-800 transition-colors duration-300 dark:text-gray-200 sm:text-lg dark:hover:text-primary hover:text-primary hover:underline">Tailwind CSS Subscribe Modal</a> <a href="https://www.creative-tim.com/twcomponents/u/dhaifullah" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">dhaifullah</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">8</span> </div> </div> </div> </div> </div> <ul class="flex justify-center mt-12 space-x-3"> <li> <p class="flex items-center px-4 py-2 space-x-3 text-gray-400 transition-colors duration-300 transform border rounded-lg cursor-not-allowed dark:text-gray-200 dark:border-gray-200 focus:outline-none" rel="prev">芦 Previous</p> </li> <p class="items-center hidden px-4 py-2 space-x-3 text-sm text-white rounded-lg md:flex bg-primary">1</p> <a href="https://www.creative-tim.com/twcomponents/components/modals?page=2" class="items-center hidden px-4 py-2 space-x-3 text-sm text-gray-600 transition-colors duration-300 transform border rounded-lg md:flex dark:text-gray-200 dark:border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none" aria-label="Go to page 2"> 2 </a> <a href="https://www.creative-tim.com/twcomponents/components/modals?page=3" class="items-center hidden px-4 py-2 space-x-3 text-sm text-gray-600 transition-colors duration-300 transform border rounded-lg md:flex dark:text-gray-200 dark:border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none" aria-label="Go to page 3"> 3 </a> <a href="https://www.creative-tim.com/twcomponents/components/modals?page=4" class="items-center hidden px-4 py-2 space-x-3 text-sm text-gray-600 transition-colors duration-300 transform border rounded-lg md:flex dark:text-gray-200 dark:border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none" aria-label="Go to page 4"> 4 </a> <a href="https://www.creative-tim.com/twcomponents/components/modals?page=5" class="items-center hidden px-4 py-2 space-x-3 text-sm text-gray-600 transition-colors duration-300 transform border rounded-lg md:flex dark:text-gray-200 dark:border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none" aria-label="Go to page 5"> 5 </a> <a href="https://www.creative-tim.com/twcomponents/components/modals?page=6" class="items-center hidden px-4 py-2 space-x-3 text-sm text-gray-600 transition-colors duration-300 transform border rounded-lg md:flex dark:text-gray-200 dark:border-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none" aria-label="Go to page 6"> 6 </a> <li> <a title="Next 禄" class="flex items-center px-4 py-2 space-x-3 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" href="https://www.creative-tim.com/twcomponents/components/modals?page=2" rel="next">Next 禄</a> </li> </ul> </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

60+ Tailwind CSS modals - Free and Premium Components Collection.