Tailwind Card Generater

Create and style cards with Tailwind CSS classes

Card Options

Live Preview

Generated Code

How to use Tailwind Card Maker Tool:

  • 1
    Enter the Card Header Text and specify header background color, font size and family.
  • 2
    Enter the Title for card and set the font size and family along with its background color.
  • 3
    Now enter the text for the main body of card.
  • 4
    Just like above two elements, main card body has options to set the background color along with font family and size (independently)
  • 5
    Upload an image if you want to display in the card.
  • 6
    Border setting include thickness (weight), border radius and color.
  • 7
    Specify the card width in pixels.
  • 8
    Check the boxes for Border, Shadow, Rounded Corners, and Include button (whichever required)
  • 9
    After all settings, press the “Show Preview” button. You may always make changes and see the preview by pressing the button again.
  • 10
    After finalizing all settings, once the card is ready, press the “Copy Code” button and paste in your IDE.

Card Templates

Simple Card

Basic card with header and content

Product Card

Card with image, title, and button

Profile Card

User profile with image and details

Pricing Card

Card with price, features list, and CTA