Trigger: Use when "Tailwind UI", "Tailwind Plus", "premium Tailwind components". 179 premium React/JSX components across 23 categories from Tailwind Plus.
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/ — Full-width hero sections with CTAs
- headers/ — Navigation headers, topbars
- header-sections/ — Page header/breadcrumb sections
- feature-sections/ — Feature grids, icon lists, alternating layouts
- cta-sections/ — Call-to-action banners and sections
- pricing-sections/ — Pricing tiers, comparison tables
- pricing-pages/ — Full pricing page layouts
- testimonials/ — Customer quotes, review cards, carousels
- blog-sections/ — Blog post grids, article cards
- contact-sections/ — Contact forms, info blocks, maps
- newsletter-sections/ — Email signup forms, subscription CTAs
- team-sections/ — Team member grids, bios
- stats/ — Stat counters, metric displays
- bento-grids/ — Bento-style grid layouts
- logo-clouds/ — Partner/client logo rows
- footers/ — Page footers with links, social, legal
- faqs/ — FAQ accordion sections
- content-sections/ — Rich text content layouts
- about-pages/ — Full about page layouts
- landing-pages/ — Complete landing page compositions
- banners/ — Notification bars, announcement banners
- flyout-menus/ — Dropdown/flyout navigation menus
- 404-pages/ — Error page designs
How to Use
- Browse the category folder for the section you need
- Each .jsx file is a self-contained React component
- Copy into your project, adjust colors/content
- Dependencies: @headlessui/react, @heroicons/react, tailwindcss
When to Use This vs Others
- This — when you need individual polished sections for a React/Next.js app
- Cruip — when you need a full site scaffold, not just sections
- Aceternity — when you need animated/motion-heavy components
- shadcn — when you're already in a shadcn/ui project