Tailwind CSS Component Recipes
Copy-paste Tailwind CSS component recipes. Buttons, cards, forms, and more with live preview, dark mode variants, and full color breakdown.
Gradient Hero Section
A full-width hero section with gradient background, centered content, and a CTA button.
Gradient Button
A vibrant gradient button with hover scale effect and smooth transitions.
Glassmorphism Card
A frosted glass card with backdrop blur, semi-transparent background, and subtle border.
Pricing Card
A pricing plan card with highlighted price, feature list, and a CTA button.
Split Hero Section
A two-column hero with text on the left and an image/illustration area on the right.
Neumorphism Card
A soft UI card with raised/inset shadows creating a physical, tactile appearance.
Product Card
An e-commerce product card with image area, price, rating, and add-to-cart button.
Dark Hero Section
A dark-themed hero section with a radial glow effect and bold typography.
Ghost Button
A transparent button with a border that fills with color on hover.
Transparent Navbar
A transparent navigation bar that overlays content with white links and a CTA button.
Gradient Border Card
A card with a vibrant animated gradient border using a padding-based technique.
Feature Grid Section
A responsive 3-column feature grid with icon cards, perfect for showcasing product benefits.
Floating Label Input
A text input with a label that floats above the field on focus using peer classes.
Pill Button
A fully rounded pill-shaped button with a solid background and shadow.
Feature Card
A clean feature card with an icon, title, and description for feature grid sections.
Dark Navbar
A solid dark navigation bar with logo, links, and a prominent CTA button.
Image Overlay Card
A card with a background image and a gradient overlay for readable text on top.
CTA Banner
A bold call-to-action banner with gradient background and centered messaging.
Icon Button
A compact square button with an icon, perfect for toolbars and action bars.
Testimonial Card
A customer testimonial card with avatar, quote, star rating, and attribution.
Sidebar Navigation
A vertical sidebar navigation with icon-label links and active state styling.
Blog Post Card
A blog post card with featured image, category tag, title, excerpt, and author info.
Gradient Form
A contact form card with a gradient header and clean input styling.
Loading Button
A button with an animated spinner that indicates a loading state.
Dark Footer
A professional dark footer with multi-column links, logo, and copyright.
Dark Form
A sleek dark-themed login form with subtle borders and a gradient submit button.
Stat Card
A dashboard stat card showing a metric value, label, and trend indicator.
Testimonial Section
A testimonials section with a large centered quote and author attribution.
Tab Navigation
Horizontal tab navigation with an active underline indicator and smooth transitions.
Outline Button
A clean outline button with a colored border and text that fills on hover.
Newsletter Section
An email subscription section with an inline input and submit button.
Pill Search Bar
A rounded pill-shaped search bar with an embedded search icon and clean focus state.
Success Alert
A green success alert with a checkmark icon, message text, and dismiss button.
Modal Backdrop
A centered modal dialog with a dark semi-transparent backdrop overlay.
Profile Card
A user profile card with avatar, name, bio, and social follow stats.
Bottom Navigation
A mobile-friendly bottom navigation bar with icon and label for each tab.
Error Alert
A red error alert with an exclamation icon for displaying validation or server errors.
Floating Action Button
A Material Design-inspired FAB fixed to the bottom-right corner with a shadow and hover animation.
Stats Section
A horizontal stats bar displaying key metrics with large numbers and labels.
Toggle Switch
A custom toggle switch using a hidden checkbox and Tailwind's peer modifier.
Status Badge
Colored status badges with a pulsing dot indicator for active/inactive/pending states.
Color Swatch Grid
A grid of color swatches with hex values and copy-on-click functionality styling.
Gradient Footer
A modern footer with a gradient top border and clean link layout.
Mobile Menu
A full-screen mobile menu overlay with large navigation links and a close button.
Warning Alert
A yellow/amber warning alert for cautionary information and important notices.
Split Button
A button split into a main action and a dropdown trigger with a divider.
Mega Menu Header
A navigation header with a dropdown mega menu showing categorized links in a multi-column layout.
Gradient Badge
A small gradient badge with bold text, perfect for labeling new features or premium content.
Notification Card
A notification card with icon, message, time stamp, and dismiss button.
Select Dropdown
A styled select dropdown with custom arrow icon and consistent cross-browser appearance.
Info Toast
A floating toast notification with an info icon, positioned at the bottom of the screen.
Avatar Stack
Overlapping circular avatars in a horizontal stack with a count badge for extras.
Toggle Button
A button group where one option is active at a time, styled with active/inactive states.
Radio Group Cards
A radio button group styled as selectable cards with active border highlighting.
Notification Dot
A small red notification dot badge overlaying an icon to indicate unread items.
Styled Accordion
A collapsible accordion with a rotating chevron indicator using the details/summary elements.
Styled Breadcrumb
A breadcrumb navigation with chevron separators and active page highlighting.
Custom Checkbox
A styled checkbox with a checkmark icon, custom colors, and smooth transitions.
Loading Skeleton
A skeleton placeholder with animated shimmer effect for content loading states.
Social Button
Social login buttons styled with brand colors for Google, GitHub, and Twitter.
Pill Tag
A rounded pill tag with a soft background, commonly used for categories or labels.
Gradient Progress Bar
A horizontal progress bar with a gradient fill and percentage label.
Horizontal Stepper
A horizontal step indicator with numbered circles, connecting lines, and completed/active states.
Cookie Banner
A bottom-fixed cookie consent banner with accept/decline buttons.
Dark Tooltip
A dark tooltip that appears on hover with a small arrow pointer, using CSS-only group hover.
Animated Button Hover
A button with a sliding background reveal animation on hover using pseudo-elements.
Category Chip
An interactive chip with an icon and text, used for category selection with an active state.
Empty State
A centered empty state illustration with a message and action button for when no data is available.
Vertical Timeline
A vertical timeline with connecting lines, dot markers, and event cards.
Neon Glow Button
A cyberpunk-inspired button with a vibrant neon glow effect and pulsing shadow.
Outlined Tag
A tag with only a border and text color, no background fill, for a minimal look.
Arrow Breadcrumb
A stepped breadcrumb with arrow-shaped segments, showing progress through a multi-step flow.
Countdown Badge
An urgency badge with a clock icon and countdown text, ideal for limited-time offers.
Progress Badge
A badge showing completion percentage with a small inline progress bar.
Gradient Divider
A horizontal divider line with a gradient from transparent to color and back, creating a fade effect.
Frequently Asked Questions
Do these recipes work with Tailwind CSS v4?
Yes. All recipes use standard Tailwind CSS utility classes that work with v3 and v4. We note any v4-specific features where applicable.
Can I use these in commercial projects?
Absolutely. All recipes are free to use in personal and commercial projects with no attribution required.