Tailwind CSSで使えるカードコンポーネントを簡単に作成できるデザインツールです。スライダーやオプションを調整するだけで、プレビュー(お手本)を見ながらオリジナルのカードをデザインできます。「画像が上」または「画像が左」のレイアウト切り替え、テキストや色の変更はもちろん、影、角丸、枠線、アスペクト比、さらには「New」などのバッジ表示にも対応。複数のサンプルから読み込んで改造も可能です。完成したコードは即コピペOK。
Tailwind CSS カードジェネレーター|見て・触って作るコピペ用コード
この記事はPRを含みます。

レイアウト
コンテンツ
スタイル
p-0
注: 「画像が上」レイアウトの場合、画像下のテキスト部分にのみ適用されます。
色
#ffffff
#1f2937
#6b7280
枠線
1px
#e5e7eb
バッジ
#ef4444
#ffffff
プレビュー
生成されたコード
サンプルから選ぶ
クリックすると、デザインがコントローラーに読み込まれます。
標準 (画像が上)
Card Title
Lorem ipsum dolor sit amet…
横型 (画像が左)
Horizontal
Lorem ipsum dolor sit…
ダークモード
Dark Card
Lorem ipsum dolor sit amet…
プロフィール (中央寄せ)
Alice Smith
Frontend Developer
バッジ付き
New
New Product
Lorem ipsum dolor sit amet…
枠線付き (ボタン右寄せ)
Article Title
Lorem ipsum dolor sit amet…


























