Tailwind Card Generator

Assemble Tailwind card classes visually, tune spacing and surfaces, and copy the final class string into your UI.

Settings

Padding: 24px

Border Radius: 8px

Border Width: 1px

Border Color

gray-200

Background Color

white

Shadow

Enable Hover Effect

This is how your card will look

Tailwind Classes

Usage Example:

<div className="p-6 rounded-lg border border-gray-200 bg-white shadow-sm">
  <!-- Your content here -->
</div>