Tailwind card generator
Compose a card or card grid with Tailwind utilities. Preview is styled by this tool's CSS — rounded/shadow options appear in the copied output.
Presets
Sections
Chrome
Padding
Rounded (output)
Shadow (output)
Preview
Adjust sections or text to preview.
HTML
Layout toggles are saved in the URL. Title and body text are not.
About this tool
Builds a single card or a responsive card grid with optional image placeholder, header, body, and footer. Border, divide-y, padding, rounded, and shadow utilities are included in the copied HTML for use in a Tailwind project.
Turn on divide-y when you want hairlines between sections without nesting extra borders. Card grid mode wraps repeated cards in a grid parent — swap the placeholder image block for a real img or aspect-ratio wrapper. Rounded and shadow classes land in the output even though the on-page preview uses this tool's flat newspaper styling.
Read more
Free books, courses, and software
Get my programming books, course editions, and complete software.
Get the download library →