Tailwind Component Generator
Ready-to-paste Tailwind markup for 16 components — button, card, alert, badge, input, navbar, modal, dropdown, tabs, avatar, pricing card, hero, stat, breadcrumb, pagination, toggle — with colour, size, variant, radius and dark-mode options, a live preview, framework output (HTML / JSX / Vue / Svelte) and a class-by-class breakdown.
What this tool does
It writes Tailwind CSS markup for common components, tuned by a few options, and renders it live so you can see the result before pasting it into your project.
Options
A colour palette (blue, emerald, rose, violet, amber, slate…), a
size (sm / md / lg), a variant (solid, outline, ghost, soft), a
border radius, and a toggle for dark: classes so the
component adapts to a dark theme.
Framework output
Plain HTML, JSX (class becomes className,
self-closing tags), a Vue <template>, or a Svelte
component. The class strings are identical — only the host syntax
changes.
Class anatomy
Every utility class in the output is grouped — layout, spacing, sizing, colour, typography, borders, effects, states — so you can see what each part is doing.
Privacy
Everything runs in your browser. The preview loads Tailwind from a CDN; nothing you type is sent anywhere.