Tailwind card generator

← All tools

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 agrid parent — swap the placeholder image block for a realimg 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