CINXE.COM
<!DOCTYPE html> <html lang="en" class="bg-white"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" href="/plus-assets/img/favicon/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/plus-assets/img/favicon/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/plus-assets/img/favicon/favicon-16x16.png" /> <link rel="preconnect" href="https://rsms.me/"> <link rel="stylesheet" href="https://rsms.me/inter/inter.css"> <script src="https://cdn.usefathom.com/script.js" data-site="SOXJJCZQ" data-auto="false" defer></script> <script src="https://cdn.paddle.com/paddle/paddle.js"></script> <link rel="preload" as="style" href="https://tailwindcss.com/plus-assets/build/assets/app-B-9hFpFC.css" /><link rel="modulepreload" href="https://tailwindcss.com/plus-assets/build/assets/app-BvoE2rN-.js" /><link rel="modulepreload" href="https://tailwindcss.com/plus-assets/build/assets/client-ChDcy-h8.js" /><link rel="stylesheet" href="https://tailwindcss.com/plus-assets/build/assets/app-B-9hFpFC.css" /><script type="module" src="https://tailwindcss.com/plus-assets/build/assets/app-BvoE2rN-.js"></script> <script> window.addEventListener('load', () => window.setTimeout(() => { const makeLink = (asset) => { const link = document.createElement('link') Object.keys(asset).forEach((attribute) => { link.setAttribute(attribute, asset[attribute]) }) return link } const loadNext = (assets, count) => window.setTimeout(() => { if (count > assets.length) { count = assets.length if (count === 0) { return } } const fragment = new DocumentFragment while (count > 0) { const link = makeLink(assets.shift()) fragment.append(link) count-- if (assets.length) { link.onload = () => loadNext(assets, 1) link.onerror = () => loadNext(assets, 1) } } document.head.append(fragment) }) loadNext(JSON.parse('[{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/AccountSettings-BnIS5KUe.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/AlreadyOnPackage-CcZoteC0.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/Changelog-V5hkHBVZ.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/Checkout-kVTWUTNs.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/Pricing-D7wsqX6f.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/Icons-a8_yWAyo.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/ChooseUpgrade-Cs3532T6.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/ComponentCategory-DDbuWwVZ.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/Component-U8DUXtPY.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/tabs-C1nRWOlZ.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/ComponentDocumentation-DdzjBhP4.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/ComponentPreview-Bn4iKoJD.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/ComponentProduct-Dpj2PKEv.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/Components-DoFOyXvq.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/Testimonials-CPAhHWNV.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/Frameworks-AKdAfukL.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/Heroes-BGyVWbiG.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/CheckIcon-CdALQvdv.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/proxy-CawNhkZl.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/ForgotPassword-nVP5wsLS.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/Home-DanZ150w.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/JoinTeam-BUT98H8d.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/License-DUU75Hi9.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/Login-DxZ9SHuV.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/NewsletterThankYou-BvB0Yhp9.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/PrivacyPolicy-Op7LjwhO.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/RedeemLicense-DxwcM4km.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/ResetPassword-BCm7esly.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/Support-n208q1NW.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/TeamSettings-C5hFLmUQ.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/Template-B0ZXOnyb.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/TemplatePreview-Da70bc4c.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/Templates-Ggvfbf8h.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/ThankYou-CNK_omOZ.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/UIKit-CowCmy0W.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/Layout-ZuwP-LiJ.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/Forms-bNWu2IXI.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/Head-B-OQkVbB.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/PurchaseHistory-Cxr2aq2G.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022},{\u0022rel\u0022:\u0022prefetch\u0022,\u0022href\u0022:\u0022https:\\\/\\\/tailwindcss.com\\\/plus-assets\\\/build\\\/assets\\\/index-DTfie-aa.js\u0022,\u0022fetchpriority\u0022:\u0022low\u0022}]'), 3) })) </script> <style inertia>html { scroll-padding-top: 6rem }</style> <script inertia> try { if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) { document.documentElement.classList.add('macos') } } catch (_) {} </script> <link rel="preload" as="image" href="/plus-assets/img/heroes/ui-blocks-col-1-row-1.png" inertia> <link rel="preload" as="image" href="/plus-assets/img/heroes/ui-blocks-col-1-row-2.png" inertia> <link rel="preload" as="image" href="/plus-assets/img/heroes/ui-blocks-col-1-row-3.png" inertia> <link rel="preload" as="image" href="/plus-assets/img/heroes/ui-blocks-col-1-row-4.png" inertia> <link rel="preload" as="image" href="/plus-assets/img/heroes/ui-blocks-col-2-row-1.png" inertia> <link rel="preload" as="image" href="/plus-assets/img/heroes/ui-blocks-col-2-row-2.png" inertia> <link rel="preload" as="image" href="/plus-assets/img/heroes/ui-blocks-col-2-row-3.png" inertia> <link rel="preload" as="image" href="/plus-assets/img/heroes/ui-blocks-col-2-row-4.png" inertia> <link rel="preload" as="image" href="/plus-assets/img/heroes/ui-blocks-col-2-row-5.png" inertia> <link rel="preload" as="image" href="/plus-assets/img/heroes/ui-blocks-col-2-row-6.png" inertia> <link rel="preload" as="image" href="/plus-assets/img/heroes/ui-blocks-col-3-row-1.png" inertia> <link rel="preload" as="image" href="/plus-assets/img/heroes/ui-blocks-col-3-row-2.png" inertia> <link rel="preload" as="image" href="/plus-assets/img/heroes/ui-blocks-col-3-row-3.png" inertia> <link rel="preload" as="image" href="/plus-assets/img/heroes/ui-blocks-col-3-row-4.png" inertia> <link rel="preload" as="image" href="/plus-assets/img/heroes/ui-blocks-col-3-row-5.png" inertia> <link rel="preload" as="image" href="/plus-assets/img/heroes/ui-blocks-col-3-row-6.png" inertia> <link rel="preload" as="image" href="/plus-assets/img/heroes/ui-blocks-col-3-row-7.png" inertia> <link rel="preload" as="image" href="/plus-assets/img/heroes/ui-blocks-col-4-row-1.png" inertia> <link rel="preload" as="image" href="/plus-assets/img/heroes/ui-blocks-col-4-row-2.png" inertia> <link rel="preload" as="image" href="/plus-assets/img/heroes/ui-blocks-col-4-row-3.png" inertia> <meta name="twitter:card" content="summary_large_image" inertia="twitter:card"> <meta name="twitter:site" content="@tailwindcss" inertia="twitter:site"> <meta name="twitter:title" content="Official Tailwind UI Components & Templates - Tailwind Plus" inertia="twitter:title"> <meta name="twitter:description" content="Beautiful UI components and templates by the creators of Tailwind CSS." inertia="twitter:description"> <meta name="twitter:image" content="https://tailwindcss.com/plus-assets/img/og/default.png" inertia="twitter:image"> <meta name="twitter:creator" content="@tailwindcss" inertia="twitter:creator"> <meta property="og:url" content="https://tailwindcss.com" inertia="og:url"> <meta property="og:type" content="article" inertia="og:type"> <meta property="og:title" content="Official Tailwind UI Components & Templates - Tailwind Plus" inertia="og:title"> <meta property="og:description" content="Beautiful UI components and templates by the creators of Tailwind CSS." inertia="og:description"> <meta property="og:image" content="https://tailwindcss.com/plus-assets/img/og/default.png" inertia="og:image"> <meta name="description" content="Beautiful UI components and templates by the creators of Tailwind CSS." inertia="description"> <title inertia>Official Tailwind UI Components & Templates - Tailwind Plus</title> </head> <body class="font-sans text-gray-950 antialiased [overflow-anchor:none]" scroll-region> <div id="app" data-page="{"component":"Home","props":{"errors":{},"tailwindVersion":"4.0","baseUrl":"https://tailwindcss.com","copyrightYear":"2025","auth":null,"canPurchasePlus":true,"preferredLanguage":"en-US","components":[{"name":"Marketing","anchor":"product-marketing","url":"https://tailwindcss.com/plus/ui-blocks/marketing","description":"Heroes, feature sections, newsletter sign up forms — everything you need to build beautiful marketing websites.","categories":[{"name":"Hero Sections","url":"https://tailwindcss.com/plus/ui-blocks/marketing/sections/heroes","imageUrl":"/plus-assets/img/ui-blocks/marketing/heroes.png","components":"12 components"},{"name":"CTA Sections","url":"https://tailwindcss.com/plus/ui-blocks/marketing/sections/cta-sections","imageUrl":"/plus-assets/img/ui-blocks/marketing/cta-sections.png","components":"11 components"},{"name":"Pricing Sections","url":"https://tailwindcss.com/plus/ui-blocks/marketing/sections/pricing","imageUrl":"/plus-assets/img/ui-blocks/marketing/pricing.png","components":"14 components"},{"name":"Stats","url":"https://tailwindcss.com/plus/ui-blocks/marketing/sections/stats-sections","imageUrl":"/plus-assets/img/ui-blocks/marketing/stats-sections.png","components":"10 components"},{"name":"Testimonials","url":"https://tailwindcss.com/plus/ui-blocks/marketing/sections/testimonials","imageUrl":"/plus-assets/img/ui-blocks/marketing/testimonials.png","components":"9 components"},{"name":"Team Sections","url":"https://tailwindcss.com/plus/ui-blocks/marketing/sections/team-sections","imageUrl":"/plus-assets/img/ui-blocks/marketing/team-sections.png","components":"9 components"},{"name":"FAQs","url":"https://tailwindcss.com/plus/ui-blocks/marketing/sections/faq-sections","imageUrl":"/plus-assets/img/ui-blocks/marketing/faq-sections.png","components":"10 components"},{"name":"Footers","url":"https://tailwindcss.com/plus/ui-blocks/marketing/sections/footers","imageUrl":"/plus-assets/img/ui-blocks/marketing/footers.png","components":"14 components"},{"name":"Flyout Menus","url":"https://tailwindcss.com/plus/ui-blocks/marketing/elements/flyout-menus","imageUrl":"/plus-assets/img/ui-blocks/marketing/flyout-menus.png","components":"7 components"},{"name":"404 Pages","url":"https://tailwindcss.com/plus/ui-blocks/marketing/feedback/404-pages","imageUrl":"/plus-assets/img/ui-blocks/marketing/404-pages.png","components":"5 components"},{"name":"Landing Pages","url":"https://tailwindcss.com/plus/ui-blocks/marketing/page-examples/landing-pages","imageUrl":"/plus-assets/img/ui-blocks/marketing/landing-pages.png","components":"4 components"},{"name":"About Pages","url":"https://tailwindcss.com/plus/ui-blocks/marketing/page-examples/about-pages","imageUrl":"/plus-assets/img/ui-blocks/marketing/about-pages.png","components":"3 components"}]},{"name":"Application UI","anchor":"product-application-ui","url":"https://tailwindcss.com/plus/ui-blocks/application-ui","description":"Form layouts, tables, modal dialogs — everything you need to build beautiful responsive web applications.","categories":[{"name":"Stacked Layouts","url":"https://tailwindcss.com/plus/ui-blocks/application-ui/application-shells/stacked","imageUrl":"/plus-assets/img/ui-blocks/application-ui/stacked.png","components":"9 components"},{"name":"Sidebar Layouts","url":"https://tailwindcss.com/plus/ui-blocks/application-ui/application-shells/sidebar","imageUrl":"/plus-assets/img/ui-blocks/application-ui/sidebar.png","components":"8 components"},{"name":"Page Headings","url":"https://tailwindcss.com/plus/ui-blocks/application-ui/headings/page-headings","imageUrl":"/plus-assets/img/ui-blocks/application-ui/page-headings.png","components":"13 components"},{"name":"Calendars","url":"https://tailwindcss.com/plus/ui-blocks/application-ui/data-display/calendars","imageUrl":"/plus-assets/img/ui-blocks/application-ui/calendars.png","components":"8 components"},{"name":"Tables","url":"https://tailwindcss.com/plus/ui-blocks/application-ui/lists/tables","imageUrl":"/plus-assets/img/ui-blocks/application-ui/tables.png","components":"20 components"},{"name":"Form Layouts","url":"https://tailwindcss.com/plus/ui-blocks/application-ui/forms/form-layouts","imageUrl":"/plus-assets/img/ui-blocks/application-ui/form-layouts.png","components":"5 components"},{"name":"Input Groups","url":"https://tailwindcss.com/plus/ui-blocks/application-ui/forms/input-groups","imageUrl":"/plus-assets/img/ui-blocks/application-ui/input-groups.png","components":"21 components"},{"name":"Sign-in and Registration","url":"https://tailwindcss.com/plus/ui-blocks/application-ui/forms/sign-in-forms","imageUrl":"/plus-assets/img/ui-blocks/application-ui/sign-in-forms.png","components":"5 components"},{"name":"Pagination","url":"https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/pagination","imageUrl":"/plus-assets/img/ui-blocks/application-ui/pagination.png","components":"3 components"},{"name":"Progress Bars","url":"https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/progress-bars","imageUrl":"/plus-assets/img/ui-blocks/application-ui/progress-bars.png","components":"8 components"},{"name":"Command Palettes","url":"https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/command-palettes","imageUrl":"/plus-assets/img/ui-blocks/application-ui/command-palettes.png","components":"9 components"},{"name":"Modal Dialogs","url":"https://tailwindcss.com/plus/ui-blocks/application-ui/overlays/modal-dialogs","imageUrl":"/plus-assets/img/ui-blocks/application-ui/modal-dialogs.png","components":"6 components"}]},{"name":"Ecommerce","anchor":"product-ecommerce","url":"https://tailwindcss.com/plus/ui-blocks/ecommerce","description":"Checkout forms, shopping carts, product views — everything you need to build your next ecommerce front-end.","categories":[{"name":"Product Overviews","url":"https://tailwindcss.com/plus/ui-blocks/ecommerce/components/product-overviews","imageUrl":"/plus-assets/img/ui-blocks/ecommerce/product-overviews.png","components":"5 components"},{"name":"Product Lists","url":"https://tailwindcss.com/plus/ui-blocks/ecommerce/components/product-lists","imageUrl":"/plus-assets/img/ui-blocks/ecommerce/product-lists.png","components":"11 components"},{"name":"Shopping Carts","url":"https://tailwindcss.com/plus/ui-blocks/ecommerce/components/shopping-carts","imageUrl":"/plus-assets/img/ui-blocks/ecommerce/shopping-carts.png","components":"6 components"},{"name":"Category Filters","url":"https://tailwindcss.com/plus/ui-blocks/ecommerce/components/category-filters","imageUrl":"/plus-assets/img/ui-blocks/ecommerce/category-filters.png","components":"5 components"},{"name":"Product Quickviews","url":"https://tailwindcss.com/plus/ui-blocks/ecommerce/components/product-quickviews","imageUrl":"/plus-assets/img/ui-blocks/ecommerce/product-quickviews.png","components":"4 components"},{"name":"Store Navigation","url":"https://tailwindcss.com/plus/ui-blocks/ecommerce/components/store-navigation","imageUrl":"/plus-assets/img/ui-blocks/ecommerce/store-navigation.png","components":"5 components"},{"name":"Promo Sections","url":"https://tailwindcss.com/plus/ui-blocks/ecommerce/components/promo-sections","imageUrl":"/plus-assets/img/ui-blocks/ecommerce/promo-sections.png","components":"8 components"},{"name":"Checkout Forms","url":"https://tailwindcss.com/plus/ui-blocks/ecommerce/components/checkout-forms","imageUrl":"/plus-assets/img/ui-blocks/ecommerce/checkout-forms.png","components":"5 components"},{"name":"Reviews","url":"https://tailwindcss.com/plus/ui-blocks/ecommerce/components/reviews","imageUrl":"/plus-assets/img/ui-blocks/ecommerce/reviews.png","components":"4 components"},{"name":"Order Summaries","url":"https://tailwindcss.com/plus/ui-blocks/ecommerce/components/order-summaries","imageUrl":"/plus-assets/img/ui-blocks/ecommerce/order-summaries.png","components":"4 components"},{"name":"Order History","url":"https://tailwindcss.com/plus/ui-blocks/ecommerce/components/order-history","imageUrl":"/plus-assets/img/ui-blocks/ecommerce/order-history.png","components":"4 components"},{"name":"Incentives","url":"https://tailwindcss.com/plus/ui-blocks/ecommerce/components/incentives","imageUrl":"/plus-assets/img/ui-blocks/ecommerce/incentives.png","components":"8 components"}]}],"templates":[{"id":12,"name":"Spotlight","type":"Personal website template","url":"https://tailwindcss.com/plus/templates/spotlight","thumbnail":"https://tailwindcss.com/plus-assets/img/templates/spotlight/preview-01.png"},{"id":10,"name":"Radiant","type":"SaaS marketing template","url":"https://tailwindcss.com/plus/templates/radiant","thumbnail":"https://tailwindcss.com/plus-assets/img/templates/radiant/preview-01.png"},{"id":13,"name":"Studio","type":"Agency template","url":"https://tailwindcss.com/plus/templates/studio","thumbnail":"https://tailwindcss.com/plus-assets/img/templates/studio/preview-01.png"},{"id":11,"name":"Salient","type":"SaaS marketing template","url":"https://tailwindcss.com/plus/templates/salient","thumbnail":"https://tailwindcss.com/plus-assets/img/templates/salient/preview-01.png"},{"id":9,"name":"Protocol","type":"API reference template","url":"https://tailwindcss.com/plus/templates/protocol","thumbnail":"https://tailwindcss.com/plus-assets/img/templates/protocol/preview-01.png"},{"id":8,"name":"Primer","type":"Info product template","url":"https://tailwindcss.com/plus/templates/primer","thumbnail":"https://tailwindcss.com/plus-assets/img/templates/primer/preview-01.png"},{"id":5,"name":"Commit","type":"Changelog template","url":"https://tailwindcss.com/plus/templates/commit","thumbnail":"https://tailwindcss.com/plus-assets/img/templates/commit/preview-01.png"},{"id":15,"name":"Transmit","type":"Podcast template","url":"https://tailwindcss.com/plus/templates/transmit","thumbnail":"https://tailwindcss.com/plus-assets/img/templates/transmit/preview-01.png"},{"id":7,"name":"Pocket","type":"App marketing template","url":"https://tailwindcss.com/plus/templates/pocket","thumbnail":"https://tailwindcss.com/plus-assets/img/templates/pocket/preview-01.png"},{"id":14,"name":"Syntax","type":"Documentation template","url":"https://tailwindcss.com/plus/templates/syntax","thumbnail":"https://tailwindcss.com/plus-assets/img/templates/syntax/preview-01.png"},{"id":6,"name":"Keynote","type":"Conference template","url":"https://tailwindcss.com/plus/templates/keynote","thumbnail":"https://tailwindcss.com/plus-assets/img/templates/keynote/preview-01.png"}],"pricing":{"personal":{"price":{"currency":"USD","advertised":299,"amount":299},"checkout_url":"https://tailwindcss.com/plus/checkout/aa651062-caee-4517-b83a-d2aed4cd00cc","purchaseable":true,"upgradable_to_standard_license":false},"team":{"price":{"currency":"USD","advertised":979,"amount":979},"checkout_url":"https://tailwindcss.com/plus/checkout/cc42453b-bfcd-4a7c-8150-37946e36168e","purchaseable":true}}},"url":"/plus?ref=top","version":"eac87699a0fd8ecac2dcee5b53a79fb4","clearHistory":false,"encryptHistory":false}"><link rel="preconnect" href="https://KNPXZI5B0M-dsn.algolia.net" crossorigin="anonymous"/><div class="isolate"><header class="line-b fixed inset-x-0 top-0 z-20 flex h-14 items-center justify-between bg-white px-4 after:-bottom-px sm:px-6"><a class="shrink-0" aria-label="Home" href="/plus"><svg viewBox="0 0 176 21" class="h-5"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z" clip-rule="evenodd" fill-rule="evenodd"></path><path class="fill-current" d="M51.547 8.688h-3v5.803c0 1.548 1.016 1.524 3 1.427v2.346c-4.015.483-5.611-.629-5.611-3.773V8.688H43.71V6.172h2.225V2.925l2.612-.774v4.021h2.998v2.516Zm11.43-2.516h2.61v12.092h-2.61v-1.741c-.92 1.28-2.346 2.055-4.233 2.055-3.288 0-6.021-2.78-6.021-6.36 0-3.603 2.733-6.36 6.021-6.36 1.886 0 3.313.774 4.233 2.032V6.172Zm-3.821 9.915c2.176 0 3.82-1.62 3.82-3.87 0-2.248-1.644-3.868-3.82-3.868-2.177 0-3.821 1.62-3.821 3.869s1.644 3.87 3.82 3.87ZM69.94 4.36a1.687 1.687 0 0 1-1.668-1.669c.002-.443.179-.868.491-1.18a1.662 1.662 0 0 1 2.354 0c.312.312.49.737.491 1.18 0 .895-.75 1.669-1.668 1.669Zm-1.306 13.905V6.172h2.612v12.092h-2.612Zm5.635 0V.609h2.611v17.654H74.27ZM93.834 6.172h2.757l-3.797 12.092h-2.563l-2.516-8.15-2.539 8.15h-2.563L78.816 6.172h2.757l2.346 8.343 2.54-8.343h2.49l2.514 8.343 2.37-8.343ZM99.83 4.36c-.92 0-1.669-.774-1.669-1.669.002-.443.18-.868.492-1.18a1.661 1.661 0 0 1 2.354 0c.313.312.49.737.492 1.18 0 .895-.75 1.669-1.669 1.669Zm-1.306 13.905V6.172h2.612v12.092h-2.612ZM110.52 5.858c2.708 0 4.643 1.838 4.643 4.982v7.423h-2.612v-7.158c0-1.838-1.064-2.804-2.708-2.804-1.717 0-3.071 1.015-3.071 3.482v6.48h-2.612V6.174h2.612V7.72c.798-1.257 2.103-1.862 3.748-1.862Zm17.024-4.522h2.612v16.927h-2.612v-1.741c-.918 1.282-2.345 2.055-4.231 2.055-3.289 0-6.022-2.78-6.022-6.36 0-3.603 2.733-6.36 6.022-6.36 1.886 0 3.313.774 4.231 2.032V1.336Zm-3.821 14.751c2.177 0 3.821-1.62 3.821-3.87 0-2.248-1.644-3.868-3.821-3.868-2.176 0-3.82 1.62-3.82 3.869s1.644 3.87 3.82 3.87Z" clip-rule="evenodd" fill-rule="evenodd"></path><path class="fill-sky-400" d="M170.982 18.501c-2.467 0-4.088-1.19-4.744-2.984l2.036-1.19c.431 1.121 1.276 1.846 2.777 1.846 1.432 0 1.932-.604 1.932-1.277 0-.897-.811-1.242-2.605-1.76-1.845-.534-3.639-1.31-3.639-3.605 0-2.277 1.897-3.588 3.967-3.588 1.984 0 3.502 1.018 4.313 2.709l-2.001 1.155c-.432-.914-1.087-1.552-2.312-1.552-1 0-1.587.517-1.587 1.207 0 .742.466 1.139 2.294 1.69 1.915.605 3.951 1.243 3.951 3.71 0 2.26-1.812 3.64-4.382 3.64ZM158.711 18.502c-2.639 0-4.606-1.587-4.606-4.192V6.185h2.364v7.935c0 1.173.621 2.053 2.242 2.053 1.622 0 2.243-.88 2.243-2.053V6.185h2.38v8.125c0 2.605-1.966 4.192-4.623 4.192ZM147.056 15.983h4.606v2.277h-6.986V6.185h2.38v9.798ZM137.623 6.185c2.329 0 4.123 1.794 4.123 4.054 0 2.26-1.794 4.054-4.123 4.054h-2.121v3.967h-2.381V6.185h4.502Zm0 5.882c1.018 0 1.76-.793 1.76-1.828 0-1.052-.742-1.829-1.76-1.829h-2.121v3.657h2.121Z"></path></svg></a><div class="@container flex flex-1 justify-start pl-8"><a href="https://tailwindcss.com/blog/tailwind-plus" class="flex flex-nowrap items-center gap-2 rounded-full px-3 py-2 text-xs/4 whitespace-nowrap ring ring-gray-950/8 hover:bg-gray-950/2 hover:ring-gray-950/10 @max-[22rem]:hidden"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="size-4 fill-sky-500"><path fill-rule="evenodd" d="M5 4a.75.75 0 0 1 .738.616l.252 1.388A1.25 1.25 0 0 0 6.996 7.01l1.388.252a.75.75 0 0 1 0 1.476l-1.388.252A1.25 1.25 0 0 0 5.99 9.996l-.252 1.388a.75.75 0 0 1-1.476 0L4.01 9.996A1.25 1.25 0 0 0 3.004 8.99l-1.388-.252a.75.75 0 0 1 0-1.476l1.388-.252A1.25 1.25 0 0 0 4.01 6.004l.252-1.388A.75.75 0 0 1 5 4ZM12 1a.75.75 0 0 1 .721.544l.195.682c.118.415.443.74.858.858l.682.195a.75.75 0 0 1 0 1.442l-.682.195a1.25 1.25 0 0 0-.858.858l-.195.682a.75.75 0 0 1-1.442 0l-.195-.682a1.25 1.25 0 0 0-.858-.858l-.682-.195a.75.75 0 0 1 0-1.442l.682-.195a1.25 1.25 0 0 0 .858-.858l.195-.682A.75.75 0 0 1 12 1ZM10 11a.75.75 0 0 1 .728.568.968.968 0 0 0 .704.704.75.75 0 0 1 0 1.456.968.968 0 0 0-.704.704.75.75 0 0 1-1.456 0 .968.968 0 0 0-.704-.704.75.75 0 0 1 0-1.456.968.968 0 0 0 .704-.704A.75.75 0 0 1 10 11Z" clip-rule="evenodd"></path></svg><span class="font-medium">Tailwind UI is now Tailwind Plus</span><span class="size-0.75 rounded-full bg-current"></span><div class="flex gap-0.5"><span>Learn more</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="-mr-1 size-4 fill-gray-950/30"><path fill-rule="evenodd" d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path></svg></div></a></div><div class="flex items-center gap-5 max-md:hidden lg:gap-6"><button type="button" aria-label="Search" class="flex items-center gap-1 rounded-full bg-gray-950/2 px-2 py-1 inset-ring inset-ring-gray-950/8"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="-ml-0.5 size-4 fill-gray-600"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path></svg><kbd class="font-sans text-xs/4 text-gray-500 not-in-[.macos]:after:content-['Ctrl_K'] in-[.macos]:after:content-['⌘K']"></kbd></button><a class="text-sm/6 text-gray-950" href="/plus/ui-blocks">UI Blocks</a><a class="text-sm/6 text-gray-950" href="/plus/templates">Templates</a><a class="text-sm/6 text-gray-950" href="/plus/ui-kit">UI Kit</a><div class="h-6 w-px bg-gray-950/10"></div><a class="text-sm/6 text-gray-950" href="/plus/login">Sign in</a><a class="rounded-full bg-gray-950 px-2.5 py-0.5 text-sm/6 font-medium text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-950" href="/plus#pricing">Get full access</a></div><div class="flex items-center gap-2.5 md:hidden"><button type="button" aria-label="Search" class="inline-grid size-7 place-items-center rounded-md"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="size-4"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path></svg></button><button type="button" class="relative inline-grid size-7 place-items-center rounded-md text-gray-950 hover:bg-gray-950/5" aria-label="Navigation"><span class="absolute top-1/2 left-1/2 size-11 -translate-1/2 [@media(pointer:fine)]:hidden"></span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="size-4"><path d="M8 2a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM8 6.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM9.5 12.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"></path></svg></button><span hidden="" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></span></div></header><main class="flex min-h-dvh flex-col pt-14"><div class="grid flex-1 grid-rows-[1fr_auto] overflow-clip grid-cols-[1fr_var(--gutter-width)_minmax(0,var(--breakpoint-2xl))_var(--gutter-width)_1fr] [--gutter-width:--spacing(6)] lg:[--gutter-width:--spacing(10)]"><div class="col-start-2 row-span-full row-start-1 max-sm:hidden text-gray-950/5 border-x border-x-current bg-[size:10px_10px] bg-fixed bg-[image:repeating-linear-gradient(315deg,currentColor_0,currentColor_1px,_transparent_0,_transparent_50%)]"></div><div class="col-start-4 row-span-full row-start-1 max-sm:hidden text-gray-950/5 border-x border-x-current bg-[size:10px_10px] bg-fixed bg-[image:repeating-linear-gradient(315deg,currentColor_0,currentColor_1px,_transparent_0,_transparent_50%)]"></div><div class="col-start-3 row-start-1 max-sm:col-span-full max-sm:col-start-1"><div class="line-y mt-12 grid gap-x-10 sm:mt-20 lg:mt-24 lg:grid-cols-[3fr_2fr]"><div class="max-lg:line-b px-4 py-2 sm:px-2 lg:border-r lg:border-gray-950/5"><p class="font-mono text-[0.8125rem]/6 font-medium tracking-widest text-pretty uppercase text-gray-600">By the makers of Tailwind CSS</p><h1 class="mt-2 text-6xl tracking-tighter sm:text-8xl text-pretty">Build your next idea even faster.</h1></div><div class="grid grid-cols-1 grid-rows-[1fr_auto] lg:border-l lg:border-gray-950/5"><div class="max-lg:line-y flex items-center px-4 py-2 max-lg:mt-6 sm:px-2"><p class="max-w-2xl text-lg/7 font-medium text-pretty text-gray-600">Beautifully designed, expertly crafted components and templates, built by the makers of Tailwind CSS. The perfect starting point for your next project.</p></div><div class="max-lg:line-t flex gap-4 px-4 py-2 whitespace-nowrap max-lg:mt-6 sm:px-2 lg:border-t lg:border-gray-950/5"><a class="gap-2 inline-flex justify-center rounded-full px-4 py-2 text-sm/6 font-semibold bg-gray-950 text-white hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-950" href="/plus/templates">Explore templates<svg fill="currentColor" aria-hidden="true" viewBox="0 0 10 10" class="-mr-0.5 w-2.5"><path d="M4.85355 0.146423L9.70711 4.99998L4.85355 9.85353L4.14645 9.14642L7.79289 5.49998H0V4.49998H7.79289L4.14645 0.85353L4.85355 0.146423Z"></path></svg></a><a class="gap-2 inline-flex justify-center rounded-full px-4 py-2 text-sm/6 font-semibold text-gray-950 ring-1 ring-gray-950/10 hover:ring-gray-950/20" href="/plus/ui-blocks">Browse UI blocks<svg fill="currentColor" aria-hidden="true" viewBox="0 0 10 10" class="-mr-0.5 w-2.5 fill-gray-600"><path d="M4.85355 0.146423L9.70711 4.99998L4.85355 9.85353L4.14645 9.14642L7.79289 5.49998H0V4.49998H7.79289L4.14645 0.85353L4.85355 0.146423Z"></path></svg></a></div></div></div><button type="button" aria-hidden="true" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0"></button><div class="mt-20"><div class="line-y grid grid-cols-[1fr_1px_1fr_1px_1fr]" role="tablist" aria-orientation="horizontal"><button class="group relative flex items-center justify-center gap-4 p-4 focus:not-data-focus:outline-none data-selected:text-indigo-600 max-lg:flex-col sm:p-6" id="headlessui-tabs-tab-:Rb8jla:" role="tab" type="button" aria-selected="true" tabindex="0" data-headlessui-state="selected" data-selected=""><div class="absolute -inset-x-px inset-y-0 bg-indigo-500/5 not-group-data-selected:hidden"></div><svg class="w-20 shrink-0 sm:w-30 *:data-lift:transition-transform *:data-lift:duration-300 group-hover:*:data-lift:-translate-y-0.5 group-data-selected:*:data-lift:translate-y-0" aria-hidden="true" fill="none" viewBox="0 0 120 72"><path class="fill-white" d="M56.095 7 8.464 34.5c-.957.553-1.435 1.276-1.435 2v3c0 .724.478 1.448 1.435 2L56.095 69c1.913 1.105 5.015 1.105 6.928 0l47.632-27.5c.956-.552 1.435-1.276 1.435-2v-3c-.001-.724-.479-1.447-1.435-2L63.023 7c-1.913-1.104-5.015-1.104-6.928 0"></path><path stroke="currentColor" stroke-opacity="0.4" d="M112.09 36.5c-.001-.724-.479-1.447-1.435-2L63.023 7c-1.913-1.104-5.015-1.104-6.928 0L8.464 34.5c-.957.553-1.435 1.276-1.435 2m105.061 0c0 .724-.479 1.448-1.435 2L63.023 66c-1.913 1.105-5.015 1.105-6.928 0L8.464 38.5c-.957-.552-1.435-1.276-1.435-2m105.061 0v3c0 .724-.479 1.448-1.435 2L63.023 69c-1.913 1.105-5.015 1.105-6.928 0L8.464 41.5c-.957-.552-1.435-1.276-1.435-2v-3"></path><path fill="currentColor" stroke="currentColor" d="M11.062 37c-.478-.276-.478-.724 0-1L58.694 8.5c.478-.276 1.253-.276 1.732 0l2.598 1.5c.478.276.478.724 0 1L15.392 38.5c-.478.276-1.253.276-1.732 0z" opacity="0.1"></path><g fill="currentColor" stroke="currentColor" opacity="0.1"><path d="M19.723 42c-.479-.276-.479-.724 0-1l47.63-27.5c.48-.276 1.255-.276 1.733 0L89.004 25c.479.276.479.724 0 1l-47.63 27.5c-.48.276-1.255.276-1.733 0z"></path><path d="M34.445 31.5c-.479-.276-.479-.724 0-1L49.167 22c.478-.276 1.254-.276 1.732 0l23.383 13.5c.478.276.478.724 0 1L59.559 45c-.478.276-1.253.276-1.732 0z"></path></g><path fill="currentColor" stroke="currentColor" d="M45.703 57c-.478-.276-.478-.724 0-1l47.632-27.5c.478-.276 1.254-.276 1.732 0l12.99 7.5c.479.276.479.724 0 1L60.426 64.5c-.478.276-1.254.276-1.732 0z" opacity="0.1"></path><g data-lift="true"><path class="fill-white" stroke="currentColor" d="M11.062 32c-.478-.276-.478-.724 0-1L58.694 3.5c.478-.276 1.253-.276 1.732 0L63.024 5c.478.276.478.724 0 1L15.392 33.5c-.478.276-1.253.276-1.732 0z"></path><path class="fill-white" stroke="currentColor" d="M19.723 37c-.479-.276-.479-.724 0-1l47.63-27.5c.48-.276 1.255-.276 1.733 0L89.004 20c.479.276.479.724 0 1l-47.63 27.5c-.48.276-1.255.276-1.733 0z"></path><path stroke="currentColor" stroke-opacity="0.3" d="M37.909 44.5c-.478-.276-.478-.724 0-1l9.526-5.5c.479-.276 1.254-.276 1.732 0l1.732 1c.479.276.479.724 0 1l-9.526 5.5c-.478.276-1.254.276-1.732 0z"></path><path class="fill-white" stroke="currentColor" d="M34.445 26.5c-.479-.276-.479-.724 0-1L49.167 17c.478-.276 1.254-.276 1.732 0l23.383 13.5c.478.276.478.724 0 1L59.559 40c-.478.276-1.253.276-1.732 0z"></path><path stroke="currentColor" stroke-opacity="0.3" d="M56.096 36c-.479-.276-.479-.724 0-1l9.526-5.5c.478-.276 1.254-.276 1.732 0l1.732 1c.478.276.478.724 0 1L59.56 37c-.479.276-1.254.276-1.732 0zM70.818 25.5c-.478-.276-.478-.724 0-1l9.526-5.5c.479-.276 1.254-.276 1.733 0l1.732 1c.478.276.478.724 0 1l-9.527 5.5c-.478.276-1.254.276-1.732 0z"></path><path class="fill-white" stroke="currentColor" d="M45.703 52c-.478-.276-.478-.724 0-1l47.632-27.5c.478-.276 1.254-.276 1.732 0l12.99 7.5c.479.276.479.724 0 1L60.426 59.5c-.478.276-1.254.276-1.732 0z"></path><path stroke="currentColor" stroke-opacity="0.3" d="M93.335 34.5c-.478-.276-.478-.724 0-1l6.062-3.5c.478-.276 1.254-.276 1.732 0l1.732 1c.478.276.478.724 0 1l-6.062 3.5c-.478.276-1.254.276-1.732 0zM77.746 43.5c-.478-.276-.478-.724 0-1L89.004 36c.478-.276 1.254-.276 1.732 0l1.732 1c.479.276.479.724 0 1L81.21 44.5c-.478.276-1.254.276-1.732 0z"></path></g></svg><div class="text-left text-xs/5 sm:text-sm/7 xl:flex-1"><p class="font-mono font-semibold tracking-widest uppercase">UI Blocks</p><p class="mt-2 text-gray-600 max-xl:hidden">Over 500+ professionally designed, fully responsive, expertly crafted components.</p></div></button><div class="w-px bg-gray-950/5"></div><button class="group relative flex items-center justify-center gap-4 p-4 focus:not-data-focus:outline-none data-selected:text-pink-600 max-lg:flex-col sm:p-6" id="headlessui-tabs-tab-:Rr8jla:" role="tab" type="button" aria-selected="false" tabindex="-1" data-headlessui-state=""><div class="absolute -inset-x-px inset-y-0 bg-pink-500/5 not-group-data-selected:hidden"></div><svg class="w-20 shrink-0 sm:w-30 *:data-lift:transition-transform *:data-lift:duration-300 group-hover:*:data-lift:-translate-y-0.5 group-data-selected:*:data-lift:translate-y-0" aria-hidden="true" fill="none" viewBox="0 0 120 72"><g data-lift="true"><path shape-rendering="geometricPrecision" fill="white" d="M56.066 6 8.435 33.5C7.478 34.053 7 34.776 7 35.5v3c0 .724.478 1.448 1.435 2L56.066 68c1.913 1.105 5.015 1.105 6.929 0l47.631-27.5c.957-.552 1.435-1.276 1.435-2v-3c0-.724-.479-1.447-1.435-2L62.995 6c-1.914-1.104-5.015-1.104-6.929 0"></path><path shape-rendering="geometricPrecision" stroke="currentColor" d="M112.09 35.496c-.001-.723-.479-1.447-1.435-2l-47.632-27.5c-1.913-1.104-5.015-1.104-6.928 0l-47.631 27.5c-.957.553-1.435 1.277-1.435 2m105.061 0c0 .724-.479 1.448-1.435 2l-47.632 27.5c-1.913 1.105-5.015 1.105-6.928 0l-47.631-27.5c-.957-.552-1.435-1.276-1.435-2m105.061 0v3c0 .724-.479 1.448-1.435 2l-47.632 27.5c-1.913 1.105-5.015 1.105-6.928 0l-47.631-27.5c-.957-.552-1.435-1.276-1.435-2v-3"></path><path shape-rendering="geometricPrecision" stroke="currentColor" stroke-opacity="0.3" d="M11.062 35.996c-.478-.276-.478-.724 0-1l47.632-27.5c.478-.276 1.253-.276 1.732 0l30.31 17.5c.479.277.479.724 0 1l-47.63 27.5c-.479.276-1.255.276-1.733 0zM45.703 55.996c-.478-.276-.478-.724 0-1l47.632-27.5c.478-.276 1.254-.276 1.732 0l12.99 7.5c.479.276.479.724 0 1l-47.631 27.5c-.478.276-1.254.276-1.732 0z"></path><circle shape-rendering="geometricPrecision" cx="1.5" cy="1.5" r="1.5" fill="currentColor" transform="matrix(.86603 -.5 .86603 .5 16.258 35.496)"></circle><path shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" d="m22.32 33.496 3.464-2M56.961 13.496l3.465-2M49.168 17.996l4.33-2.5M42.24 21.996l3.463-2"></path><path stroke="currentColor" stroke-linecap="round" stroke-opacity="0.3" d="m41.373 38.496 23.383-13.5"></path><path shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" d="m53.498 55.496 6.928-4M69.086 46.496l6.928-4M84.674 37.496l6.929-4"></path><path shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-opacity="0.3" d="m56.096 56.996 9.526-5.5M71.684 47.996l9.526-5.5M87.273 38.996l9.526-5.5M58.693 58.496l8.66-5M74.282 49.496l8.66-5M89.87 40.496l8.66-5M46.57 38.496l18.186-10.5"></path><rect shape-rendering="geometricPrecision" width="28" height="2" fill="currentColor" rx="0.5" transform="matrix(.86603 -.5 .86603 .5 33.579 34.496)"></rect><rect shape-rendering="geometricPrecision" width="32" height="2" fill="currentColor" rx="0.5" transform="matrix(.86603 -.5 .86603 .5 35.311 37.496)"></rect><rect shape-rendering="geometricPrecision" width="10" height="3" fill="currentColor" rx="1.5" transform="matrix(.86603 -.5 .86603 .5 48.301 39.996)"></rect><rect shape-rendering="geometricPrecision" width="10" height="3" fill="currentColor" fill-opacity="0.3" rx="1.5" transform="matrix(.86603 -.5 .86603 .5 58.693 33.996)"></rect></g></svg><div class="text-left text-xs/5 sm:text-sm/7 xl:flex-1"><p class="font-mono font-semibold tracking-widest uppercase">Templates</p><p class="mt-2 text-gray-600 max-xl:hidden">Visually-stunning, easy to customize site templates built with React and Next.js.</p></div></button><div class="w-px bg-gray-950/5"></div><button class="group relative flex items-center justify-center gap-4 p-4 focus:not-data-focus:outline-none data-selected:text-sky-600 max-lg:flex-col sm:p-6" id="headlessui-tabs-tab-:R1b8jla:" role="tab" type="button" aria-selected="false" tabindex="-1" data-headlessui-state=""><div class="absolute -inset-x-px inset-y-0 bg-sky-500/5 not-group-data-selected:hidden"></div><svg class="w-20 shrink-0 sm:w-30 *:data-lift:transition-transform *:data-lift:duration-300 group-hover:*:data-lift:-translate-y-0.5 group-data-selected:*:data-lift:translate-y-0" aria-hidden="true" fill="none" viewBox="0 0 120 72"><path class="fill-white" d="M56.095 6 8.464 33.5c-.957.553-1.435 1.276-1.435 2v3c0 .724.478 1.448 1.435 2L56.095 68c1.913 1.105 5.015 1.105 6.928 0l47.632-27.5c.956-.552 1.435-1.276 1.435-2v-3c-.001-.724-.479-1.447-1.435-2L63.023 6c-1.913-1.104-5.015-1.104-6.928 0"></path><g stroke="currentColor" opacity="0.1"><path fill="currentColor" d="M60.425 52.5c-.478-.276-.478-.724 0-1L87.272 36c.478-.276 1.254-.276 1.732 0l1.732 1c.478.276.478.724 0 1L63.89 53.5c-.478.276-1.253.276-1.732 0zM54.363 49c-.956-.552-.956-1.448 0-2l3.464-2c.957-.552 2.508-.552 3.464 0 .957.552.957 1.448 0 2l-3.464 2c-.956.552-2.507.552-3.464 0Z"></path><path stroke-linecap="round" d="m63.89 43.5 12.124-7"></path><path fill="currentColor" d="M46.57 44.5c-.48-.276-.48-.724 0-1L73.415 28c.478-.276 1.254-.276 1.732 0l1.732 1c.478.276.478.724 0 1L50.033 45.5c-.478.276-1.254.276-1.732 0z"></path><path stroke-linecap="round" d="m43.105 42.5 10.392-6"></path><path fill="currentColor" d="M37.043 39c-.478-.276-.478-.724 0-1L63.89 22.5c.478-.276 1.253-.276 1.732 0l1.732 1c.478.276.478.724 0 1L40.507 40c-.478.276-1.254.276-1.732 0z"></path><path stroke-linecap="round" d="m33.579 37 10.392-6"></path></g><path stroke="currentColor" stroke-opacity="0.4" d="M112.09 35.5c-.001-.724-.479-1.447-1.435-2L63.023 6c-1.913-1.104-5.015-1.104-6.928 0L8.464 33.5c-.957.553-1.435 1.276-1.435 2m105.061 0c0 .724-.479 1.448-1.435 2L63.023 65c-1.913 1.105-5.015 1.105-6.928 0L8.464 37.5c-.957-.552-1.435-1.276-1.435-2m105.061 0v3c0 .724-.479 1.448-1.435 2L63.023 68c-1.913 1.105-5.015 1.105-6.928 0L8.464 40.5c-.957-.552-1.435-1.276-1.435-2v-3"></path><path stroke="currentColor" stroke-opacity="0.4" d="M17.99 40c-.478-.276-.478-.724 0-1l47.632-27.5c.478-.276 1.254-.276 1.732 0L108.057 35c.478.276.478.724 0 1L60.426 63.5c-.479.276-1.254.276-1.732 0z"></path><path fill="currentColor" stroke="currentColor" d="M11.062 36c-.478-.276-.478-.724 0-1L58.694 7.5c.478-.276 1.253-.276 1.732 0L63.024 9c.478.276.478.724 0 1L15.392 37.5c-.478.276-1.253.276-1.732 0z" opacity="0.1"></path><g data-lift="true"><path class="fill-current" fill-opacity="0.3" stroke="currentColor" d="M60.425 47.5c-.478-.276-.478-.724 0-1L87.272 31c.478-.276 1.254-.276 1.732 0l1.732 1c.478.276.478.724 0 1L63.89 48.5c-.478.276-1.253.276-1.732 0zM54.363 44c-.956-.552-.956-1.448 0-2l3.464-2c.957-.552 2.508-.552 3.464 0 .957.552.957 1.448 0 2l-3.464 2c-.956.552-2.507.552-3.464 0Z"></path><circle cx="2" cy="2" r="2" class="fill-white" stroke="currentColor" transform="matrix(.86603 -.5 .86603 .5 56.095 41)"></circle><path stroke="currentColor" stroke-linecap="round" d="m63.89 38.5 12.124-7"></path><path class="fill-white" stroke="currentColor" d="M46.57 39.5c-.48-.276-.48-.724 0-1L73.415 23c.478-.276 1.254-.276 1.732 0l1.732 1c.478.276.478.724 0 1L50.033 40.5c-.478.276-1.254.276-1.732 0z"></path><path stroke="currentColor" stroke-linecap="round" d="m43.105 37.5 10.392-6"></path><path class="fill-white" stroke="currentColor" d="M37.043 34c-.478-.276-.478-.724 0-1L63.89 17.5c.478-.276 1.253-.276 1.732 0l1.732 1c.478.276.478.724 0 1L40.507 35c-.478.276-1.254.276-1.732 0z"></path><path stroke="currentColor" stroke-linecap="round" d="m33.579 32 10.392-6"></path><path class="fill-white" stroke="currentColor" d="M11.062 31c-.478-.276-.478-.724 0-1L58.694 2.5c.478-.276 1.253-.276 1.732 0L63.024 4c.478.276.478.724 0 1L15.392 32.5c-.478.276-1.253.276-1.732 0z"></path></g></svg><div class="text-left text-xs/5 sm:text-sm/7 xl:flex-1"><p class="font-mono font-semibold tracking-widest uppercase">UI Kit</p><p class="mt-2 text-gray-600 max-xl:hidden">A starter kit for building your own component systems with React and Tailwind CSS.</p></div></button></div><div class="line-y mt-4"><div class="bg-gray-950/5 p-2" id="headlessui-tabs-panel-:Rd8jla:" role="tabpanel" tabindex="0" data-headlessui-state="selected" data-selected=""><a class="block h-148 overflow-hidden rounded-2xl bg-gray-50 ring ring-gray-950/5 max-sm:h-100" href="/plus/ui-blocks"><div class="flex size-full items-center justify-center"><div class="size-430 shrink-0 scale-50 sm:scale-75 lg:scale-100"><div class="relative top-(--top,30%) right-(--right,54%) grid size-full origin-top-left rotate-x-55 rotate-y-0 -rotate-z-45 grid-cols-4 gap-8 transform-3d"><div class="flex flex-col gap-8" style="transform:translateY(1000px)"><img src="/plus-assets/img/heroes/ui-blocks-col-1-row-1.png" class="aspect-[970/580] ring ring-gray-950/5" width="970" height="580" alt=""/><img src="/plus-assets/img/heroes/ui-blocks-col-1-row-2.png" class="aspect-[971/582] ring ring-gray-950/5" width="971" height="582" alt=""/><img src="/plus-assets/img/heroes/ui-blocks-col-1-row-3.png" class="aspect-[971/820] ring ring-gray-950/5" width="971" height="820" alt=""/><img src="/plus-assets/img/heroes/ui-blocks-col-1-row-4.png" class="aspect-[970/508] ring ring-gray-950/5" width="970" height="508" alt=""/></div><div class="flex flex-col gap-8" style="transform:translateY(500px)"><img src="/plus-assets/img/heroes/ui-blocks-col-2-row-1.png" class="aspect-[970/436] ring ring-gray-950/5" width="970" height="436" alt=""/><img src="/plus-assets/img/heroes/ui-blocks-col-2-row-2.png" class="aspect-[970/700] ring ring-gray-950/5" width="970" height="700" alt=""/><img src="/plus-assets/img/heroes/ui-blocks-col-2-row-3.png" class="aspect-[971/879] ring ring-gray-950/5" width="971" height="879" alt=""/><img src="/plus-assets/img/heroes/ui-blocks-col-2-row-4.png" class="aspect-[970/557] ring ring-gray-950/5" width="970" height="557" alt=""/><img src="/plus-assets/img/heroes/ui-blocks-col-2-row-5.png" class="aspect-[970/763] ring ring-gray-950/5" width="970" height="763" alt=""/><img src="/plus-assets/img/heroes/ui-blocks-col-2-row-6.png" class="aspect-[970/922] ring ring-gray-950/5" width="970" height="922" alt=""/></div><div class="flex flex-col gap-8" style="transform:translateY(1000px)"><img src="/plus-assets/img/heroes/ui-blocks-col-3-row-1.png" class="aspect-[970/580] ring ring-gray-950/5" width="970" height="580" alt=""/><img src="/plus-assets/img/heroes/ui-blocks-col-3-row-2.png" class="aspect-[971/395] ring ring-gray-950/5" width="971" height="395" alt=""/><img src="/plus-assets/img/heroes/ui-blocks-col-3-row-3.png" class="aspect-[971/349] ring ring-gray-950/5" width="971" height="349" alt=""/><img src="/plus-assets/img/heroes/ui-blocks-col-3-row-4.png" class="aspect-[970/975] ring ring-gray-950/5" width="970" height="975" alt=""/><img src="/plus-assets/img/heroes/ui-blocks-col-3-row-5.png" class="aspect-[970/381] ring ring-gray-950/5" width="970" height="381" alt=""/><img src="/plus-assets/img/heroes/ui-blocks-col-3-row-6.png" class="aspect-[970/782] ring ring-gray-950/5" width="970" height="782" alt=""/><img src="/plus-assets/img/heroes/ui-blocks-col-3-row-7.png" class="aspect-[970/426] ring ring-gray-950/5" width="970" height="426" alt=""/></div><div class="flex flex-col gap-8" style="transform:translateY(1150px)"><img src="/plus-assets/img/heroes/ui-blocks-col-4-row-1.png" class="aspect-[970/600] ring ring-gray-950/5" width="970" height="600" alt=""/><img src="/plus-assets/img/heroes/ui-blocks-col-4-row-2.png" class="aspect-[972/854] ring ring-gray-950/5" width="972" height="854" alt=""/><img src="/plus-assets/img/heroes/ui-blocks-col-4-row-3.png" class="aspect-[971/725] ring ring-gray-950/5" width="971" height="725" alt=""/></div></div></div></div></a></div><span aria-hidden="true" id="headlessui-tabs-panel-:Rl8jla:" role="tabpanel" tabindex="-1" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0"></span><span aria-hidden="true" id="headlessui-tabs-panel-:Rt8jla:" role="tabpanel" tabindex="-1" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0"></span></div></div><section class="mt-22"><h2 class="sr-only">Testimonials</h2><div class="grid grid-cols-1 grid-rows-[auto_1fr] gap-x-10 max-lg:gap-y-10 lg:grid-cols-2 lg:gap-y-5"><figure class="group row-span-2 grid max-lg:mx-auto max-lg:max-w-3xl max-lg:gap-y-5 lg:grid-rows-subgrid lg:border-gray-950/5 lg:first:border-r lg:last:border-l"><blockquote class="max-lg:line-y lg:group-first:line-y mx-auto flex items-center px-8 py-2 text-xl/9 font-medium tracking-tight sm:px-16 sm:text-2xl/10"><p class="relative before:pointer-events-none before:absolute before:top-4 before:-left-6 before:text-[6rem] before:text-gray-950/10 before:content-['“'] sm:before:-left-8 lg:before:text-[8rem]">Tailwind Plus made it possible for me to ship the first version of Reflect entirely by myself, while still being immensely proud of the design.</p></blockquote><figcaption class="max-lg:line-y lg:group-first:line-y grid grid-cols-[max-content_1fr] gap-6 px-8 py-2 sm:px-16"><img class="aspect-square size-14 rounded-full outline -outline-offset-1 outline-gray-950/5" src="/plus-assets/img/testimonials/alex-maccaw.jpg" width="56" height="56" alt=""/><div class="text-sm/7"><p class="font-medium">Alex MacCaw</p><p class="text-gray-600">Founder of<!-- --> <a class="font-semibold text-gray-950 underline decoration-sky-400 underline-offset-4 hover:text-sky-500" href="https://reflect.app" target="_blank">Reflect</a> <!-- -->&<!-- --> <a class="font-semibold text-gray-950 underline decoration-sky-400 underline-offset-4 hover:text-sky-500" href="https://clearbit.com" target="_blank">Clearbit</a></p></div></figcaption></figure><figure class="group row-span-2 grid max-lg:mx-auto max-lg:max-w-3xl max-lg:gap-y-5 lg:grid-rows-subgrid lg:border-gray-950/5 lg:first:border-r lg:last:border-l"><blockquote class="max-lg:line-y lg:group-first:line-y mx-auto flex items-center px-8 py-2 text-xl/9 font-medium tracking-tight sm:px-16 sm:text-2xl/10"><p class="relative before:pointer-events-none before:absolute before:top-4 before:-left-6 before:text-[6rem] before:text-gray-950/10 before:content-['“'] sm:before:-left-8 lg:before:text-[8rem]">Yet again Tailwind and Tailwind Plus are dramatically speeding up my frontend work. At this point Tailwind Plus is hands-down the highest ROI digital asset I’ve ever bought.</p></blockquote><figcaption class="max-lg:line-y lg:group-first:line-y grid grid-cols-[max-content_1fr] gap-6 px-8 py-2 sm:px-16"><img class="aspect-square size-14 rounded-full outline -outline-offset-1 outline-gray-950/5" src="/plus-assets/img/testimonials/ben-barbersmith.jpg" width="56" height="56" alt=""/><div class="text-sm/7"><p class="font-medium">Ben Barbersmith</p><p class="text-gray-600">CTO & Co-Founder of<!-- --> <a class="font-semibold text-gray-950 underline decoration-sky-400 underline-offset-4 hover:text-sky-500" href="https://www.levellr.com" target="_blank">Levellr</a></p></div></figcaption></figure></div></section><section class="mt-20 sm:mt-40"><div class="line-y px-4 py-2 sm:px-2"><p class="text-indigo-600 font-mono text-[0.8125rem]/6 font-medium tracking-widest text-pretty uppercase min-[105rem]:absolute min-[105rem]:top-0 min-[105rem]:-left-10 min-[105rem]:origin-bottom-right min-[105rem]:-translate-x-full min-[105rem]:-translate-y-full min-[105rem]:-rotate-90 min-[105rem]:pr-2">UI Blocks</p><h2 class="max-w-3xl text-3xl font-medium tracking-tight text-pretty md:text-[2.5rem]/14">Beautiful UI components, built for real-world projects.</h2><p class="mt-4 max-w-2xl text-base/7 text-gray-600">A library of 500+ professionally designed, expertly crafted component examples you can drop into your Tailwind projects and customize to your heart’s content.</p></div><button type="button" aria-hidden="true" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0"></button><div class="mt-16 lg:mt-20"><div class="line-y"><div class="flex whitespace-nowrap" role="tablist" aria-orientation="horizontal"><button class="border-r border-gray-950/5 p-3 hover:bg-gray-950/2 focus:not-data-focus:outline-none data-selected:bg-gray-950/2.5 sm:px-6" id="headlessui-tabs-tab-:Rb93la:" role="tab" type="button" aria-selected="true" tabindex="0" data-headlessui-state="selected" data-selected=""><p class="font-mono text-[0.8125rem]/6 font-medium tracking-widest text-pretty uppercase text-gray-600">Marketing</p></button><button class="border-r border-gray-950/5 p-3 hover:bg-gray-950/2 focus:not-data-focus:outline-none data-selected:bg-gray-950/2.5 sm:px-6" id="headlessui-tabs-tab-:Rj93la:" role="tab" type="button" aria-selected="false" tabindex="-1" data-headlessui-state=""><p class="font-mono text-[0.8125rem]/6 font-medium tracking-widest text-pretty uppercase text-gray-600">Application UI</p></button><button class="border-r border-gray-950/5 p-3 hover:bg-gray-950/2 focus:not-data-focus:outline-none data-selected:bg-gray-950/2.5 sm:px-6" id="headlessui-tabs-tab-:Rr93la:" role="tab" type="button" aria-selected="false" tabindex="-1" data-headlessui-state=""><p class="font-mono text-[0.8125rem]/6 font-medium tracking-widest text-pretty uppercase text-gray-600">Ecommerce</p></button></div></div><div><div class="relative mt-4" id="headlessui-tabs-panel-:Rd93la:" role="tabpanel" tabindex="0" data-headlessui-state="selected" data-selected=""><div class="pointer-events-none absolute inset-0 z-10 grid grid-cols-1 gap-2 max-sm:hidden sm:grid-cols-2 sm:gap-x-5 sm:gap-y-10 md:gap-10 lg:grid-cols-3 xl:grid-cols-4"><div class="border-r border-gray-950/5"></div><div class="border-l border-gray-950/5 lg:border-x"></div><div class="border-l border-gray-950/5 max-lg:hidden xl:border-x"></div><div class="border-l border-gray-950/5 max-xl:hidden"></div></div><ul class="max-sm:line-y gap-2 max-sm:flex max-sm:overflow-x-auto sm:grid sm:grid-cols-2 sm:gap-x-5 sm:gap-y-10 md:gap-10 lg:grid-cols-3 xl:grid-cols-4"><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5 focus-visible:relative focus-visible:z-20 focus-visible:bg-white/75 focus-visible:backdrop-blur-sm" href="https://tailwindcss.com/plus/ui-blocks/marketing/sections/heroes"><div class="p-2"><img src="/plus-assets/img/ui-blocks/marketing/heroes.png" class="aspect-[708/480] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="708" height="480" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">Hero Sections</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">12 components</p></div></a></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5 focus-visible:relative focus-visible:z-20 focus-visible:bg-white/75 focus-visible:backdrop-blur-sm" href="https://tailwindcss.com/plus/ui-blocks/marketing/sections/cta-sections"><div class="p-2"><img src="/plus-assets/img/ui-blocks/marketing/cta-sections.png" class="aspect-[708/480] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="708" height="480" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">CTA Sections</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">11 components</p></div></a></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5 focus-visible:relative focus-visible:z-20 focus-visible:bg-white/75 focus-visible:backdrop-blur-sm" href="https://tailwindcss.com/plus/ui-blocks/marketing/sections/pricing"><div class="p-2"><img src="/plus-assets/img/ui-blocks/marketing/pricing.png" class="aspect-[708/480] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="708" height="480" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">Pricing Sections</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">14 components</p></div></a></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5 focus-visible:relative focus-visible:z-20 focus-visible:bg-white/75 focus-visible:backdrop-blur-sm" href="https://tailwindcss.com/plus/ui-blocks/marketing/sections/stats-sections"><div class="p-2"><img src="/plus-assets/img/ui-blocks/marketing/stats-sections.png" class="aspect-[708/480] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="708" height="480" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">Stats</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">10 components</p></div></a></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5 focus-visible:relative focus-visible:z-20 focus-visible:bg-white/75 focus-visible:backdrop-blur-sm" href="https://tailwindcss.com/plus/ui-blocks/marketing/sections/testimonials"><div class="p-2"><img src="/plus-assets/img/ui-blocks/marketing/testimonials.png" class="aspect-[708/480] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="708" height="480" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">Testimonials</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">9 components</p></div></a></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5 focus-visible:relative focus-visible:z-20 focus-visible:bg-white/75 focus-visible:backdrop-blur-sm" href="https://tailwindcss.com/plus/ui-blocks/marketing/sections/team-sections"><div class="p-2"><img src="/plus-assets/img/ui-blocks/marketing/team-sections.png" class="aspect-[708/480] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="708" height="480" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">Team Sections</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">9 components</p></div></a></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5 focus-visible:relative focus-visible:z-20 focus-visible:bg-white/75 focus-visible:backdrop-blur-sm" href="https://tailwindcss.com/plus/ui-blocks/marketing/sections/faq-sections"><div class="p-2"><img src="/plus-assets/img/ui-blocks/marketing/faq-sections.png" class="aspect-[708/480] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="708" height="480" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">FAQs</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">10 components</p></div></a></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5 focus-visible:relative focus-visible:z-20 focus-visible:bg-white/75 focus-visible:backdrop-blur-sm" href="https://tailwindcss.com/plus/ui-blocks/marketing/sections/footers"><div class="p-2"><img src="/plus-assets/img/ui-blocks/marketing/footers.png" class="aspect-[708/480] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="708" height="480" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">Footers</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">14 components</p></div></a></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5 focus-visible:relative focus-visible:z-20 focus-visible:bg-white/75 focus-visible:backdrop-blur-sm" href="https://tailwindcss.com/plus/ui-blocks/marketing/elements/flyout-menus"><div class="p-2"><img src="/plus-assets/img/ui-blocks/marketing/flyout-menus.png" class="aspect-[708/480] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="708" height="480" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">Flyout Menus</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">7 components</p></div></a></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5 focus-visible:relative focus-visible:z-20 focus-visible:bg-white/75 focus-visible:backdrop-blur-sm" href="https://tailwindcss.com/plus/ui-blocks/marketing/feedback/404-pages"><div class="p-2"><img src="/plus-assets/img/ui-blocks/marketing/404-pages.png" class="aspect-[708/480] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="708" height="480" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">404 Pages</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">5 components</p></div></a></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5 focus-visible:relative focus-visible:z-20 focus-visible:bg-white/75 focus-visible:backdrop-blur-sm" href="https://tailwindcss.com/plus/ui-blocks/marketing/page-examples/landing-pages"><div class="p-2"><img src="/plus-assets/img/ui-blocks/marketing/landing-pages.png" class="aspect-[708/480] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="708" height="480" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">Landing Pages</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">4 components</p></div></a></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5 focus-visible:relative focus-visible:z-20 focus-visible:bg-white/75 focus-visible:backdrop-blur-sm" href="https://tailwindcss.com/plus/ui-blocks/marketing/page-examples/about-pages"><div class="p-2"><img src="/plus-assets/img/ui-blocks/marketing/about-pages.png" class="aspect-[708/480] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="708" height="480" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">About Pages</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">3 components</p></div></a></li></ul><div class="pointer-events-none absolute inset-x-0 bottom-px z-10 flex h-100 items-end justify-center bg-linear-to-b to-white pb-8 max-sm:hidden"><a class="pointer-events-auto gap-2 inline-flex justify-center rounded-full px-4 py-2 text-sm/6 font-semibold bg-gray-950 text-white hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-950" href="https://tailwindcss.com/plus/ui-blocks/marketing">See more<svg fill="currentColor" aria-hidden="true" viewBox="0 0 10 10" class="-mr-0.5 w-2.5"><path d="M4.85355 0.146423L9.70711 4.99998L4.85355 9.85353L4.14645 9.14642L7.79289 5.49998H0V4.49998H7.79289L4.14645 0.85353L4.85355 0.146423Z"></path></svg></a></div></div><span aria-hidden="true" id="headlessui-tabs-panel-:Rl93la:" role="tabpanel" tabindex="-1" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0"></span><span aria-hidden="true" id="headlessui-tabs-panel-:Rt93la:" role="tabpanel" tabindex="-1" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0"></span></div></div><div class="line-y mt-4 px-4 py-2 sm:hidden"><a class="gap-2 inline-flex justify-center rounded-full px-4 py-2 text-sm/6 font-semibold bg-gray-950 text-white hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-950" href="/plus/ui-blocks">Learn more about UI blocks<svg fill="currentColor" aria-hidden="true" viewBox="0 0 10 10" class="-mr-0.5 w-2.5"><path d="M4.85355 0.146423L9.70711 4.99998L4.85355 9.85353L4.14645 9.14642L7.79289 5.49998H0V4.49998H7.79289L4.14645 0.85353L4.85355 0.146423Z"></path></svg></a></div></section><section class="mt-20 sm:mt-40"><div class="line-y px-4 py-2 sm:px-2"><p class="text-pink-500 font-mono text-[0.8125rem]/6 font-medium tracking-widest text-pretty uppercase min-[105rem]:absolute min-[105rem]:top-0 min-[105rem]:-left-10 min-[105rem]:origin-bottom-right min-[105rem]:-translate-x-full min-[105rem]:-translate-y-full min-[105rem]:-rotate-90 min-[105rem]:pr-2">Templates</p><h2 class="max-w-3xl text-3xl font-medium tracking-tight text-pretty md:text-[2.5rem]/14">Modern website templates, ready for your next launch.</h2><p class="mt-4 max-w-2xl text-base/7 text-gray-600">Visually-stunning, customizable site templates built with React and Next.js. Your perfect starting point and the ultimate resource for learning expert Tailwind CSS techniques.</p></div><div class="relative mt-16 lg:mt-20"><div class="pointer-events-none absolute inset-0 z-10 grid grid-cols-1 gap-2 max-sm:hidden sm:grid-cols-2 sm:gap-x-5 sm:gap-y-10 md:gap-10 lg:grid-cols-3 xl:grid-cols-4"><div class="border-r border-gray-950/5"></div><div class="border-l border-gray-950/5 lg:border-x"></div><div class="border-l border-gray-950/5 max-lg:hidden xl:border-x"></div><div class="border-l border-gray-950/5 max-xl:hidden"></div></div><ul class="max-sm:line-y gap-2 max-sm:flex max-sm:overflow-x-auto sm:grid sm:grid-cols-2 sm:gap-x-5 sm:gap-y-10 md:gap-10 lg:grid-cols-3 xl:grid-cols-4"><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5" href="https://tailwindcss.com/plus/templates/spotlight"><div class="p-2"><img src="https://tailwindcss.com/plus-assets/img/templates/spotlight/preview-01.png" class="aspect-[560/380] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="560" height="380" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">Spotlight</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">Personal website template</p></div></a></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5" href="https://tailwindcss.com/plus/templates/radiant"><div class="p-2"><img src="https://tailwindcss.com/plus-assets/img/templates/radiant/preview-01.png" class="aspect-[560/380] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="560" height="380" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">Radiant</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">SaaS marketing template</p></div></a></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5" href="https://tailwindcss.com/plus/templates/studio"><div class="p-2"><img src="https://tailwindcss.com/plus-assets/img/templates/studio/preview-01.png" class="aspect-[560/380] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="560" height="380" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">Studio</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">Agency template</p></div></a></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5" href="https://tailwindcss.com/plus/templates/salient"><div class="p-2"><img src="https://tailwindcss.com/plus-assets/img/templates/salient/preview-01.png" class="aspect-[560/380] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="560" height="380" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">Salient</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">SaaS marketing template</p></div></a></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5" href="https://tailwindcss.com/plus/templates/protocol"><div class="p-2"><img src="https://tailwindcss.com/plus-assets/img/templates/protocol/preview-01.png" class="aspect-[560/380] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="560" height="380" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">Protocol</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">API reference template</p></div></a></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5" href="https://tailwindcss.com/plus/templates/primer"><div class="p-2"><img src="https://tailwindcss.com/plus-assets/img/templates/primer/preview-01.png" class="aspect-[560/380] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="560" height="380" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">Primer</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">Info product template</p></div></a></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5" href="https://tailwindcss.com/plus/templates/commit"><div class="p-2"><img src="https://tailwindcss.com/plus-assets/img/templates/commit/preview-01.png" class="aspect-[560/380] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="560" height="380" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">Commit</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">Changelog template</p></div></a></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5" href="https://tailwindcss.com/plus/templates/transmit"><div class="p-2"><img src="https://tailwindcss.com/plus-assets/img/templates/transmit/preview-01.png" class="aspect-[560/380] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="560" height="380" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">Transmit</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">Podcast template</p></div></a></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5" href="https://tailwindcss.com/plus/templates/pocket"><div class="p-2"><img src="https://tailwindcss.com/plus-assets/img/templates/pocket/preview-01.png" class="aspect-[560/380] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="560" height="380" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">Pocket</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">App marketing template</p></div></a></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5" href="https://tailwindcss.com/plus/templates/syntax"><div class="p-2"><img src="https://tailwindcss.com/plus-assets/img/templates/syntax/preview-01.png" class="aspect-[560/380] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="560" height="380" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">Syntax</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">Documentation template</p></div></a></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><a class="block transition hover:bg-gray-950/2.5" href="https://tailwindcss.com/plus/templates/keynote"><div class="p-2"><img src="https://tailwindcss.com/plus-assets/img/templates/keynote/preview-01.png" class="aspect-[560/380] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="560" height="380" alt=""/></div><div class="px-4 py-2 sm:px-2"><p class="text-sm/6 font-medium">Keynote</p><p class="font-mono text-xs/6 tracking-wide text-gray-600">Conference template</p></div></a></li></ul></div><div class="line-y mt-4 px-4 py-2 sm:hidden"><a class="gap-2 inline-flex justify-center rounded-full px-4 py-2 text-sm/6 font-semibold bg-gray-950 text-white hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-950" href="/plus/templates">Learn more about templates<svg fill="currentColor" aria-hidden="true" viewBox="0 0 10 10" class="-mr-0.5 w-2.5"><path d="M4.85355 0.146423L9.70711 4.99998L4.85355 9.85353L4.14645 9.14642L7.79289 5.49998H0V4.49998H7.79289L4.14645 0.85353L4.85355 0.146423Z"></path></svg></a></div></section><section class="mt-20 sm:mt-40"><div class="line-y px-4 py-2 sm:px-2"><p class="text-sky-500 font-mono text-[0.8125rem]/6 font-medium tracking-widest text-pretty uppercase min-[105rem]:absolute min-[105rem]:top-0 min-[105rem]:-left-10 min-[105rem]:origin-bottom-right min-[105rem]:-translate-x-full min-[105rem]:-translate-y-full min-[105rem]:-rotate-90 min-[105rem]:pr-2">UI Kit</p><h2 class="max-w-3xl text-3xl font-medium tracking-tight text-pretty md:text-[2.5rem]/14">Meet Catalyst, a professional-grade UI kit for React applications.</h2><p class="mt-4 max-w-2xl text-base/7 text-gray-600">A collection of beautiful, production-ready UI components to drop into your projects alongside your own code — yours to customize, adapt, and make your own.</p></div><div class="relative mt-16 lg:mt-20"><div class="pointer-events-none absolute inset-0 z-10 grid grid-cols-1 gap-2 max-sm:hidden sm:grid-cols-2 sm:gap-x-5 sm:gap-y-10 md:gap-10 lg:grid-cols-3 xl:grid-cols-4"><div class="border-r border-gray-950/5"></div><div class="border-l border-gray-950/5 lg:border-x"></div><div class="border-l border-gray-950/5 max-lg:hidden xl:border-x"></div><div class="border-l border-gray-950/5 max-xl:hidden"></div></div><ul class="max-sm:line-y gap-2 max-sm:flex max-sm:overflow-x-auto sm:grid sm:grid-cols-2 sm:gap-x-5 sm:gap-y-10 md:gap-10 lg:grid-cols-3 xl:grid-cols-4"><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><div class="p-2"><img src="/plus-assets/img/templates/catalyst/components/button.png" class="aspect-[1062/720] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="1416" height="962" alt=""/></div><p class="px-4 py-2 text-sm/6 font-medium sm:px-2">Button</p></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><div class="p-2"><img src="/plus-assets/img/templates/catalyst/components/input.png" class="aspect-[1062/720] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="1416" height="962" alt=""/></div><p class="px-4 py-2 text-sm/6 font-medium sm:px-2">Input</p></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><div class="p-2"><img src="/plus-assets/img/templates/catalyst/components/table.png" class="aspect-[1062/720] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="1416" height="962" alt=""/></div><p class="px-4 py-2 text-sm/6 font-medium sm:px-2">Table</p></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><div class="p-2"><img src="/plus-assets/img/templates/catalyst/components/sidebar.png" class="aspect-[1062/720] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="1416" height="962" alt=""/></div><p class="px-4 py-2 text-sm/6 font-medium sm:px-2">Sidebar</p></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><div class="p-2"><img src="/plus-assets/img/templates/catalyst/components/checkbox.png" class="aspect-[1062/720] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="1416" height="962" alt=""/></div><p class="px-4 py-2 text-sm/6 font-medium sm:px-2">Checkbox</p></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><div class="p-2"><img src="/plus-assets/img/templates/catalyst/components/combobox.png" class="aspect-[1062/720] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="1416" height="962" alt=""/></div><p class="px-4 py-2 text-sm/6 font-medium sm:px-2">Combobox</p></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><div class="p-2"><img src="/plus-assets/img/templates/catalyst/components/radio.png" class="aspect-[1062/720] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="1416" height="962" alt=""/></div><p class="px-4 py-2 text-sm/6 font-medium sm:px-2">Radio groups</p></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><div class="p-2"><img src="/plus-assets/img/templates/catalyst/components/switch.png" class="aspect-[1062/720] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="1416" height="962" alt=""/></div><p class="px-4 py-2 text-sm/6 font-medium sm:px-2">Switch</p></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><div class="p-2"><img src="/plus-assets/img/templates/catalyst/components/description-list.png" class="aspect-[1062/720] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="1416" height="962" alt=""/></div><p class="px-4 py-2 text-sm/6 font-medium sm:px-2">Description list</p></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><div class="p-2"><img src="/plus-assets/img/templates/catalyst/components/badge.png" class="aspect-[1062/720] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="1416" height="962" alt=""/></div><p class="px-4 py-2 text-sm/6 font-medium sm:px-2">Badge</p></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><div class="p-2"><img src="/plus-assets/img/templates/catalyst/components/listbox.png" class="aspect-[1062/720] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="1416" height="962" alt=""/></div><p class="px-4 py-2 text-sm/6 font-medium sm:px-2">Listbox</p></li><li class="sm:max-lg:nth-[2n+1]:line-y lg:max-xl:nth-[3n+1]:line-y xl:nth-[4n+1]:line-y"><div class="p-2"><img src="/plus-assets/img/templates/catalyst/components/pagination.png" class="aspect-[1062/720] rounded-md outline outline-gray-950/10 max-sm:h-48 max-sm:w-auto max-sm:max-w-none sm:w-full sm:rounded-xl lg:rounded-xl" width="1416" height="962" alt=""/></div><p class="px-4 py-2 text-sm/6 font-medium sm:px-2">Pagination</p></li></ul><div class="pointer-events-none absolute inset-x-0 bottom-px z-10 flex h-100 items-end justify-center bg-linear-to-b to-white pb-8 max-sm:hidden"><a class="pointer-events-auto gap-2 inline-flex justify-center rounded-full px-4 py-2 text-sm/6 font-semibold bg-gray-950 text-white hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-950" href="/plus/ui-kit">See more<svg fill="currentColor" aria-hidden="true" viewBox="0 0 10 10" class="-mr-0.5 w-2.5"><path d="M4.85355 0.146423L9.70711 4.99998L4.85355 9.85353L4.14645 9.14642L7.79289 5.49998H0V4.49998H7.79289L4.14645 0.85353L4.85355 0.146423Z"></path></svg></a></div></div><div class="line-y mt-4 px-4 py-2 sm:hidden"><a class="gap-2 inline-flex justify-center rounded-full px-4 py-2 text-sm/6 font-semibold bg-gray-950 text-white hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-950" href="/plus/ui-kit">Learn more about Catalyst<svg fill="currentColor" aria-hidden="true" viewBox="0 0 10 10" class="-mr-0.5 w-2.5"><path d="M4.85355 0.146423L9.70711 4.99998L4.85355 9.85353L4.14645 9.14642L7.79289 5.49998H0V4.49998H7.79289L4.14645 0.85353L4.85355 0.146423Z"></path></svg></a></div></section><div class="mt-50" id="pricing"><div class="flex flex-col gap-5"><div class="xl:line-y max-xl:line-b grid grid-cols-1 gap-y-2 px-4 py-2 sm:px-2"><h2 class="text-violet-500 font-mono text-[0.8125rem]/6 font-medium tracking-widest text-pretty uppercase min-[105rem]:absolute min-[105rem]:top-0 min-[105rem]:-left-10 min-[105rem]:origin-bottom-right min-[105rem]:-translate-x-full min-[105rem]:-translate-y-full min-[105rem]:-rotate-90 min-[105rem]:pr-2">Pricing</h2><p class="text-5xl tracking-tight sm:text-6xl text-pretty">Get everything, forever.</p></div><div class="line-y px-4 py-2 sm:px-2"><p class="max-w-2xl text-sm/7 text-gray-600">Get lifetime access to 500+ components and every template available today, plus any new content we add in the future for a simple one-time price.</p></div></div><div class="line-y mt-10 grid grid-cols-1 gap-x-10 xl:mt-15 xl:grid-cols-2"><div class="grid grid-cols-1 px-4 py-12 sm:px-12 lg:max-xl:grid-cols-2 lg:max-xl:gap-x-12 lg:max-xl:py-16 xl:border-r xl:border-gray-950/5"><div class="flex gap-4 sm:gap-8"><div class="flex flex-col"><svg class="w-20 shrink-0 sm:w-30" aria-hidden="true" fill="none" viewBox="0 0 120 72"><path class="fill-white" d="M56.095 7 8.464 34.5c-.957.553-1.435 1.276-1.435 2v3c0 .724.478 1.448 1.435 2L56.095 69c1.913 1.105 5.015 1.105 6.928 0l47.632-27.5c.956-.552 1.435-1.276 1.435-2v-3c-.001-.724-.479-1.447-1.435-2L63.023 7c-1.913-1.104-5.015-1.104-6.928 0"></path><path stroke="currentColor" stroke-opacity="0.4" d="M112.09 36.5c-.001-.724-.479-1.447-1.435-2L63.023 7c-1.913-1.104-5.015-1.104-6.928 0L8.464 34.5c-.957.553-1.435 1.276-1.435 2m105.061 0c0 .724-.479 1.448-1.435 2L63.023 66c-1.913 1.105-5.015 1.105-6.928 0L8.464 38.5c-.957-.552-1.435-1.276-1.435-2m105.061 0v3c0 .724-.479 1.448-1.435 2L63.023 69c-1.913 1.105-5.015 1.105-6.928 0L8.464 41.5c-.957-.552-1.435-1.276-1.435-2v-3"></path><path fill="currentColor" stroke="currentColor" d="M11.062 37c-.478-.276-.478-.724 0-1L58.694 8.5c.478-.276 1.253-.276 1.732 0l2.598 1.5c.478.276.478.724 0 1L15.392 38.5c-.478.276-1.253.276-1.732 0z" opacity="0.1"></path><g fill="currentColor" stroke="currentColor" opacity="0.1"><path d="M19.723 42c-.479-.276-.479-.724 0-1l47.63-27.5c.48-.276 1.255-.276 1.733 0L89.004 25c.479.276.479.724 0 1l-47.63 27.5c-.48.276-1.255.276-1.733 0z"></path><path d="M34.445 31.5c-.479-.276-.479-.724 0-1L49.167 22c.478-.276 1.254-.276 1.732 0l23.383 13.5c.478.276.478.724 0 1L59.559 45c-.478.276-1.253.276-1.732 0z"></path></g><path fill="currentColor" stroke="currentColor" d="M45.703 57c-.478-.276-.478-.724 0-1l47.632-27.5c.478-.276 1.254-.276 1.732 0l12.99 7.5c.479.276.479.724 0 1L60.426 64.5c-.478.276-1.254.276-1.732 0z" opacity="0.1"></path><g data-lift="true"><path class="fill-white" stroke="currentColor" d="M11.062 32c-.478-.276-.478-.724 0-1L58.694 3.5c.478-.276 1.253-.276 1.732 0L63.024 5c.478.276.478.724 0 1L15.392 33.5c-.478.276-1.253.276-1.732 0z"></path><path class="fill-white" stroke="currentColor" d="M19.723 37c-.479-.276-.479-.724 0-1l47.63-27.5c.48-.276 1.255-.276 1.733 0L89.004 20c.479.276.479.724 0 1l-47.63 27.5c-.48.276-1.255.276-1.733 0z"></path><path stroke="currentColor" stroke-opacity="0.3" d="M37.909 44.5c-.478-.276-.478-.724 0-1l9.526-5.5c.479-.276 1.254-.276 1.732 0l1.732 1c.479.276.479.724 0 1l-9.526 5.5c-.478.276-1.254.276-1.732 0z"></path><path class="fill-white" stroke="currentColor" d="M34.445 26.5c-.479-.276-.479-.724 0-1L49.167 17c.478-.276 1.254-.276 1.732 0l23.383 13.5c.478.276.478.724 0 1L59.559 40c-.478.276-1.253.276-1.732 0z"></path><path stroke="currentColor" stroke-opacity="0.3" d="M56.096 36c-.479-.276-.479-.724 0-1l9.526-5.5c.478-.276 1.254-.276 1.732 0l1.732 1c.478.276.478.724 0 1L59.56 37c-.479.276-1.254.276-1.732 0zM70.818 25.5c-.478-.276-.478-.724 0-1l9.526-5.5c.479-.276 1.254-.276 1.733 0l1.732 1c.478.276.478.724 0 1l-9.527 5.5c-.478.276-1.254.276-1.732 0z"></path><path class="fill-white" stroke="currentColor" d="M45.703 52c-.478-.276-.478-.724 0-1l47.632-27.5c.478-.276 1.254-.276 1.732 0l12.99 7.5c.479.276.479.724 0 1L60.426 59.5c-.478.276-1.254.276-1.732 0z"></path><path stroke="currentColor" stroke-opacity="0.3" d="M93.335 34.5c-.478-.276-.478-.724 0-1l6.062-3.5c.478-.276 1.254-.276 1.732 0l1.732 1c.478.276.478.724 0 1l-6.062 3.5c-.478.276-1.254.276-1.732 0zM77.746 43.5c-.478-.276-.478-.724 0-1L89.004 36c.478-.276 1.254-.276 1.732 0l1.732 1c.479.276.479.724 0 1L81.21 44.5c-.478.276-1.254.276-1.732 0z"></path></g></svg><div class="-my-2 grid h-full w-full flex-1 grid-cols-[1px_1fr_1px_1fr_1px] grid-rows-[1.25rem_1.25rem_1.25rem_auto_1.25rem] px-3 sm:-my-4 sm:px-4 lg:max-xl:hidden"><div class="col-start-1 row-span-3 row-start-1 border-r border-gray-950/10"></div><div class="col-start-3 row-start-2 border-r border-gray-950/10"></div><div class="col-start-4 row-span-3 row-start-1 border-r border-gray-950/10"></div><div class="col-start-1 row-span-2 row-start-4 border-r border-dashed border-gray-950/10"></div><div class="col-start-3 row-span-2 row-start-3 border-r border-dashed border-gray-950/10"></div><div class="col-start-4 row-span-2 row-start-4 border-r border-dashed border-gray-950/10"></div></div></div><div class="pb-10"><p class="text-indigo-600 font-mono text-[0.8125rem]/6 font-medium tracking-widest text-pretty uppercase">UI Blocks</p><p class="mt-2 max-w-xl text-sm/8 text-gray-600">Over 500+ professionally designed, fully responsive, expertly crafted component examples you can drop into your Tailwind projects and customize to your heart’s content.</p></div></div><div class="flex gap-4 sm:gap-8"><div class="flex flex-col"><svg class="w-20 shrink-0 sm:w-30" aria-hidden="true" fill="none" viewBox="0 0 120 72"><g data-lift="true"><path shape-rendering="geometricPrecision" fill="white" d="M56.066 6 8.435 33.5C7.478 34.053 7 34.776 7 35.5v3c0 .724.478 1.448 1.435 2L56.066 68c1.913 1.105 5.015 1.105 6.929 0l47.631-27.5c.957-.552 1.435-1.276 1.435-2v-3c0-.724-.479-1.447-1.435-2L62.995 6c-1.914-1.104-5.015-1.104-6.929 0"></path><path shape-rendering="geometricPrecision" stroke="currentColor" d="M112.09 35.496c-.001-.723-.479-1.447-1.435-2l-47.632-27.5c-1.913-1.104-5.015-1.104-6.928 0l-47.631 27.5c-.957.553-1.435 1.277-1.435 2m105.061 0c0 .724-.479 1.448-1.435 2l-47.632 27.5c-1.913 1.105-5.015 1.105-6.928 0l-47.631-27.5c-.957-.552-1.435-1.276-1.435-2m105.061 0v3c0 .724-.479 1.448-1.435 2l-47.632 27.5c-1.913 1.105-5.015 1.105-6.928 0l-47.631-27.5c-.957-.552-1.435-1.276-1.435-2v-3"></path><path shape-rendering="geometricPrecision" stroke="currentColor" stroke-opacity="0.3" d="M11.062 35.996c-.478-.276-.478-.724 0-1l47.632-27.5c.478-.276 1.253-.276 1.732 0l30.31 17.5c.479.277.479.724 0 1l-47.63 27.5c-.479.276-1.255.276-1.733 0zM45.703 55.996c-.478-.276-.478-.724 0-1l47.632-27.5c.478-.276 1.254-.276 1.732 0l12.99 7.5c.479.276.479.724 0 1l-47.631 27.5c-.478.276-1.254.276-1.732 0z"></path><circle shape-rendering="geometricPrecision" cx="1.5" cy="1.5" r="1.5" fill="currentColor" transform="matrix(.86603 -.5 .86603 .5 16.258 35.496)"></circle><path shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" d="m22.32 33.496 3.464-2M56.961 13.496l3.465-2M49.168 17.996l4.33-2.5M42.24 21.996l3.463-2"></path><path stroke="currentColor" stroke-linecap="round" stroke-opacity="0.3" d="m41.373 38.496 23.383-13.5"></path><path shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" d="m53.498 55.496 6.928-4M69.086 46.496l6.928-4M84.674 37.496l6.929-4"></path><path shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round" stroke-opacity="0.3" d="m56.096 56.996 9.526-5.5M71.684 47.996l9.526-5.5M87.273 38.996l9.526-5.5M58.693 58.496l8.66-5M74.282 49.496l8.66-5M89.87 40.496l8.66-5M46.57 38.496l18.186-10.5"></path><rect shape-rendering="geometricPrecision" width="28" height="2" fill="currentColor" rx="0.5" transform="matrix(.86603 -.5 .86603 .5 33.579 34.496)"></rect><rect shape-rendering="geometricPrecision" width="32" height="2" fill="currentColor" rx="0.5" transform="matrix(.86603 -.5 .86603 .5 35.311 37.496)"></rect><rect shape-rendering="geometricPrecision" width="10" height="3" fill="currentColor" rx="1.5" transform="matrix(.86603 -.5 .86603 .5 48.301 39.996)"></rect><rect shape-rendering="geometricPrecision" width="10" height="3" fill="currentColor" fill-opacity="0.3" rx="1.5" transform="matrix(.86603 -.5 .86603 .5 58.693 33.996)"></rect></g></svg><div class="-my-2 grid h-full w-full flex-1 grid-cols-[1px_1fr_1px_1fr_1px] grid-rows-[1.25rem_1.25rem_1.25rem_auto_1.25rem] px-3 sm:-my-4 sm:px-4 lg:max-xl:hidden"><div class="col-start-1 row-span-3 row-start-1 border-r border-gray-950/10"></div><div class="col-start-3 row-start-2 border-r border-gray-950/10"></div><div class="col-start-4 row-span-3 row-start-1 border-r border-gray-950/10"></div><div class="col-start-1 row-span-2 row-start-4 border-r border-dashed border-gray-950/10"></div><div class="col-start-3 row-span-2 row-start-3 border-r border-dashed border-gray-950/10"></div><div class="col-start-4 row-span-2 row-start-4 border-r border-dashed border-gray-950/10"></div></div></div><div class="pb-10"><p class="text-sky-500 font-mono text-[0.8125rem]/6 font-medium tracking-widest text-pretty uppercase">Templates</p><p class="mt-2 max-w-xl text-sm/8 text-gray-600">Visually-stunning, easy to customize templates built with React and Next.js. The ultimate resource for learning how experts build websites with Tailwind CSS.</p></div></div><div class="flex gap-4 sm:gap-8"><div class="flex flex-col"><svg class="w-20 shrink-0 sm:w-30" aria-hidden="true" fill="none" viewBox="0 0 120 72"><path class="fill-white" d="M56.095 6 8.464 33.5c-.957.553-1.435 1.276-1.435 2v3c0 .724.478 1.448 1.435 2L56.095 68c1.913 1.105 5.015 1.105 6.928 0l47.632-27.5c.956-.552 1.435-1.276 1.435-2v-3c-.001-.724-.479-1.447-1.435-2L63.023 6c-1.913-1.104-5.015-1.104-6.928 0"></path><g stroke="currentColor" opacity="0.1"><path fill="currentColor" d="M60.425 52.5c-.478-.276-.478-.724 0-1L87.272 36c.478-.276 1.254-.276 1.732 0l1.732 1c.478.276.478.724 0 1L63.89 53.5c-.478.276-1.253.276-1.732 0zM54.363 49c-.956-.552-.956-1.448 0-2l3.464-2c.957-.552 2.508-.552 3.464 0 .957.552.957 1.448 0 2l-3.464 2c-.956.552-2.507.552-3.464 0Z"></path><path stroke-linecap="round" d="m63.89 43.5 12.124-7"></path><path fill="currentColor" d="M46.57 44.5c-.48-.276-.48-.724 0-1L73.415 28c.478-.276 1.254-.276 1.732 0l1.732 1c.478.276.478.724 0 1L50.033 45.5c-.478.276-1.254.276-1.732 0z"></path><path stroke-linecap="round" d="m43.105 42.5 10.392-6"></path><path fill="currentColor" d="M37.043 39c-.478-.276-.478-.724 0-1L63.89 22.5c.478-.276 1.253-.276 1.732 0l1.732 1c.478.276.478.724 0 1L40.507 40c-.478.276-1.254.276-1.732 0z"></path><path stroke-linecap="round" d="m33.579 37 10.392-6"></path></g><path stroke="currentColor" stroke-opacity="0.4" d="M112.09 35.5c-.001-.724-.479-1.447-1.435-2L63.023 6c-1.913-1.104-5.015-1.104-6.928 0L8.464 33.5c-.957.553-1.435 1.276-1.435 2m105.061 0c0 .724-.479 1.448-1.435 2L63.023 65c-1.913 1.105-5.015 1.105-6.928 0L8.464 37.5c-.957-.552-1.435-1.276-1.435-2m105.061 0v3c0 .724-.479 1.448-1.435 2L63.023 68c-1.913 1.105-5.015 1.105-6.928 0L8.464 40.5c-.957-.552-1.435-1.276-1.435-2v-3"></path><path stroke="currentColor" stroke-opacity="0.4" d="M17.99 40c-.478-.276-.478-.724 0-1l47.632-27.5c.478-.276 1.254-.276 1.732 0L108.057 35c.478.276.478.724 0 1L60.426 63.5c-.479.276-1.254.276-1.732 0z"></path><path fill="currentColor" stroke="currentColor" d="M11.062 36c-.478-.276-.478-.724 0-1L58.694 7.5c.478-.276 1.253-.276 1.732 0L63.024 9c.478.276.478.724 0 1L15.392 37.5c-.478.276-1.253.276-1.732 0z" opacity="0.1"></path><g data-lift="true"><path class="fill-current" fill-opacity="0.3" stroke="currentColor" d="M60.425 47.5c-.478-.276-.478-.724 0-1L87.272 31c.478-.276 1.254-.276 1.732 0l1.732 1c.478.276.478.724 0 1L63.89 48.5c-.478.276-1.253.276-1.732 0zM54.363 44c-.956-.552-.956-1.448 0-2l3.464-2c.957-.552 2.508-.552 3.464 0 .957.552.957 1.448 0 2l-3.464 2c-.956.552-2.507.552-3.464 0Z"></path><circle cx="2" cy="2" r="2" class="fill-white" stroke="currentColor" transform="matrix(.86603 -.5 .86603 .5 56.095 41)"></circle><path stroke="currentColor" stroke-linecap="round" d="m63.89 38.5 12.124-7"></path><path class="fill-white" stroke="currentColor" d="M46.57 39.5c-.48-.276-.48-.724 0-1L73.415 23c.478-.276 1.254-.276 1.732 0l1.732 1c.478.276.478.724 0 1L50.033 40.5c-.478.276-1.254.276-1.732 0z"></path><path stroke="currentColor" stroke-linecap="round" d="m43.105 37.5 10.392-6"></path><path class="fill-white" stroke="currentColor" d="M37.043 34c-.478-.276-.478-.724 0-1L63.89 17.5c.478-.276 1.253-.276 1.732 0l1.732 1c.478.276.478.724 0 1L40.507 35c-.478.276-1.254.276-1.732 0z"></path><path stroke="currentColor" stroke-linecap="round" d="m33.579 32 10.392-6"></path><path class="fill-white" stroke="currentColor" d="M11.062 31c-.478-.276-.478-.724 0-1L58.694 2.5c.478-.276 1.253-.276 1.732 0L63.024 4c.478.276.478.724 0 1L15.392 32.5c-.478.276-1.253.276-1.732 0z"></path></g></svg><div class="-my-2 grid h-full w-full flex-1 grid-cols-[1px_1fr_1px_1fr_1px] grid-rows-[1.25rem_1.25rem_1.25rem_auto_1.25rem] px-3 sm:-my-4 sm:px-4 lg:max-xl:hidden"><div class="col-start-1 row-span-3 row-start-1 border-r border-gray-950/10"></div><div class="col-start-3 row-start-2 border-r border-gray-950/10"></div><div class="col-start-4 row-span-3 row-start-1 border-r border-gray-950/10"></div><div class="col-start-1 row-span-2 row-start-4 border-r border-dashed border-gray-950/10"></div><div class="col-start-3 row-span-2 row-start-3 border-r border-dashed border-gray-950/10"></div><div class="col-start-4 row-span-2 row-start-4 border-r border-dashed border-gray-950/10"></div></div></div><div class="pb-10 lg:max-xl:pb-0"><p class="text-pink-500 font-mono text-[0.8125rem]/6 font-medium tracking-widest text-pretty uppercase">UI Kit</p><p class="mt-2 max-w-xl text-sm/8 text-gray-600">A React starter kit built with Tailwind CSS which includes a collection of beautiful, production-ready UI components that are yours to customize and adapt for your own component system.</p></div></div><div class="flex gap-4 sm:gap-8"><div class="flex flex-col"><svg class="w-20 shrink-0 sm:w-30" aria-hidden="true" fill="none" viewBox="0 0 120 72"><path fill="currentColor" d="M59.659 4.672c-1.19 0-2.352.263-3.214.761l-47.632 27.5c-.865.5-1.185 1.085-1.185 1.567 0 .483.32 1.068 1.185 1.567l47.632 27.5c.862.498 2.025.762 3.214.762 1.19 0 2.351-.264 3.214-.762l47.631-27.5c.866-.5 1.185-1.084 1.185-1.567 0-.482-.319-1.067-1.185-1.567l-47.631-27.5c-.863-.498-2.025-.761-3.214-.761Zm53.03 29.828c0-.965-.637-1.828-1.685-2.433l-47.631-27.5c-1.05-.606-2.396-.895-3.714-.895s-2.664.289-3.714.895l-47.632 27.5c-1.047.605-1.685 1.468-1.685 2.433v3c0 .966.638 1.828 1.685 2.433l47.632 27.5c1.05.607 2.395.896 3.714.896 1.318 0 2.663-.29 3.714-.896l47.631-27.5c1.048-.605 1.685-1.467 1.685-2.433v-3Zm-1 1.951a4.434 4.434 0 0 1-.685.482l-47.631 27.5c-1.05.607-2.396.896-3.714.896s-2.664-.29-3.714-.896l-47.632-27.5a4.471 4.471 0 0 1-.685-.482v1.05c0 .482.32 1.067 1.185 1.566l47.632 27.5c.862.498 2.024.762 3.214.762 1.189 0 2.351-.264 3.214-.762l47.631-27.5c.866-.5 1.185-1.084 1.185-1.567v-1.049Z" clip-rule="evenodd" fill-rule="evenodd"></path><path fill="currentColor" d="M15.925 38.25c-.718-.414-.718-1.086 0-1.5l47.63-27.5c.718-.414 1.882-.414 2.599 0l42.435 24.5c.718.414.718 1.086 0 1.5l-47.631 27.5c-.718.414-1.88.414-2.598 0l-42.435-24.5Zm.866-1c-.24.138-.24.362 0 .5l.433.25 46.332-26.75c.717-.414 1.88-.414 2.598 0L107.29 35l.433-.25c.239-.138.239-.362 0-.5L65.288 9.75a.957.957 0 0 0-.866 0L16.79 37.25Zm89.633-1.75L65.288 11.75a.957.957 0 0 0-.866 0L18.09 38.5l41.136 23.75c.239.138.627.138.866 0l46.332-26.75Z" clip-rule="evenodd" fill-rule="evenodd"></path><path fill="currentColor" opacity=".3" d="M12.894 32.94c-.406 0-.784.09-1.05.243-.26.15-.286.281-.287.314v.005c0 .035.027.164.288.315.264.153.643.244 1.049.244.405 0 .784-.091 1.049-.244.261-.15.287-.28.288-.315v-.005c-.001-.033-.027-.163-.288-.314-.265-.153-.644-.243-1.05-.243Zm2.337.571v-.024c-.006-.508-.342-.913-.788-1.17-.453-.261-1.015-.378-1.55-.378-.534 0-1.096.117-1.548.378-.446.258-.782.663-.788 1.17v1.032c.008.505.343.908.788 1.164.452.261 1.014.378 1.549.378.534 0 1.096-.117 1.549-.378.45-.26.788-.67.788-1.183v-.989ZM17.224 30.44c-.406 0-.785.09-1.05.243-.263.152-.287.283-.287.315v.003c0 .033.024.164.288.316.264.153.643.244 1.049.244.405 0 .784-.091 1.049-.244.267-.154.288-.287.288-.317 0-.03-.02-.162-.288-.317-.265-.153-.644-.244-1.05-.244Zm-2.338.567v-.015c.004-.51.341-.917.789-1.175.452-.261 1.014-.378 1.549-.378.534 0 1.096.117 1.549.378.45.26.788.67.788 1.183v1.006c-.003.51-.34.918-.788 1.177-.453.261-1.015.378-1.55.378-.534 0-1.096-.117-1.548-.378-.449-.259-.786-.667-.789-1.177v-.999ZM21.554 27.94c-.406 0-.784.09-1.05.243-.267.155-.287.287-.287.317 0 .03.02.163.288.317.265.153.643.244 1.049.244.405 0 .784-.091 1.049-.244.267-.154.288-.287.288-.317 0-.03-.02-.162-.288-.317-.265-.153-.644-.244-1.05-.244Zm2.337.56c0-.513-.338-.923-.788-1.183-.453-.261-1.015-.378-1.55-.378-.534 0-1.096.117-1.548.378-.45.26-.788.67-.788 1.183v1c0 .513.338.923.788 1.183.452.261 1.014.378 1.549.378.534 0 1.096-.117 1.549-.378.45-.26.788-.67.788-1.183v-1Z" clip-rule="evenodd" fill-rule="evenodd"></path><path fill="currentColor" opacity=".3" d="M28.915 39.75c-.24-.138-.24-.362 0-.5l6.062-3.5a.957.957 0 0 1 .866 0l.866.5c.24.138.24.362 0 .5l-6.062 3.5a.957.957 0 0 1-.866 0l-.866-.5ZM46.235 49.75c-.239-.138-.239-.362 0-.5l6.062-3.5a.957.957 0 0 1 .867 0l.865.5c.24.138.24.362 0 .5l-6.062 3.5a.957.957 0 0 1-.866 0l-.866-.5ZM23.719 38.75c-.24-.138-.24-.362 0-.5l6.062-3.5a.957.957 0 0 1 .866 0l.866.5c.239.138.239.362 0 .5l-6.062 3.5a.957.957 0 0 1-.866 0l-.866-.5ZM37.575 34.75c-.239-.138-.239-.362 0-.5l3.464-2a.957.957 0 0 1 .866 0l.866.5c.24.138.24.362 0 .5l-3.464 2a.957.957 0 0 1-.866 0l-.866-.5ZM54.896 44.75c-.24-.138-.24-.362 0-.5l3.464-2a.957.957 0 0 1 .866 0l.866.5c.239.138.239.362 0 .5l-3.464 2a.957.957 0 0 1-.866 0l-.866-.5ZM34.111 40.75c-.24-.138-.24-.362 0-.5l5.196-3a.957.957 0 0 1 .866 0l.866.5c.24.138.24.362 0 .5l-5.196 3a.957.957 0 0 1-.866 0l-.866-.5ZM51.431 50.75c-.239-.138-.239-.362 0-.5l5.197-3a.957.957 0 0 1 .866 0l.866.5c.239.138.239.362 0 .5l-5.196 3a.957.957 0 0 1-.866 0l-.867-.5ZM39.307 41.75c-.24-.138-.24-.362 0-.5l2.598-1.5a.957.957 0 0 1 .866 0l.866.5c.24.138.24.362 0 .5l-2.598 1.5a.957.957 0 0 1-.866 0l-.866-.5ZM58.36 54.75c-.24-.138-.24-.362 0-.5l2.598-1.5a.957.957 0 0 1 .866 0l.866.5c.239.138.239.362 0 .5l-2.598 1.5a.957.957 0 0 1-.866 0l-.866-.5ZM56.628 51.75c-.24-.138-.24-.362 0-.5l2.598-1.5a.957.957 0 0 1 .866 0l.866.5c.239.138.239.362 0 .5l-2.598 1.5a.957.957 0 0 1-.866 0l-.866-.5ZM41.04 44.75c-.24-.138-.24-.362 0-.5l2.597-1.5a.957.957 0 0 1 .866 0l.866.5c.24.138.24.362 0 .5l-2.598 1.5a.957.957 0 0 1-.866 0l-.866-.5ZM60.092 57.75c-.24-.138-.24-.362 0-.5l2.598-1.5a.957.957 0 0 1 .866 0l.866.5c.239.138.239.362 0 .5l-2.598 1.5a.957.957 0 0 1-.866 0l-.866-.5ZM42.771 47.75c-.239-.138-.239-.362 0-.5l2.598-1.5a.957.957 0 0 1 .866 0l.866.5c.24.138.24.362 0 .5l-2.598 1.5a.957.957 0 0 1-.866 0l-.866-.5ZM43.637 31.25c-.239-.138-.239-.362 0-.5l5.197-3a.957.957 0 0 1 .865 0l.867.5c.239.138.239.362 0 .5l-5.197 3a.957.957 0 0 1-.866 0l-.866-.5ZM60.958 41.25c-.24-.138-.24-.362 0-.5l3.464-2a.957.957 0 0 1 .866 0l.866.5c.239.138.239.362 0 .5l-3.464 2a.957.957 0 0 1-.866 0l-.866-.5ZM41.905 36.25c-.239-.138-.239-.362 0-.5l4.33-2.5a.957.957 0 0 1 .866 0l.866.5c.24.138.24.362 0 .5l-4.33 2.5a.957.957 0 0 1-.866 0l-.866-.5ZM59.226 46.25c-.24-.138-.24-.362 0-.5l4.33-2.5a.957.957 0 0 1 .866 0l.866.5c.24.138.24.362 0 .5l-4.33 2.5a.957.957 0 0 1-.866 0l-.866-.5ZM44.503 38.75c-.239-.138-.239-.362 0-.5l6.928-4a.957.957 0 0 1 .867 0l.866.5c.239.138.239.362 0 .5l-6.929 4a.957.957 0 0 1-.866 0l-.866-.5ZM61.824 48.75c-.24-.138-.24-.362 0-.5l6.928-4a.957.957 0 0 1 .866 0l.866.5c.24.138.24.362 0 .5l-6.928 4a.957.957 0 0 1-.866 0l-.866-.5ZM48.833 32.25c-.239-.138-.239-.362 0-.5l2.599-1.5a.957.957 0 0 1 .865 0l.867.5c.239.138.239.362 0 .5l-2.599 1.5a.957.957 0 0 1-.866 0l-.866-.5ZM66.154 42.25c-.24-.138-.24-.362 0-.5l9.526-5.5a.957.957 0 0 1 .866 0l.866.5c.24.138.24.362 0 .5l-9.526 5.5a.957.957 0 0 1-.866 0l-.866-.5ZM54.03 33.25c-.24-.138-.24-.362 0-.5l5.196-3a.957.957 0 0 1 .866 0l.866.5c.239.138.239.362 0 .5l-5.197 3a.957.957 0 0 1-.866 0l-.866-.5ZM71.35 43.25c-.24-.138-.24-.362 0-.5l5.196-3a.957.957 0 0 1 .866 0l.866.5c.24.138.24.362 0 .5l-5.196 3a.957.957 0 0 1-.866 0l-.866-.5ZM61.824 28.75c-.24-.138-.24-.362 0-.5l7.794-4.5a.957.957 0 0 1 .866 0l.866.5c.24.138.24.362 0 .5l-7.794 4.5a.957.957 0 0 1-.866 0l-.866-.5ZM79.144 38.75c-.239-.138-.239-.362 0-.5l7.794-4.5a.957.957 0 0 1 .866 0l.867.5c.239.138.239.362 0 .5l-7.795 4.5a.957.957 0 0 1-.866 0l-.866-.5Z"></path><path fill="currentColor" opacity=".3" d="M69.109 21.75c.214-.123.551-.138.795-.035l8.662 3.664c3.21 1.358 7.569 1.369 10.797.026l4.07-1.692c.243-.101.578-.086.79.037.213.123.24.316.065.457l-2.931 2.35c-2.325 1.863-2.307 4.38.044 6.233l6.348 5.001c.178.14.153.336-.061.459s-.551.138-.795.035l-8.662-3.664c-3.21-1.358-7.569-1.369-10.797-.026l-4.07 1.692c-.244.101-.579.086-.79-.037-.213-.123-.24-.316-.065-.457l2.93-2.35c2.326-1.863 2.308-4.38-.044-6.233l-6.347-5.001c-.178-.14-.153-.336.061-.459Z" clip-rule="evenodd" fill-rule="evenodd"></path><path fill="white" d="M97.255 29 90.909 24c-.72-.567-1.235-1.193-1.544-1.844.302-.636.801-1.248 1.496-1.805L93.791 18v-3l-4.07 1.692c-3.443 1.432-8.093 1.421-11.516-.027L69.543 13v3l6.347 5.001c.72.567 1.235 1.193 1.544 1.844-.302.636-.801 1.248-1.496 1.806L73.007 27v3l4.07-1.693c3.443-1.432 8.093-1.42 11.516.027L97.255 32v-3Z"></path><path fill="currentColor" d="M69.267 12.583a.5.5 0 0 1 .47-.043l8.663 3.664c3.3 1.396 7.81 1.407 11.13.026l4.07-1.692a.5.5 0 0 1 .692.462v3a.5.5 0 0 1-.188.39l-2.93 2.35c-.565.452-.976.932-1.247 1.415.278.497.704.989 1.29 1.451l6.348 5.001a.5.5 0 0 1 .19.393v3a.5.5 0 0 1-.694.46l-8.662-3.664c-3.3-1.396-7.81-1.407-11.13-.026l-4.07 1.692a.5.5 0 0 1-.692-.462v-3a.5.5 0 0 1 .187-.39l2.931-2.35c.564-.452.975-.932 1.247-1.415-.279-.496-.704-.989-1.291-1.451l-6.348-5.001a.5.5 0 0 1-.19-.393v-3a.5.5 0 0 1 .224-.417Zm8 9.07c.083-.733-.126-1.48-.64-2.192a5.397 5.397 0 0 0-1.046-1.067l-5.538-4.363v1.726l6.156 4.851a6.6 6.6 0 0 1 1.069 1.046Zm-4.491-6.742 5.234 2.214c3.548 1.501 8.337 1.512 11.904.029l.814-.338-.18.143c-1.041.835-1.709 1.817-1.942 2.865-.19.856-.084 1.725.306 2.546.349.733.918 1.416 1.687 2.022l3.424 2.698-5.234-2.215c-3.548-1.5-8.337-1.512-11.904-.029l-.814.339.18-.144c.742-.596 1.294-1.265 1.635-1.981.66-1.387.494-2.878-.45-4.184a6.394 6.394 0 0 0-1.236-1.268l-3.424-2.697Zm.731 12.423 3.761-1.564c3.321-1.381 7.831-1.37 11.13.026l8.358 3.535v1.915l-7.968-3.371c-3.547-1.5-8.336-1.512-11.904-.029l-3.377 1.405v-1.917Zm19.785-11.292-2.118 1.698c-.91.729-1.42 1.526-1.592 2.301a2.8 2.8 0 0 0-.051.923c.283-.353.623-.689 1.017-1.005l2.743-2.199v-1.718Z" clip-rule="evenodd" fill-rule="evenodd"></path><path fill="white" d="m63.48 24.5-3.206-2.229a3.603 3.603 0 0 1-.385-.307c.068-.062.14-.123.216-.183l1.643-1.28v-3l-2.218.948c-1.814.775-4.31.735-6.046-.098l-3.86-1.85v3l3.206 2.228c.142.098.27.2.385.307-.067.062-.14.123-.216.183L51.356 23.5v3l2.219-.948c1.813-.776 4.31-.735 6.045.097l3.86 1.851v-3Z"></path><path fill="currentColor" d="M49.358 16.077a.5.5 0 0 1 .482-.028L53.7 17.9c1.603.769 3.949.81 5.633.089l2.219-.949a.5.5 0 0 1 .697.46v3a.5.5 0 0 1-.193.394l-1.36 1.061 3.07 2.135a.5.5 0 0 1 .215.41v3a.5.5 0 0 1-.717.45l-3.86-1.85c-1.602-.769-3.948-.809-5.633-.089l-2.218.949a.5.5 0 0 1-.697-.46v-3a.5.5 0 0 1 .193-.394l1.36-1.061-3.07-2.134a.5.5 0 0 1-.215-.411v-3a.5.5 0 0 1 .234-.423Zm2.498 7.753v1.913l1.522-.651c1.943-.83 4.59-.79 6.458.106l3.145 1.508v-1.891L59.404 23.1c-1.602-.769-3.948-.809-5.633-.089l-1.915.82Zm7.321-1.902c-1.577-.548-3.524-.575-5.142-.076.324-.476.474-1.007.412-1.557a2.434 2.434 0 0 0-.52-1.223c1.578.548 3.525.576 5.142.076a2.348 2.348 0 0 0-.42 1.182c-.037.572.156 1.118.528 1.598Zm2.072-3.404-.836.651c-.525.41-.743.841-.767 1.218-.017.276.066.579.292.884l1.31-1.021v-1.732Zm-11.125-1.068 2.421 1.683c.6.418.864.872.909 1.269.033.293-.047.617-.29.944a2.957 2.957 0 0 0-.048-.034l-2.992-2.08v-1.782Z" clip-rule="evenodd" fill-rule="evenodd"></path><path fill="currentColor" opacity=".3" d="M49.19 25.25c.224-.13.581-.139.825-.022l3.86 1.851c1.519.729 3.703.764 5.29.085l2.218-.948c.244-.104.583-.09.798.034.214.124.24.32.059.46l-1.643 1.281c-1.175.916-1.114 2.178.148 3.054l3.206 2.23c.202.14.186.346-.038.475-.224.13-.581.139-.824.022l-3.86-1.851c-1.52-.729-3.704-.764-5.29-.085l-2.22.948c-.243.104-.582.09-.797-.034-.214-.124-.24-.32-.059-.46l1.643-1.281c1.175-.916 1.114-2.178-.147-3.054l-3.207-2.23c-.202-.14-.185-.346.038-.475ZM63.047 39.25c.222-.129.578-.139.821-.023l5.589 2.646c1.53.725 3.72.75 5.3.062l3.942-1.717c.244-.106.586-.093.802.032.216.125.24.322.056.463l-2.975 2.276c-1.192.912-1.148 2.177.108 3.06l4.584 3.227c.2.14.182.345-.04.474-.223.129-.579.139-.822.023l-5.588-2.646c-1.53-.725-3.721-.75-5.301-.062l-3.942 1.717c-.244.106-.586.093-.802-.032-.216-.125-.24-.322-.056-.463l2.975-2.276c1.192-.912 1.148-2.177-.107-3.06l-4.585-3.227c-.2-.14-.182-.345.04-.474Z" clip-rule="evenodd" fill-rule="evenodd"></path><path fill="white" d="m80.801 40.5-4.584-3.226a3.58 3.58 0 0 1-.366-.294c.075-.07.156-.138.243-.204l2.975-2.276v-3l-3.942 1.718c-1.806.786-4.31.757-6.058-.071L63.48 30.5v3l4.584 3.227c.135.094.257.192.367.293-.076.07-.157.138-.243.204L65.213 39.5v3l3.941-1.718c1.806-.786 4.31-.757 6.058.071l5.589 2.647v-3Z"></path><path fill="currentColor" d="M63.213 30.078a.5.5 0 0 1 .482-.03l5.588 2.647c1.616.765 3.969.794 5.644.064l3.942-1.717a.5.5 0 0 1 .7.458v3a.5.5 0 0 1-.196.397l-2.714 2.076 4.43 3.118a.5.5 0 0 1 .212.41v3a.5.5 0 0 1-.714.45l-5.588-2.646c-1.616-.765-3.969-.794-5.645-.064l-3.942 1.717a.5.5 0 0 1-.7-.458v-3a.5.5 0 0 1 .197-.397l2.714-2.076-4.43-3.118a.5.5 0 0 1-.212-.409v-3a.5.5 0 0 1 .232-.422Zm5.166 6.259c.242-.326.322-.648.29-.939-.041-.394-.3-.846-.892-1.263l-3.796-2.672v1.778l4.372 3.077.026.019Zm.136-2.9.34.162c1.882.891 4.537.92 6.472.077l.221-.096c-.554.498-.891 1.098-.937 1.748-.053.746.284 1.45.901 2.02.08.073.165.145.254.214l-.328-.155-.011-.005c-1.882-.892-4.537-.921-6.472-.078l-.22.096.035-.032c.642-.592.977-1.326.894-2.096-.076-.705-.491-1.344-1.148-1.854Zm-2.802 6.39 3.642-1.586c1.675-.73 4.028-.701 5.644.064l.011.006 5.291 2.505v1.894l-4.874-2.309c-1.882-.89-4.537-.92-6.472-.077l-3.242 1.413v-1.91Zm12.856-7.315-2.171 1.661c-.538.411-.763.847-.79 1.226-.02.279.064.586.293.895l2.668-2.041v-1.74Z" clip-rule="evenodd" fill-rule="evenodd"></path></svg></div><div class=""><p class="text-violet-500 font-mono text-[0.8125rem]/6 font-medium tracking-widest text-pretty uppercase">Private Community</p><p class="mt-2 max-w-xl text-sm/8 text-gray-600">Join an exclusive members-only Discord where you can connect with other designers and developers, get support, and even chat directly with the team at Tailwind Labs.</p></div></div></div><div class="grid grid-cols-1 gap-2 lg:max-xl:grid-cols-2 bg-gray-950/5 py-[calc(--spacing(2)+1px)] max-xl:-mx-px max-xl:px-[calc(--spacing(2)+1px)] xl:-mr-px xl:border-l xl:border-gray-950/5 xl:pr-[calc(--spacing(2)+1px)] xl:pl-2"><div class="flex items-center rounded-2xl bg-white p-6 sm:rounded-4xl sm:p-10"><div><p class="font-mono text-[0.8125rem]/6 font-medium tracking-widest text-pretty uppercase text-gray-600">Personal</p><p class="mt-2 text-base/6">For individuals working on their next big idea.</p><div class="mt-6"><div class="flex flex-wrap items-center justify-between gap-6"><div class="flex items-center gap-x-4"><p class="text-6xl font-light *:font-medium">$<span>299</span></p><div><p class="text-sm/6 font-semibold">one time payment</p><p class="text-sm/6 text-gray-600">plus local taxes</p></div></div><a class="inline-flex justify-center rounded-full px-4 py-2 text-sm/6 font-semibold bg-gray-950 text-white hover:bg-gray-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-950" aria-label="Get a Tailwind Plus Personal license for $299" href="https://tailwindcss.com/plus/checkout/aa651062-caee-4517-b83a-d2aed4cd00cc">Get Tailwind Plus</a></div></div><div class="mt-10 flex gap-4 text-sm/7 text-gray-600"><svg aria-hidden="true" viewBox="0 0 48 48" fill="none" class="size-12 shrink-0 fill-gray-950"><path d="M9 24C9 32.2843 15.7157 39 24 39C32.2843 39 39 32.2843 39 24C39 15.7157 32.2843 9 24 9C15.7157 9 9 15.7157 9 24ZM24 8C15.1634 8 8 15.1634 8 24C8 32.8366 15.1634 40 24 40C32.8366 40 40 32.8366 40 24C40 15.1634 32.8366 8 24 8Z" clip-rule="evenodd" fill-rule="evenodd"></path><path opacity="0.1" d="M12 24C12 30.6274 17.3726 36 24 36C30.6274 36 36 30.6274 36 24C36 17.3726 30.6274 12 24 12C17.3726 12 12 17.3726 12 24ZM24 11C16.8203 11 11 16.8203 11 24C11 31.1797 16.8203 37 24 37C31.1797 37 37 31.1797 37 24C37 16.8203 31.1797 11 24 11Z" clip-rule="evenodd" fill-rule="evenodd"></path><path opacity="0.1" d="M7 1L7 -4.37114e-08L8 0L8 1L7 1ZM7 5L7 3L8 3L8 5L7 5ZM7 9L7 7L8 7L8 9L7 9ZM7 13L7 11L8 11L8 13L7 13ZM7 17L7 15L8 15L8 17L7 17ZM7 21L7 19L8 19L8 21L7 21ZM7 25L7 23L8 23L8 25L7 25ZM7 29L7 27L8 27L8 29L7 29ZM7 33L7 31L8 31L8 33L7 33ZM7 37L7 35L8 35L8 37L7 37ZM7 41L7 39L8 39L8 41L7 41ZM7 45L7 43L8 43L8 45L7 45ZM7 48L7 47L8 47L8 48L7 48Z" clip-rule="evenodd" fill-rule="evenodd"></path><path opacity="0.1" d="M47 7L48 7L48 8L47 8L47 7ZM43 7L45 7L45 8L43 8L43 7ZM39 7L41 7L41 8L39 8L39 7ZM35 7L37 7L37 8L35 8L35 7ZM31 7L33 7L33 8L31 8L31 7ZM27 7L29 7L29 8L27 8L27 7ZM23 7L25 7L25 8L23 8L23 7ZM19 7L21 7L21 8L19 8L19 7ZM15 7L17 7L17 8L15 8L15 7ZM11 7L13 7L13 8L11 8L11 7ZM7 7L9 7L9 8L7 8L7 7ZM3 7L5 7L5 8L3 8L3 7ZM8.74228e-08 7L1 7L1 8L0 8L8.74228e-08 7Z" clip-rule="evenodd" fill-rule="evenodd"></path><path opacity="0.1" d="M40 1L40 -4.37114e-08L41 0L41 1L40 1ZM40 5L40 3L41 3L41 5L40 5ZM40 9L40 7L41 7L41 9L40 9ZM40 13L40 11L41 11L41 13L40 13ZM40 17L40 15L41 15L41 17L40 17ZM40 21L40 19L41 19L41 21L40 21ZM40 25L40 23L41 23L41 25L40 25ZM40 29L40 27L41 27L41 29L40 29ZM40 33L40 31L41 31L41 33L40 33ZM40 37L40 35L41 35L41 37L40 37ZM40 41L40 39L41 39L41 41L40 41ZM40 45L40 43L41 43L41 45L40 45ZM40 48L40 47L41 47L41 48L40 48Z" clip-rule="evenodd" fill-rule="evenodd"></path><path opacity="0.1" d="M47 40L48 40L48 41L47 41L47 40ZM43 40L45 40L45 41L43 41L43 40ZM39 40L41 40L41 41L39 41L39 40ZM35 40L37 40L37 41L35 41L35 40ZM31 40L33 40L33 41L31 41L31 40ZM27 40L29 40L29 41L27 41L27 40ZM23 40L25 40L25 41L23 41L23 40ZM19 40L21 40L21 41L19 41L19 40ZM15 40L17 40L17 41L15 41L15 40ZM11 40L13 40L13 41L11 41L11 40ZM7 40L9 40L9 41L7 41L7 40ZM3 40L5 40L5 41L3 41L3 40ZM8.74228e-08 40L1 40L1 41L0 41L8.74228e-08 40Z" clip-rule="evenodd" fill-rule="evenodd"></path><path d="M31.0705 21.8787C29.899 20.7071 27.9995 20.7071 26.8279 21.8787L25.8536 22.853C25.6583 23.0483 25.3417 23.0483 25.1464 22.853C24.9512 22.6578 24.9512 22.3412 25.1464 22.1459L26.1208 21.1716C27.6829 19.6095 30.2155 19.6095 31.7776 21.1716C33.3397 22.7337 33.3397 25.2663 31.7776 26.8284C30.2155 28.3905 27.6829 28.3905 26.1208 26.8284L26.1208 26.8284L21.1721 21.8788C21.1721 21.8787 21.1721 21.8787 21.1721 21.8787C20.0005 20.7072 18.101 20.7072 16.9295 21.8788C15.7579 23.0503 15.7579 24.9498 16.9295 26.1214C18.101 27.293 20.0005 27.293 21.1721 26.1214L22.1471 25.1464C22.3423 24.9512 22.6589 24.9512 22.8542 25.1464C23.0494 25.3417 23.0494 25.6583 22.8542 25.8536L21.8792 26.8285C20.3171 28.3906 17.7845 28.3906 16.2224 26.8285C14.6603 25.2664 14.6603 22.7338 16.2224 21.1717C17.7845 19.6096 20.3171 19.6096 21.8792 21.1717L21.8792 21.1717L26.8279 26.1213C27.9995 27.2929 29.899 27.2929 31.0705 26.1213C32.2421 24.9497 32.2421 23.0503 31.0705 21.8787Z" clip-rule="evenodd" fill-rule="evenodd"></path></svg><p><strong class="font-semibold text-gray-950">Lifetime access</strong> — get instant access to everything we have today, plus any new components and templates we add in the future.</p></div></div></div><div class="flex items-center rounded-2xl bg-gray-950 p-6 sm:rounded-4xl sm:p-10"><div><p class="text-gray-300 font-mono text-[0.8125rem]/6 font-medium tracking-widest text-pretty uppercase">Teams</p><p class="mt-2 text-base/6 text-white">For product teams and agencies.</p><div class="mt-6"><div class="flex flex-wrap items-center justify-between gap-6"><div class="flex items-center gap-x-4"><p class="text-6xl font-light text-white *:font-medium">$<span>979</span></p><div><p class="text-sm/6 font-semibold text-white">one time payment</p><p class="text-sm/6 text-gray-300">plus local taxes</p></div></div><a class="inline-flex justify-center rounded-full px-4 py-2 text-sm/6 font-semibold bg-white text-gray-950 hover:bg-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white" aria-label="Get a Tailwind Plus Team license for $979" href="https://tailwindcss.com/plus/checkout/cc42453b-bfcd-4a7c-8150-37946e36168e">Get Tailwind Plus</a></div></div><div class="mt-10 flex gap-4 text-sm/7 text-gray-300"><svg aria-hidden="true" viewBox="0 0 48 48" fill="none" class="size-12 shrink-0 fill-white"><path opacity="0.3" d="M7 1L7 -4.37114e-08L8 0L8 1L7 1ZM7 5L7 3L8 3L8 5L7 5ZM7 9L7 7L8 7L8 9L7 9ZM7 13L7 11L8 11L8 13L7 13ZM7 17L7 15L8 15L8 17L7 17ZM7 21L7 19L8 19L8 21L7 21ZM7 25L7 23L8 23L8 25L7 25ZM7 29L7 27L8 27L8 29L7 29ZM7 33L7 31L8 31L8 33L7 33ZM7 37L7 35L8 35L8 37L7 37ZM7 41L7 39L8 39L8 41L7 41ZM7 45L7 43L8 43L8 45L7 45ZM7 48L7 47L8 47L8 48L7 48Z" clip-rule="evenodd" fill-rule="evenodd"></path><path opacity="0.3" d="M47 7L48 7L48 8L47 8L47 7ZM43 7L45 7L45 8L43 8L43 7ZM39 7L41 7L41 8L39 8L39 7ZM35 7L37 7L37 8L35 8L35 7ZM31 7L33 7L33 8L31 8L31 7ZM27 7L29 7L29 8L27 8L27 7ZM23 7L25 7L25 8L23 8L23 7ZM19 7L21 7L21 8L19 8L19 7ZM15 7L17 7L17 8L15 8L15 7ZM11 7L13 7L13 8L11 8L11 7ZM7 7L9 7L9 8L7 8L7 7ZM3 7L5 7L5 8L3 8L3 7ZM8.74228e-08 7L1 7L1 8L0 8L8.74228e-08 7Z" clip-rule="evenodd" fill-rule="evenodd"></path><path opacity="0.3" d="M40 1L40 -4.37114e-08L41 0L41 1L40 1ZM40 5L40 3L41 3L41 5L40 5ZM40 9L40 7L41 7L41 9L40 9ZM40 13L40 11L41 11L41 13L40 13ZM40 17L40 15L41 15L41 17L40 17ZM40 21L40 19L41 19L41 21L40 21ZM40 25L40 23L41 23L41 25L40 25ZM40 29L40 27L41 27L41 29L40 29ZM40 33L40 31L41 31L41 33L40 33ZM40 37L40 35L41 35L41 37L40 37ZM40 41L40 39L41 39L41 41L40 41ZM40 45L40 43L41 43L41 45L40 45ZM40 48L40 47L41 47L41 48L40 48Z" clip-rule="evenodd" fill-rule="evenodd"></path><path opacity="0.3" d="M47 40L48 40L48 41L47 41L47 40ZM43 40L45 40L45 41L43 41L43 40ZM39 40L41 40L41 41L39 41L39 40ZM35 40L37 40L37 41L35 41L35 40ZM31 40L33 40L33 41L31 41L31 40ZM27 40L29 40L29 41L27 41L27 40ZM23 40L25 40L25 41L23 41L23 40ZM19 40L21 40L21 41L19 41L19 40ZM15 40L17 40L17 41L15 41L15 40ZM11 40L13 40L13 41L11 41L11 40ZM7 40L9 40L9 41L7 41L7 40ZM3 40L5 40L5 41L3 41L3 40ZM8.74228e-08 40L1 40L1 41L0 41L8.74228e-08 40Z" clip-rule="evenodd" fill-rule="evenodd"></path><path d="M18.5 13C16.0147 13 14 15.0147 14 17.5C14 19.9853 16.0147 22 18.5 22C20.9853 22 23 19.9853 23 17.5C23 15.0147 20.9853 13 18.5 13ZM13 17.5C13 14.4624 15.4624 12 18.5 12C21.5376 12 24 14.4624 24 17.5C24 20.5376 21.5376 23 18.5 23C15.4624 23 13 20.5376 13 17.5Z" clip-rule="evenodd" fill-rule="evenodd"></path><path d="M31.5 17C29.567 17 28 18.567 28 20.5C28 22.433 29.567 24 31.5 24C33.433 24 35 22.433 35 20.5C35 18.567 33.433 17 31.5 17ZM27 20.5C27 18.0147 29.0147 16 31.5 16C33.9853 16 36 18.0147 36 20.5C36 22.9853 33.9853 25 31.5 25C29.0147 25 27 22.9853 27 20.5Z" clip-rule="evenodd" fill-rule="evenodd"></path><path opacity="0.2" d="M28.4999 35.5H39.4999C39.4999 31.0817 35.9182 27.5 31.4999 27.5C29.5546 27.5 27.7714 28.1943 26.3848 29.3487C27.7101 31.0452 28.4999 33.1804 28.4999 35.5Z" clip-rule="evenodd" fill-rule="evenodd"></path><path opacity="0.1" d="M18.5 25.5C12.9772 25.5 8.5 29.9772 8.5 35.5H28.5C28.5 33.1804 27.7102 31.0452 26.3848 29.3487C24.5546 27.0061 21.7032 25.5 18.5 25.5Z"></path><path d="M9.01293 35H27.9871C27.8829 32.9896 27.1541 31.1456 25.9908 29.6565C24.2513 27.43 21.5428 26 18.5 26C13.421 26 9.27294 29.9857 9.01293 35ZM28.9883 35H38.9836C38.7263 31.091 35.4741 28 31.5 28C29.8456 28 28.3173 28.5351 27.0773 29.4421C28.1982 31.0266 28.8915 32.9358 28.9883 35ZM26.4613 28.6538C24.5364 26.4174 21.6836 25 18.5 25C12.701 25 8 29.701 8 35.5V36H40V35.5C40 30.8056 36.1944 27 31.5 27C29.6144 27 27.8712 27.6145 26.4613 28.6538Z" clip-rule="evenodd" fill-rule="evenodd"></path></svg><p><strong class="font-semibold text-white">Get access for your entire team</strong> <!-- -->— team licenses include access for up to 25 people to accommodate even the largest teams at your company.</p></div></div></div></div></div></div><section class="mt-30"><h2 class="sr-only">Testimonials</h2><div class="grid grid-cols-1 grid-rows-[auto_1fr] gap-x-10 max-lg:gap-y-10 lg:grid-cols-2 lg:gap-y-5"><figure class="group row-span-2 grid max-lg:mx-auto max-lg:max-w-3xl max-lg:gap-y-5 lg:grid-rows-subgrid lg:border-gray-950/5 lg:first:border-r lg:last:border-l"><blockquote class="max-lg:line-y lg:group-first:line-y mx-auto flex items-center px-8 py-2 text-xl/9 font-medium tracking-tight sm:px-16 sm:text-2xl/10"><p class="relative before:pointer-events-none before:absolute before:top-4 before:-left-6 before:text-[6rem] before:text-gray-950/10 before:content-['“'] sm:before:-left-8 lg:before:text-[8rem]">I love Catalyst because I can gradually make it my own while using the stock defaults to quickly get something on the page. I also love that it lets me see how the creators of Tailwind CSS structure their components, so I (or my AI agents) can emulate their best practices.</p></blockquote><figcaption class="max-lg:line-y lg:group-first:line-y grid grid-cols-[max-content_1fr] gap-6 px-8 py-2 sm:px-16"><img class="aspect-square size-14 rounded-full outline -outline-offset-1 outline-gray-950/5" src="/plus-assets/img/testimonials/derek-reimer.jpg" width="56" height="56" alt=""/><div class="text-sm/7"><p class="font-medium">Derrick Reimer</p><p class="text-gray-600">Founder of<!-- --> <a class="font-semibold text-gray-950 underline decoration-sky-400 underline-offset-4 hover:text-sky-500" href="https://savvycal.com" target="_blank">SavvyCal</a></p></div></figcaption></figure><figure class="group row-span-2 grid max-lg:mx-auto max-lg:max-w-3xl max-lg:gap-y-5 lg:grid-rows-subgrid lg:border-gray-950/5 lg:first:border-r lg:last:border-l"><blockquote class="max-lg:line-y lg:group-first:line-y mx-auto flex items-center px-8 py-2 text-xl/9 font-medium tracking-tight sm:px-16 sm:text-2xl/10"><p class="relative before:pointer-events-none before:absolute before:top-4 before:-left-6 before:text-[6rem] before:text-gray-950/10 before:content-['“'] sm:before:-left-8 lg:before:text-[8rem]">We’ve gone through several iterations of our pricing page recently, and every time we wanted to try a new idea I was able to find the perfect starting point in Tailwind Plus. It’s turned a project I might have never made the time to tackle into something I could finish and ship in an hour.</p></blockquote><figcaption class="max-lg:line-y lg:group-first:line-y grid grid-cols-[max-content_1fr] gap-6 px-8 py-2 sm:px-16"><img class="aspect-square size-14 rounded-full outline -outline-offset-1 outline-gray-950/5" src="/plus-assets/img/testimonials/justin-jackson.jpg" width="56" height="56" alt=""/><div class="text-sm/7"><p class="font-medium">Justin Jackson</p><p class="text-gray-600">Founder of<!-- --> <a class="font-semibold text-gray-950 underline decoration-sky-400 underline-offset-4 hover:text-sky-500" href="https://transistor.fm" target="_blank">Transistor</a></p></div></figcaption></figure></div></section><section class="line-y mt-30 grid grid-cols-1 gap-10 lg:grid-cols-2" id="faqs"><div class="lg:border-r lg:border-gray-950/5"><div class="lg:line-b/half max-lg:line-b grid grid-cols-1 gap-y-2 px-4 py-2 sm:px-2"><h2 class="text-pink-500 font-mono text-[0.8125rem]/6 font-medium tracking-widest text-pretty uppercase text-gray-600 min-[105rem]:absolute min-[105rem]:top-0 min-[105rem]:-left-10 min-[105rem]:origin-bottom-right min-[105rem]:-translate-x-full min-[105rem]:-translate-y-full min-[105rem]:-rotate-90 min-[105rem]:pr-2">Frequently asked questions</h2><p class="text-[2.5rem]/none font-medium tracking-tight text-pretty">Everything you need to know.</p></div></div><div class="lg:border-l lg:border-gray-950/5"><div class="grid grid-cols-1 gap-10"><div class="group"><h3 class="px-4 py-2 sm:px-2 font-mono text-[0.8125rem]/6 font-medium tracking-widest text-pretty uppercase text-gray-600">General</h3><dl><details class="group border-t border-gray-950/5 px-4 py-3 sm:px-2"><summary id="faq-what-does-lifetime-access-mean-exactly" class="flex w-full cursor-pointer justify-between gap-4 select-none group-open:text-sky-500 [&::-webkit-details-marker]:hidden"><div class="text-left text-sm/7 font-semibold text-pretty">What does “lifetime access” mean exactly?</div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 group-open:hidden"><path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 not-group-open:hidden"><path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z"></path></svg></summary><div class="mt-4 grid grid-cols-1 gap-6 text-sm/7 text-gray-600 [&_strong]:font-semibold [&_strong]:text-gray-950 [&_h2]:text-base/7 [&_h2]:font-semibold [&_h2]:text-gray-950 [&_h3]:font-semibold [&_h3]:text-gray-950 [&_a]:font-semibold [&_a]:text-gray-950 [&_a]:underline [&_a]:decoration-sky-400 [&_a]:underline-offset-4 [&_a]:hover:text-sky-500 [&_li]:relative [&_li]:before:absolute [&_li]:before:-top-0.5 [&_li]:before:-left-6 [&_li]:before:text-gray-300 [&_li]:before:content-["▪"] [&_ul]:pl-9 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:border-4 [&_pre]:border-gray-950 [&_pre]:bg-gray-900 [&_pre]:p-4 [&_pre]:text-white [&_pre]:outline-1 [&_pre]:-outline-offset-5 [&_pre]:outline-white/10 [&_pre_code]:bg-gray-900 [&_code]:not-in-[pre]:font-medium [&_code]:not-in-[pre]:text-gray-950 [&_code]:not-in-[pre]:before:content-["\`"] [&_code]:not-in-[pre]:after:content-["\`"]"><p>Buying a Tailwind Plus license is a<!-- --> <strong>one-time purchase, with no recurring subscription</strong>. When you purchase a Tailwind Plus license, you get access to everything in Tailwind Plus forever.</p></div></details><details class="group border-t border-gray-950/5 px-4 py-3 sm:px-2"><summary id="faq-what-does-free-updates-include" class="flex w-full cursor-pointer justify-between gap-4 select-none group-open:text-sky-500 [&::-webkit-details-marker]:hidden"><div class="text-left text-sm/7 font-semibold text-pretty">What does “free updates” include?</div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 group-open:hidden"><path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 not-group-open:hidden"><path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z"></path></svg></summary><div class="mt-4 grid grid-cols-1 gap-6 text-sm/7 text-gray-600 [&_strong]:font-semibold [&_strong]:text-gray-950 [&_h2]:text-base/7 [&_h2]:font-semibold [&_h2]:text-gray-950 [&_h3]:font-semibold [&_h3]:text-gray-950 [&_a]:font-semibold [&_a]:text-gray-950 [&_a]:underline [&_a]:decoration-sky-400 [&_a]:underline-offset-4 [&_a]:hover:text-sky-500 [&_li]:relative [&_li]:before:absolute [&_li]:before:-top-0.5 [&_li]:before:-left-6 [&_li]:before:text-gray-300 [&_li]:before:content-["▪"] [&_ul]:pl-9 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:border-4 [&_pre]:border-gray-950 [&_pre]:bg-gray-900 [&_pre]:p-4 [&_pre]:text-white [&_pre]:outline-1 [&_pre]:-outline-offset-5 [&_pre]:outline-white/10 [&_pre_code]:bg-gray-900 [&_code]:not-in-[pre]:font-medium [&_code]:not-in-[pre]:text-gray-950 [&_code]:not-in-[pre]:before:content-["\`"] [&_code]:not-in-[pre]:after:content-["\`"]"><p>When you purchase a Tailwind Plus license, you get access to every component package and every site template available today, plus any additional component packages or templates we release in the future at no additional cost.</p><p>This means that if we add a brand new component package like “Journalism” or design a new social media website template, access to those products are included in your original purchase.</p><p>To get an idea of what updates have looked like in the past,<!-- --> <a href="/plus/changelog">check out our changelog</a>.</p></div></details><details class="group border-t border-gray-950/5 px-4 py-3 sm:px-2"><summary id="faq-do-you-offer-student-or-purchasing-power-parity-discounts" class="flex w-full cursor-pointer justify-between gap-4 select-none group-open:text-sky-500 [&::-webkit-details-marker]:hidden"><div class="text-left text-sm/7 font-semibold text-pretty">Do you offer student or purchasing power parity discounts?</div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 group-open:hidden"><path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 not-group-open:hidden"><path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z"></path></svg></summary><div class="mt-4 grid grid-cols-1 gap-6 text-sm/7 text-gray-600 [&_strong]:font-semibold [&_strong]:text-gray-950 [&_h2]:text-base/7 [&_h2]:font-semibold [&_h2]:text-gray-950 [&_h3]:font-semibold [&_h3]:text-gray-950 [&_a]:font-semibold [&_a]:text-gray-950 [&_a]:underline [&_a]:decoration-sky-400 [&_a]:underline-offset-4 [&_a]:hover:text-sky-500 [&_li]:relative [&_li]:before:absolute [&_li]:before:-top-0.5 [&_li]:before:-left-6 [&_li]:before:text-gray-300 [&_li]:before:content-["▪"] [&_ul]:pl-9 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:border-4 [&_pre]:border-gray-950 [&_pre]:bg-gray-900 [&_pre]:p-4 [&_pre]:text-white [&_pre]:outline-1 [&_pre]:-outline-offset-5 [&_pre]:outline-white/10 [&_pre_code]:bg-gray-900 [&_code]:not-in-[pre]:font-medium [&_code]:not-in-[pre]:text-gray-950 [&_code]:not-in-[pre]:before:content-["\`"] [&_code]:not-in-[pre]:after:content-["\`"]"><p>For situations where price is an issue, we offer a discounted restricted license you can purchase if either:</p><ul class="list-disc *:marker:content-[auto]"><li>You are a student using Tailwind Plus purely for educational purposes, or</li><li>You are an individual using Tailwind Plus for commercial projects and your annual personal income from all sources<!-- --> <strong class="font-semibold">does not exceed $30,000 USD</strong></li></ul><p>To purchase a discounted restricted license, email us at<!-- --> <a href="mailto:support@tailwindcss.com">support@tailwindcss.com</a>.</p></div></details></dl></div><div class="group"><h3 class="px-4 py-2 sm:px-2 font-mono text-[0.8125rem]/6 font-medium tracking-widest text-pretty uppercase text-gray-600">Compatibility</h3><dl><details class="group border-t border-gray-950/5 px-4 py-3 sm:px-2"><summary id="faq-are-figma-sketch-or-adobe-xd-files-included" class="flex w-full cursor-pointer justify-between gap-4 select-none group-open:text-sky-500 [&::-webkit-details-marker]:hidden"><div class="text-left text-sm/7 font-semibold text-pretty">Are Figma, Sketch, or Adobe XD files included?</div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 group-open:hidden"><path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 not-group-open:hidden"><path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z"></path></svg></summary><div class="mt-4 grid grid-cols-1 gap-6 text-sm/7 text-gray-600 [&_strong]:font-semibold [&_strong]:text-gray-950 [&_h2]:text-base/7 [&_h2]:font-semibold [&_h2]:text-gray-950 [&_h3]:font-semibold [&_h3]:text-gray-950 [&_a]:font-semibold [&_a]:text-gray-950 [&_a]:underline [&_a]:decoration-sky-400 [&_a]:underline-offset-4 [&_a]:hover:text-sky-500 [&_li]:relative [&_li]:before:absolute [&_li]:before:-top-0.5 [&_li]:before:-left-6 [&_li]:before:text-gray-300 [&_li]:before:content-["▪"] [&_ul]:pl-9 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:border-4 [&_pre]:border-gray-950 [&_pre]:bg-gray-900 [&_pre]:p-4 [&_pre]:text-white [&_pre]:outline-1 [&_pre]:-outline-offset-5 [&_pre]:outline-white/10 [&_pre_code]:bg-gray-900 [&_code]:not-in-[pre]:font-medium [&_code]:not-in-[pre]:text-gray-950 [&_code]:not-in-[pre]:before:content-["\`"] [&_code]:not-in-[pre]:after:content-["\`"]"><p>No, design assets for tools like Figma, Sketch, or Adobe XD are not included.</p><p>We don't produce high-quality design artifacts as part of our own design and development process, so building these extra resources means we can't spend as much time creating new components and templates in code which is where we believe we can provide the most value.</p></div></details><details class="group border-t border-gray-950/5 px-4 py-3 sm:px-2"><summary id="faq-what-js-framework-is-used" class="flex w-full cursor-pointer justify-between gap-4 select-none group-open:text-sky-500 [&::-webkit-details-marker]:hidden"><div class="text-left text-sm/7 font-semibold text-pretty">What JS framework is used?</div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 group-open:hidden"><path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 not-group-open:hidden"><path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z"></path></svg></summary><div class="mt-4 grid grid-cols-1 gap-6 text-sm/7 text-gray-600 [&_strong]:font-semibold [&_strong]:text-gray-950 [&_h2]:text-base/7 [&_h2]:font-semibold [&_h2]:text-gray-950 [&_h3]:font-semibold [&_h3]:text-gray-950 [&_a]:font-semibold [&_a]:text-gray-950 [&_a]:underline [&_a]:decoration-sky-400 [&_a]:underline-offset-4 [&_a]:hover:text-sky-500 [&_li]:relative [&_li]:before:absolute [&_li]:before:-top-0.5 [&_li]:before:-left-6 [&_li]:before:text-gray-300 [&_li]:before:content-["▪"] [&_ul]:pl-9 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:border-4 [&_pre]:border-gray-950 [&_pre]:bg-gray-900 [&_pre]:p-4 [&_pre]:text-white [&_pre]:outline-1 [&_pre]:-outline-offset-5 [&_pre]:outline-white/10 [&_pre_code]:bg-gray-900 [&_code]:not-in-[pre]:font-medium [&_code]:not-in-[pre]:text-gray-950 [&_code]:not-in-[pre]:before:content-["\`"] [&_code]:not-in-[pre]:after:content-["\`"]"><p>Our <a href="/plus/templates">website templates</a> are built using Next.js, so all of the markup is written using React.</p><p>Our <a href="/plus/ui-blocks">components</a> are provided in three formats: React, Vue, and vanilla HTML.</p><p>The React and Vue examples are fully interactive, and are powered by<!-- --> <a href="https://headlessui.dev">Headless UI</a> — a library of unstyled components we designed to integrate perfectly with Tailwind CSS.</p><p>The vanilla HTML examples <strong>do not include any JavaScript</strong> and are designed for people who prefer to write any necessary JavaScript themselves.</p><p>Most of the components do not rely on JS at all, but for the ones that do (dropdowns, dialogs, etc.) we've provided some simple comments in the HTML to explain things like what classes you need to use for different states (like a toggle switch being on or off), or what classes we recommend for transitioning elements on to or off of the screen (like a dialog opening).</p><p>To get a better idea of how this looks in practice,<!-- --> <a href="/plus/ui-blocks/documentation#using-html">check out our documentation</a>.</p></div></details><details class="group border-t border-gray-950/5 px-4 py-3 sm:px-2"><summary id="faq-what-version-of-tailwind-css-is-used" class="flex w-full cursor-pointer justify-between gap-4 select-none group-open:text-sky-500 [&::-webkit-details-marker]:hidden"><div class="text-left text-sm/7 font-semibold text-pretty">What version of Tailwind CSS is used?</div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 group-open:hidden"><path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 not-group-open:hidden"><path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z"></path></svg></summary><div class="mt-4 grid grid-cols-1 gap-6 text-sm/7 text-gray-600 [&_strong]:font-semibold [&_strong]:text-gray-950 [&_h2]:text-base/7 [&_h2]:font-semibold [&_h2]:text-gray-950 [&_h3]:font-semibold [&_h3]:text-gray-950 [&_a]:font-semibold [&_a]:text-gray-950 [&_a]:underline [&_a]:decoration-sky-400 [&_a]:underline-offset-4 [&_a]:hover:text-sky-500 [&_li]:relative [&_li]:before:absolute [&_li]:before:-top-0.5 [&_li]:before:-left-6 [&_li]:before:text-gray-300 [&_li]:before:content-["▪"] [&_ul]:pl-9 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:border-4 [&_pre]:border-gray-950 [&_pre]:bg-gray-900 [&_pre]:p-4 [&_pre]:text-white [&_pre]:outline-1 [&_pre]:-outline-offset-5 [&_pre]:outline-white/10 [&_pre_code]:bg-gray-900 [&_code]:not-in-[pre]:font-medium [&_code]:not-in-[pre]:text-gray-950 [&_code]:not-in-[pre]:before:content-["\`"] [&_code]:not-in-[pre]:after:content-["\`"]"><p>Everything in Tailwind Plus is designed and developed for the latest version of Tailwind CSS, which is currently Tailwind CSS v<!-- -->4.0<!-- -->.</p></div></details><details class="group border-t border-gray-950/5 px-4 py-3 sm:px-2"><summary id="faq-what-browsers-are-supported" class="flex w-full cursor-pointer justify-between gap-4 select-none group-open:text-sky-500 [&::-webkit-details-marker]:hidden"><div class="text-left text-sm/7 font-semibold text-pretty">What browsers are supported?</div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 group-open:hidden"><path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 not-group-open:hidden"><path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z"></path></svg></summary><div class="mt-4 grid grid-cols-1 gap-6 text-sm/7 text-gray-600 [&_strong]:font-semibold [&_strong]:text-gray-950 [&_h2]:text-base/7 [&_h2]:font-semibold [&_h2]:text-gray-950 [&_h3]:font-semibold [&_h3]:text-gray-950 [&_a]:font-semibold [&_a]:text-gray-950 [&_a]:underline [&_a]:decoration-sky-400 [&_a]:underline-offset-4 [&_a]:hover:text-sky-500 [&_li]:relative [&_li]:before:absolute [&_li]:before:-top-0.5 [&_li]:before:-left-6 [&_li]:before:text-gray-300 [&_li]:before:content-["▪"] [&_ul]:pl-9 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:border-4 [&_pre]:border-gray-950 [&_pre]:bg-gray-900 [&_pre]:p-4 [&_pre]:text-white [&_pre]:outline-1 [&_pre]:-outline-offset-5 [&_pre]:outline-white/10 [&_pre_code]:bg-gray-900 [&_code]:not-in-[pre]:font-medium [&_code]:not-in-[pre]:text-gray-950 [&_code]:not-in-[pre]:before:content-["\`"] [&_code]:not-in-[pre]:after:content-["\`"]"><p>The components and templates in Tailwind Plus are designed to work in the latest, stable releases of all major browsers, including Chrome, Firefox, Safari, and Edge.</p><p>We don't support Internet Explorer 11.</p></div></details></dl></div><div class="group"><h3 class="px-4 py-2 sm:px-2 font-mono text-[0.8125rem]/6 font-medium tracking-widest text-pretty uppercase text-gray-600">Licensing</h3><dl><details class="group border-t border-gray-950/5 px-4 py-3 sm:px-2"><summary id="faq-do-i-need-to-purchase-a-license-for-each-project-i-work-on" class="flex w-full cursor-pointer justify-between gap-4 select-none group-open:text-sky-500 [&::-webkit-details-marker]:hidden"><div class="text-left text-sm/7 font-semibold text-pretty">Do I need to purchase a license for each project I work on?</div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 group-open:hidden"><path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 not-group-open:hidden"><path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z"></path></svg></summary><div class="mt-4 grid grid-cols-1 gap-6 text-sm/7 text-gray-600 [&_strong]:font-semibold [&_strong]:text-gray-950 [&_h2]:text-base/7 [&_h2]:font-semibold [&_h2]:text-gray-950 [&_h3]:font-semibold [&_h3]:text-gray-950 [&_a]:font-semibold [&_a]:text-gray-950 [&_a]:underline [&_a]:decoration-sky-400 [&_a]:underline-offset-4 [&_a]:hover:text-sky-500 [&_li]:relative [&_li]:before:absolute [&_li]:before:-top-0.5 [&_li]:before:-left-6 [&_li]:before:text-gray-300 [&_li]:before:content-["▪"] [&_ul]:pl-9 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:border-4 [&_pre]:border-gray-950 [&_pre]:bg-gray-900 [&_pre]:p-4 [&_pre]:text-white [&_pre]:outline-1 [&_pre]:-outline-offset-5 [&_pre]:outline-white/10 [&_pre_code]:bg-gray-900 [&_code]:not-in-[pre]:font-medium [&_code]:not-in-[pre]:text-gray-950 [&_code]:not-in-[pre]:before:content-["\`"] [&_code]:not-in-[pre]:after:content-["\`"]"><p>Unlike most other templates/themes, you don't have to buy a new Tailwind Plus license every time you want to use it on a new project.</p><p>As long as what you're building is allowed as per the license, you can build as many sites as you want without ever having to buy an additional license.</p><p>For more information and examples,<!-- --> <a href="/plus/license">read through our license</a>.</p></div></details><details class="group border-t border-gray-950/5 px-4 py-3 sm:px-2"><summary id="faq-can-i-use-tailwind-plus-for-client-projects" class="flex w-full cursor-pointer justify-between gap-4 select-none group-open:text-sky-500 [&::-webkit-details-marker]:hidden"><div class="text-left text-sm/7 font-semibold text-pretty">Can I use Tailwind Plus for client projects?</div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 group-open:hidden"><path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 not-group-open:hidden"><path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z"></path></svg></summary><div class="mt-4 grid grid-cols-1 gap-6 text-sm/7 text-gray-600 [&_strong]:font-semibold [&_strong]:text-gray-950 [&_h2]:text-base/7 [&_h2]:font-semibold [&_h2]:text-gray-950 [&_h3]:font-semibold [&_h3]:text-gray-950 [&_a]:font-semibold [&_a]:text-gray-950 [&_a]:underline [&_a]:decoration-sky-400 [&_a]:underline-offset-4 [&_a]:hover:text-sky-500 [&_li]:relative [&_li]:before:absolute [&_li]:before:-top-0.5 [&_li]:before:-left-6 [&_li]:before:text-gray-300 [&_li]:before:content-["▪"] [&_ul]:pl-9 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:border-4 [&_pre]:border-gray-950 [&_pre]:bg-gray-900 [&_pre]:p-4 [&_pre]:text-white [&_pre]:outline-1 [&_pre]:-outline-offset-5 [&_pre]:outline-white/10 [&_pre_code]:bg-gray-900 [&_code]:not-in-[pre]:font-medium [&_code]:not-in-[pre]:text-gray-950 [&_code]:not-in-[pre]:before:content-["\`"] [&_code]:not-in-[pre]:after:content-["\`"]"><p>Yes! As long what you're building is a custom website developed for a single client, you can totally use components and templates in Tailwind Plus to help build it.</p><p>The only thing you can't do is use Tailwind Plus to build a website or template that is resold to multiple clients.</p><p>For more information and examples,<!-- --> <a href="/plus/license">read through our license</a>.</p></div></details><details class="group border-t border-gray-950/5 px-4 py-3 sm:px-2"><summary id="faq-can-i-use-tailwind-plus-for-my-own-commercial-projects" class="flex w-full cursor-pointer justify-between gap-4 select-none group-open:text-sky-500 [&::-webkit-details-marker]:hidden"><div class="text-left text-sm/7 font-semibold text-pretty">Can I use Tailwind Plus for my own commercial projects?</div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 group-open:hidden"><path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 not-group-open:hidden"><path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z"></path></svg></summary><div class="mt-4 grid grid-cols-1 gap-6 text-sm/7 text-gray-600 [&_strong]:font-semibold [&_strong]:text-gray-950 [&_h2]:text-base/7 [&_h2]:font-semibold [&_h2]:text-gray-950 [&_h3]:font-semibold [&_h3]:text-gray-950 [&_a]:font-semibold [&_a]:text-gray-950 [&_a]:underline [&_a]:decoration-sky-400 [&_a]:underline-offset-4 [&_a]:hover:text-sky-500 [&_li]:relative [&_li]:before:absolute [&_li]:before:-top-0.5 [&_li]:before:-left-6 [&_li]:before:text-gray-300 [&_li]:before:content-["▪"] [&_ul]:pl-9 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:border-4 [&_pre]:border-gray-950 [&_pre]:bg-gray-900 [&_pre]:p-4 [&_pre]:text-white [&_pre]:outline-1 [&_pre]:-outline-offset-5 [&_pre]:outline-white/10 [&_pre_code]:bg-gray-900 [&_code]:not-in-[pre]:font-medium [&_code]:not-in-[pre]:text-gray-950 [&_code]:not-in-[pre]:before:content-["\`"] [&_code]:not-in-[pre]:after:content-["\`"]"><p>Absolutely! Your license gives you permission to build as many of your own projects as you like, whether those are simple public websites or SaaS applications that end users need to pay to access.</p><p>As long as what you’re building isn’t a website builder or other tool that customers can use to create their own sites using elements that originate from Tailwind Plus, you’re good to go.</p><p>For more information and examples,<!-- --> <a href="/plus/license">read through our license</a>.</p></div></details><details class="group border-t border-gray-950/5 px-4 py-3 sm:px-2"><summary id="faq-can-i-use-tailwind-plus-in-open-source-projects" class="flex w-full cursor-pointer justify-between gap-4 select-none group-open:text-sky-500 [&::-webkit-details-marker]:hidden"><div class="text-left text-sm/7 font-semibold text-pretty">Can I use Tailwind Plus in open source projects?</div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 group-open:hidden"><path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 not-group-open:hidden"><path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z"></path></svg></summary><div class="mt-4 grid grid-cols-1 gap-6 text-sm/7 text-gray-600 [&_strong]:font-semibold [&_strong]:text-gray-950 [&_h2]:text-base/7 [&_h2]:font-semibold [&_h2]:text-gray-950 [&_h3]:font-semibold [&_h3]:text-gray-950 [&_a]:font-semibold [&_a]:text-gray-950 [&_a]:underline [&_a]:decoration-sky-400 [&_a]:underline-offset-4 [&_a]:hover:text-sky-500 [&_li]:relative [&_li]:before:absolute [&_li]:before:-top-0.5 [&_li]:before:-left-6 [&_li]:before:text-gray-300 [&_li]:before:content-["▪"] [&_ul]:pl-9 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:border-4 [&_pre]:border-gray-950 [&_pre]:bg-gray-900 [&_pre]:p-4 [&_pre]:text-white [&_pre]:outline-1 [&_pre]:-outline-offset-5 [&_pre]:outline-white/10 [&_pre_code]:bg-gray-900 [&_code]:not-in-[pre]:font-medium [&_code]:not-in-[pre]:text-gray-950 [&_code]:not-in-[pre]:before:content-["\`"] [&_code]:not-in-[pre]:after:content-["\`"]"><p>Yep! As long as what you're building is some sort of actual website and not a derivative component library, theme builder, or other product where the primary purpose is clearly to repackage and redistribute our components, it's totally okay for that project to be open source.</p><p>For more information and examples of what is and isn't okay,<!-- --> <a href="/plus/license">read through our license</a>.</p></div></details><details class="group border-t border-gray-950/5 px-4 py-3 sm:px-2"><summary id="faq-can-i-sell-templatesthemes-i-build-with-tailwind-plus" class="flex w-full cursor-pointer justify-between gap-4 select-none group-open:text-sky-500 [&::-webkit-details-marker]:hidden"><div class="text-left text-sm/7 font-semibold text-pretty">Can I sell templates/themes I build with Tailwind Plus?</div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 group-open:hidden"><path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 not-group-open:hidden"><path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z"></path></svg></summary><div class="mt-4 grid grid-cols-1 gap-6 text-sm/7 text-gray-600 [&_strong]:font-semibold [&_strong]:text-gray-950 [&_h2]:text-base/7 [&_h2]:font-semibold [&_h2]:text-gray-950 [&_h3]:font-semibold [&_h3]:text-gray-950 [&_a]:font-semibold [&_a]:text-gray-950 [&_a]:underline [&_a]:decoration-sky-400 [&_a]:underline-offset-4 [&_a]:hover:text-sky-500 [&_li]:relative [&_li]:before:absolute [&_li]:before:-top-0.5 [&_li]:before:-left-6 [&_li]:before:text-gray-300 [&_li]:before:content-["▪"] [&_ul]:pl-9 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:border-4 [&_pre]:border-gray-950 [&_pre]:bg-gray-900 [&_pre]:p-4 [&_pre]:text-white [&_pre]:outline-1 [&_pre]:-outline-offset-5 [&_pre]:outline-white/10 [&_pre_code]:bg-gray-900 [&_code]:not-in-[pre]:font-medium [&_code]:not-in-[pre]:text-gray-950 [&_code]:not-in-[pre]:before:content-["\`"] [&_code]:not-in-[pre]:after:content-["\`"]"><p>No, you cannot use Tailwind Plus to create derivative products like themes, UI kits, page builders, or anything else where you would be repackaging and redistributing our components or templates for someone else to use to build their own sites.</p><p>For more information and examples of what is and isn't okay,<!-- --> <a href="/plus/license">read through our license</a>.</p></div></details><details class="group border-t border-gray-950/5 px-4 py-3 sm:px-2"><summary id="faq-can-i-upgrade-to-a-team-license-later" class="flex w-full cursor-pointer justify-between gap-4 select-none group-open:text-sky-500 [&::-webkit-details-marker]:hidden"><div class="text-left text-sm/7 font-semibold text-pretty">Can I upgrade to a team license later?</div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 group-open:hidden"><path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 not-group-open:hidden"><path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z"></path></svg></summary><div class="mt-4 grid grid-cols-1 gap-6 text-sm/7 text-gray-600 [&_strong]:font-semibold [&_strong]:text-gray-950 [&_h2]:text-base/7 [&_h2]:font-semibold [&_h2]:text-gray-950 [&_h3]:font-semibold [&_h3]:text-gray-950 [&_a]:font-semibold [&_a]:text-gray-950 [&_a]:underline [&_a]:decoration-sky-400 [&_a]:underline-offset-4 [&_a]:hover:text-sky-500 [&_li]:relative [&_li]:before:absolute [&_li]:before:-top-0.5 [&_li]:before:-left-6 [&_li]:before:text-gray-300 [&_li]:before:content-["▪"] [&_ul]:pl-9 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:border-4 [&_pre]:border-gray-950 [&_pre]:bg-gray-900 [&_pre]:p-4 [&_pre]:text-white [&_pre]:outline-1 [&_pre]:-outline-offset-5 [&_pre]:outline-white/10 [&_pre_code]:bg-gray-900 [&_code]:not-in-[pre]:font-medium [&_code]:not-in-[pre]:text-gray-950 [&_code]:not-in-[pre]:before:content-["\`"] [&_code]:not-in-[pre]:after:content-["\`"]"><p>Yup! If you're a solo developer you can start with a regular license, and then upgrade to the team license later if other developers join your team.</p><p>There is an "Upgrade to Team License" option under the "Account" menu after logging in.</p></div></details><details class="group border-t border-gray-950/5 px-4 py-3 sm:px-2"><summary id="faq-can-i-purchase-a-team-license-that-includes-more-than-25-seats" class="flex w-full cursor-pointer justify-between gap-4 select-none group-open:text-sky-500 [&::-webkit-details-marker]:hidden"><div class="text-left text-sm/7 font-semibold text-pretty">Can I purchase a team license that includes more than 25 seats?</div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 group-open:hidden"><path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 not-group-open:hidden"><path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z"></path></svg></summary><div class="mt-4 grid grid-cols-1 gap-6 text-sm/7 text-gray-600 [&_strong]:font-semibold [&_strong]:text-gray-950 [&_h2]:text-base/7 [&_h2]:font-semibold [&_h2]:text-gray-950 [&_h3]:font-semibold [&_h3]:text-gray-950 [&_a]:font-semibold [&_a]:text-gray-950 [&_a]:underline [&_a]:decoration-sky-400 [&_a]:underline-offset-4 [&_a]:hover:text-sky-500 [&_li]:relative [&_li]:before:absolute [&_li]:before:-top-0.5 [&_li]:before:-left-6 [&_li]:before:text-gray-300 [&_li]:before:content-["▪"] [&_ul]:pl-9 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:border-4 [&_pre]:border-gray-950 [&_pre]:bg-gray-900 [&_pre]:p-4 [&_pre]:text-white [&_pre]:outline-1 [&_pre]:-outline-offset-5 [&_pre]:outline-white/10 [&_pre_code]:bg-gray-900 [&_code]:not-in-[pre]:font-medium [&_code]:not-in-[pre]:text-gray-950 [&_code]:not-in-[pre]:before:content-["\`"] [&_code]:not-in-[pre]:after:content-["\`"]"><p>In general, if you need more than 25 seats we recommend purchasing multiple team licenses — one for each team at your company who needs access.</p><p>For example, if you run an ecommerce business, you might purchase a team license for the storefront team, then down the road another team license for the marketing team, then another for the data science team, and so on.</p><p>If you need more than 25 seats because you're a large agency or other type of company that isn't really organized into separate divisions/teams, contact us at<!-- --> <a href="mailto:support@tailwindcss.com">support@tailwindcss.com</a> for large team pricing.</p></div></details></dl></div><div class="group"><h3 class="px-4 py-2 sm:px-2 font-mono text-[0.8125rem]/6 font-medium tracking-widest text-pretty uppercase text-gray-600">Support</h3><dl><details class="group border-t border-gray-950/5 px-4 py-3 sm:px-2"><summary id="faq-do-you-offer-technical-support" class="flex w-full cursor-pointer justify-between gap-4 select-none group-open:text-sky-500 [&::-webkit-details-marker]:hidden"><div class="text-left text-sm/7 font-semibold text-pretty">Do you offer technical support?</div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 group-open:hidden"><path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 not-group-open:hidden"><path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z"></path></svg></summary><div class="mt-4 grid grid-cols-1 gap-6 text-sm/7 text-gray-600 [&_strong]:font-semibold [&_strong]:text-gray-950 [&_h2]:text-base/7 [&_h2]:font-semibold [&_h2]:text-gray-950 [&_h3]:font-semibold [&_h3]:text-gray-950 [&_a]:font-semibold [&_a]:text-gray-950 [&_a]:underline [&_a]:decoration-sky-400 [&_a]:underline-offset-4 [&_a]:hover:text-sky-500 [&_li]:relative [&_li]:before:absolute [&_li]:before:-top-0.5 [&_li]:before:-left-6 [&_li]:before:text-gray-300 [&_li]:before:content-["▪"] [&_ul]:pl-9 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:border-4 [&_pre]:border-gray-950 [&_pre]:bg-gray-900 [&_pre]:p-4 [&_pre]:text-white [&_pre]:outline-1 [&_pre]:-outline-offset-5 [&_pre]:outline-white/10 [&_pre_code]:bg-gray-900 [&_code]:not-in-[pre]:font-medium [&_code]:not-in-[pre]:text-gray-950 [&_code]:not-in-[pre]:before:content-["\`"] [&_code]:not-in-[pre]:after:content-["\`"]"><p>Tailwind Plus is a self-serve product, meaning that while we do offer customer support for things like account management and licensing related concerns, the expectation is that customers have the requisite knowledge of Tailwind CSS, HTML, React, and Vue to use the product successfully.</p><p>Because every project is different and the way independently authored pieces of code interact can be complex and time-consuming to understand,<!-- --> <strong>we do not offer technical support or consulting</strong>.</p><p>Tailwind Plus customers do get access to a private Discord community where you can ask questions and help others with their questions in return, but we don't offer first-party technical support or consulting here ourselves.</p></div></details><details class="group border-t border-gray-950/5 px-4 py-3 sm:px-2"><summary id="faq-what-is-your-refund-policy" class="flex w-full cursor-pointer justify-between gap-4 select-none group-open:text-sky-500 [&::-webkit-details-marker]:hidden"><div class="text-left text-sm/7 font-semibold text-pretty">What is your refund policy?</div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 group-open:hidden"><path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-7 w-4 not-group-open:hidden"><path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z"></path></svg></summary><div class="mt-4 grid grid-cols-1 gap-6 text-sm/7 text-gray-600 [&_strong]:font-semibold [&_strong]:text-gray-950 [&_h2]:text-base/7 [&_h2]:font-semibold [&_h2]:text-gray-950 [&_h3]:font-semibold [&_h3]:text-gray-950 [&_a]:font-semibold [&_a]:text-gray-950 [&_a]:underline [&_a]:decoration-sky-400 [&_a]:underline-offset-4 [&_a]:hover:text-sky-500 [&_li]:relative [&_li]:before:absolute [&_li]:before:-top-0.5 [&_li]:before:-left-6 [&_li]:before:text-gray-300 [&_li]:before:content-["▪"] [&_ul]:pl-9 [&_pre]:overflow-x-auto [&_pre]:rounded-xl [&_pre]:border-4 [&_pre]:border-gray-950 [&_pre]:bg-gray-900 [&_pre]:p-4 [&_pre]:text-white [&_pre]:outline-1 [&_pre]:-outline-offset-5 [&_pre]:outline-white/10 [&_pre_code]:bg-gray-900 [&_code]:not-in-[pre]:font-medium [&_code]:not-in-[pre]:text-gray-950 [&_code]:not-in-[pre]:before:content-["\`"] [&_code]:not-in-[pre]:after:content-["\`"]"><p>If you're unhappy with your purchase for any reason, email us at<!-- --> <a href="mailto:support@tailwindcss.com">support@tailwindcss.com</a> within 30 days and we'll refund you in full, no questions asked.</p></div></details></dl></div></div></div></section></div><footer class="col-start-3 row-start-2 max-sm:col-span-full max-sm:col-start-1 @container mb-16 grid w-full px-4 sm:px-2"><div class="mt-40"><div class="line-y py-2"><svg viewBox="0 0 176 21" class="h-5"><path class="fill-sky-400" d="M17.183 0C12.6 0 9.737 2.291 8.59 6.873c1.719-2.29 3.723-3.15 6.014-2.577 1.307.326 2.242 1.274 3.275 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.291 8.591-6.872-1.718 2.29-3.723 3.15-6.013 2.576-1.308-.326-2.243-1.274-3.276-2.324C23.39 1.98 21.44 0 17.183 0ZM8.59 10.309C4.01 10.309 1.145 12.6 0 17.182c1.718-2.291 3.723-3.15 6.013-2.577 1.308.326 2.243 1.274 3.276 2.324 1.685 1.71 3.635 3.689 7.894 3.689 4.582 0 7.445-2.29 8.59-6.872-1.718 2.29-3.722 3.15-6.013 2.577-1.307-.327-2.242-1.276-3.276-2.325-1.684-1.71-3.634-3.689-7.893-3.689Z" clip-rule="evenodd" fill-rule="evenodd"></path><path class="fill-current" d="M51.547 8.688h-3v5.803c0 1.548 1.016 1.524 3 1.427v2.346c-4.015.483-5.611-.629-5.611-3.773V8.688H43.71V6.172h2.225V2.925l2.612-.774v4.021h2.998v2.516Zm11.43-2.516h2.61v12.092h-2.61v-1.741c-.92 1.28-2.346 2.055-4.233 2.055-3.288 0-6.021-2.78-6.021-6.36 0-3.603 2.733-6.36 6.021-6.36 1.886 0 3.313.774 4.233 2.032V6.172Zm-3.821 9.915c2.176 0 3.82-1.62 3.82-3.87 0-2.248-1.644-3.868-3.82-3.868-2.177 0-3.821 1.62-3.821 3.869s1.644 3.87 3.82 3.87ZM69.94 4.36a1.687 1.687 0 0 1-1.668-1.669c.002-.443.179-.868.491-1.18a1.662 1.662 0 0 1 2.354 0c.312.312.49.737.491 1.18 0 .895-.75 1.669-1.668 1.669Zm-1.306 13.905V6.172h2.612v12.092h-2.612Zm5.635 0V.609h2.611v17.654H74.27ZM93.834 6.172h2.757l-3.797 12.092h-2.563l-2.516-8.15-2.539 8.15h-2.563L78.816 6.172h2.757l2.346 8.343 2.54-8.343h2.49l2.514 8.343 2.37-8.343ZM99.83 4.36c-.92 0-1.669-.774-1.669-1.669.002-.443.18-.868.492-1.18a1.661 1.661 0 0 1 2.354 0c.313.312.49.737.492 1.18 0 .895-.75 1.669-1.669 1.669Zm-1.306 13.905V6.172h2.612v12.092h-2.612ZM110.52 5.858c2.708 0 4.643 1.838 4.643 4.982v7.423h-2.612v-7.158c0-1.838-1.064-2.804-2.708-2.804-1.717 0-3.071 1.015-3.071 3.482v6.48h-2.612V6.174h2.612V7.72c.798-1.257 2.103-1.862 3.748-1.862Zm17.024-4.522h2.612v16.927h-2.612v-1.741c-.918 1.282-2.345 2.055-4.231 2.055-3.289 0-6.022-2.78-6.022-6.36 0-3.603 2.733-6.36 6.022-6.36 1.886 0 3.313.774 4.231 2.032V1.336Zm-3.821 14.751c2.177 0 3.821-1.62 3.821-3.87 0-2.248-1.644-3.868-3.821-3.868-2.176 0-3.82 1.62-3.82 3.869s1.644 3.87 3.82 3.87Z" clip-rule="evenodd" fill-rule="evenodd"></path><path class="fill-sky-400" d="M170.982 18.501c-2.467 0-4.088-1.19-4.744-2.984l2.036-1.19c.431 1.121 1.276 1.846 2.777 1.846 1.432 0 1.932-.604 1.932-1.277 0-.897-.811-1.242-2.605-1.76-1.845-.534-3.639-1.31-3.639-3.605 0-2.277 1.897-3.588 3.967-3.588 1.984 0 3.502 1.018 4.313 2.709l-2.001 1.155c-.432-.914-1.087-1.552-2.312-1.552-1 0-1.587.517-1.587 1.207 0 .742.466 1.139 2.294 1.69 1.915.605 3.951 1.243 3.951 3.71 0 2.26-1.812 3.64-4.382 3.64ZM158.711 18.502c-2.639 0-4.606-1.587-4.606-4.192V6.185h2.364v7.935c0 1.173.621 2.053 2.242 2.053 1.622 0 2.243-.88 2.243-2.053V6.185h2.38v8.125c0 2.605-1.966 4.192-4.623 4.192ZM147.056 15.983h4.606v2.277h-6.986V6.185h2.38v9.798ZM137.623 6.185c2.329 0 4.123 1.794 4.123 4.054 0 2.26-1.794 4.054-4.123 4.054h-2.121v3.967h-2.381V6.185h4.502Zm0 5.882c1.018 0 1.76-.793 1.76-1.828 0-1.052-.742-1.829-1.76-1.829h-2.121v3.657h2.121Z"></path></svg></div><div class="line-b mt-10 grid grid-cols-2 gap-x-8 gap-y-10 py-2 @3xl:grid-cols-4"><div><h3 class="text-sm/7 font-semibold">Marketing</h3><ul role="list" class="mt-4 flex flex-col gap-y-4"><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/marketing/sections/heroes">Hero Sections</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/marketing/sections/feature-sections">Feature Sections</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/marketing/sections/pricing">Pricing Sections</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/marketing/sections/header">Header Sections</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/marketing/sections/newsletter-sections">Newsletter Sections</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/marketing/sections/testimonials">Testimonials</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/marketing/sections/team-sections">Team Sections</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/marketing/sections/content-sections">Content Sections</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/marketing/sections/logo-clouds">Logo Clouds</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/marketing/sections/faq-sections">FAQs</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/marketing/sections/footers">Footers</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/marketing/sections/header">Headers</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/marketing/elements/flyout-menus">Flyout Menus</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/marketing/elements/banners">Banners</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/marketing">Browse all <span>→</span></a></li></ul></div><div><h3 class="text-sm/7 font-semibold">Application UI</h3><ul role="list" class="mt-4 flex flex-col gap-y-4"><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/application-ui/lists/tables">Tables</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/application-ui/lists/feeds">Feeds</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/application-ui/forms/form-layouts">Form Layouts</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/application-ui/forms/select-menus">Select Menus</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/application-ui/forms/radio-groups">Radio Groups</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/application-ui/forms/checkboxes">Checkboxes</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/application-ui/forms/comboboxes">Comboboxes</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/application-ui/navigation/navbars">Navbars</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/application-ui/navigation/pagination">Pagination</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/application-ui/navigation/sidebar-navigation">Sidebar Navigation</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/application-ui/navigation/command-palettes">Command Palettes</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/application-ui/overlays/modal-dialogs">Modals</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/application-ui/elements/dropdowns">Dropdowns</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/application-ui/elements/buttons">Buttons</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/application-ui">Browse all <span>→</span></a></li></ul></div><div><h3 class="text-sm/7 font-semibold">Ecommerce</h3><ul role="list" class="mt-4 flex flex-col gap-y-4"><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/ecommerce/components/product-overviews">Product Overviews</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/ecommerce/components/product-lists">Product Lists</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/ecommerce/components/category-previews">Category Previews</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/ecommerce/components/shopping-carts">Shopping Carts</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/ecommerce/components/category-filters">Category Filters</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/ecommerce/components/product-quickviews">Product Quickviews</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/ecommerce/components/product-features">Product Features</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/ecommerce/components/store-navigation">Store Navigation</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/ecommerce/components/promo-sections">Promo Sections</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/ecommerce/components/checkout-forms">Checkout Forms</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/ecommerce/components/reviews">Reviews</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/ecommerce/components/order-summaries">Order Summaries</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/ecommerce/components/order-history">Order History</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/ecommerce/components/incentives">Incentives</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/ui-blocks/ecommerce">Browse all <span>→</span></a></li></ul></div><div><h3 class="text-sm/7 font-semibold">Templates & UI Kits</h3><ul role="list" class="mt-4 flex flex-col gap-y-4"><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/templates/catalyst">Catalyst UI Kit</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/templates/spotlight">Personal Website Template</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/templates/salient">Landing Page Template</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/templates/protocol">API Reference Template</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/templates/commit">Changelog Template</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/templates/primer">Info Product Template</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/templates/studio">Agency Template</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/templates/transmit">Podcast Template</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/templates/pocket">App Marketing Template</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/templates/syntax">Documentation Template</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/templates/keynote">Conference Template</a></li><li class="group"><a class="text-sm/7 text-gray-600 hover:text-gray-950" href="/plus/templates">Browse all <span>→</span></a></li></ul></div></div></div><div class="line-y mt-16 flex flex-col gap-x-3 py-2 text-sm/7 text-nowrap text-gray-600 lg:gap-x-4 @lg:flex-row"><p>© <!-- -->2025<!-- --> Tailwind Labs Inc. All rights reserved.</p><div class="h-full w-px bg-gray-950/5 @max-lg:hidden"></div><a class="hover:text-gray-950" href="/plus/privacy-policy">Privacy policy</a><div class="h-full w-px bg-gray-950/5 @max-lg:hidden"></div><a class="hover:text-gray-950" href="/plus/changelog">Changelog</a></div></footer></div></main></div></div> </body> </html>