{"slug":"tailwind-plus-ui","title":"tailwind-plus-ui","tags":["site-building","frontend","tailwind","plus"],"agent_summary":"Location - Installed: D:/ClaudeDev/00_GITHUB/_working-on/Templates/ui-blocks/tailwind-plus/ - Backup zips: E:/LOC/Design Templates/tailwind-plus/  Categories (23 folders, 179 JSX files) - heroes/ —","trigger_phrases":["tailwind-plus-ui","tailwind guide","plus guide","tailwind ui","tailwind plus","premium tailwind components"],"runnable":false,"markdown":"**Trigger:** Use when \"Tailwind UI\", \"Tailwind Plus\", \"premium Tailwind components\". 179 premium React/JSX components across 23 categories from Tailwind Plus.\n\n### Location\n\n- Installed: `D:\\ClaudeDev\\00_GITHUB\\_working-on\\Templates\\ui-blocks\\tailwind-plus\\`\n- Backup zips: `E:\\LOC\\Design Templates\\tailwind-plus\\`\n\n### Categories (23 folders, 179 JSX files)\n\n- heroes/ — Full-width hero sections with CTAs\n- headers/ — Navigation headers, topbars\n- header-sections/ — Page header/breadcrumb sections\n- feature-sections/ — Feature grids, icon lists, alternating layouts\n- cta-sections/ — Call-to-action banners and sections\n- pricing-sections/ — Pricing tiers, comparison tables\n- pricing-pages/ — Full pricing page layouts\n- testimonials/ — Customer quotes, review cards, carousels\n- blog-sections/ — Blog post grids, article cards\n- contact-sections/ — Contact forms, info blocks, maps\n- newsletter-sections/ — Email signup forms, subscription CTAs\n- team-sections/ — Team member grids, bios\n- stats/ — Stat counters, metric displays\n- bento-grids/ — Bento-style grid layouts\n- logo-clouds/ — Partner/client logo rows\n- footers/ — Page footers with links, social, legal\n- faqs/ — FAQ accordion sections\n- content-sections/ — Rich text content layouts\n- about-pages/ — Full about page layouts\n- landing-pages/ — Complete landing page compositions\n- banners/ — Notification bars, announcement banners\n- flyout-menus/ — Dropdown/flyout navigation menus\n- 404-pages/ — Error page designs\n\n### How to Use\n\n1. Browse the category folder for the section you need\n2. Each .jsx file is a self-contained React component\n3. Copy into your project, adjust colors/content\n4. Dependencies: @headlessui/react, @heroicons/react, tailwindcss\n\n### When to Use This vs Others\n\n- This — when you need individual polished sections for a React/Next.js app\n- Cruip — when you need a full site scaffold, not just sections\n- Aceternity — when you need animated/motion-heavy components\n- shadcn — when you're already in a shadcn/ui project\n\n---\n","html":"<p><strong>Trigger:</strong> Use when \"Tailwind UI\", \"Tailwind Plus\", \"premium Tailwind components\". 179 premium React/JSX components across 23 categories from Tailwind Plus.</p>\n<h3>Location</h3>\n<ul>\n<li>Installed: <code>D:\\ClaudeDev\\00_GITHUB\\_working-on\\Templates\\ui-blocks\\tailwind-plus\\</code></li>\n<li>Backup zips: <code>E:\\LOC\\Design Templates\\tailwind-plus\\</code></li>\n</ul>\n<h3>Categories (23 folders, 179 JSX files)</h3>\n<ul>\n<li>heroes/ — Full-width hero sections with CTAs</li>\n<li>headers/ — Navigation headers, topbars</li>\n<li>header-sections/ — Page header/breadcrumb sections</li>\n<li>feature-sections/ — Feature grids, icon lists, alternating layouts</li>\n<li>cta-sections/ — Call-to-action banners and sections</li>\n<li>pricing-sections/ — Pricing tiers, comparison tables</li>\n<li>pricing-pages/ — Full pricing page layouts</li>\n<li>testimonials/ — Customer quotes, review cards, carousels</li>\n<li>blog-sections/ — Blog post grids, article cards</li>\n<li>contact-sections/ — Contact forms, info blocks, maps</li>\n<li>newsletter-sections/ — Email signup forms, subscription CTAs</li>\n<li>team-sections/ — Team member grids, bios</li>\n<li>stats/ — Stat counters, metric displays</li>\n<li>bento-grids/ — Bento-style grid layouts</li>\n<li>logo-clouds/ — Partner/client logo rows</li>\n<li>footers/ — Page footers with links, social, legal</li>\n<li>faqs/ — FAQ accordion sections</li>\n<li>content-sections/ — Rich text content layouts</li>\n<li>about-pages/ — Full about page layouts</li>\n<li>landing-pages/ — Complete landing page compositions</li>\n<li>banners/ — Notification bars, announcement banners</li>\n<li>flyout-menus/ — Dropdown/flyout navigation menus</li>\n<li>404-pages/ — Error page designs</li>\n</ul>\n<h3>How to Use</h3>\n<ol>\n<li>Browse the category folder for the section you need</li>\n<li>Each .jsx file is a self-contained React component</li>\n<li>Copy into your project, adjust colors/content</li>\n<li>Dependencies: @headlessui/react, @heroicons/react, tailwindcss</li>\n</ol>\n<h3>When to Use This vs Others</h3>\n<ul>\n<li>This — when you need individual polished sections for a React/Next.js app</li>\n<li>Cruip — when you need a full site scaffold, not just sections</li>\n<li>Aceternity — when you need animated/motion-heavy components</li>\n<li>shadcn — when you're already in a shadcn/ui project</li>\n</ul>\n<hr>\n"}