🧩 Code Snippets
Ready-to-use Tailwind CSS components. Copy the code or download the file. Free, no signup.
Primary Button
A solid blue primary button with hover/focus states.
Secondary Button
Outlined button with border and transparent background.
Ghost Button
Minimal button with no border, background appears on hover.
Danger Button
Red button for destructive actions like delete.
Icon Button
Button with SVG icon and optional text label.
Basic Card
Simple card with title, description and a link.
Image Card
Card with image header, body content and action footer.
Pricing Card
Pricing card with feature list and CTA button.
Text Input
Standard text input with label and error state support.
Textarea
Multi-line text input with auto-resize friendly styling.
Select Dropdown
Styled select element with custom focus ring.
Checkbox Group
Custom checkbox with Tailwind styling.
Basic Navbar
Responsive navbar with logo, links and mobile menu button.
Breadcrumb
Simple breadcrumb navigation with separator.
Success Alert
Green alert box for success messages.
Error Alert
Red alert box for error messages.
Info Notice
Blue info box for neutral announcements.
Centered Hero
Centered hero section with headline, subtitle and two CTAs.
Split Hero (Text + Image)
Two-column hero with text on left and image placeholder on right.
Basic Footer
Simple 3-column footer with links and copyright.