Tailwind Tools:
Button Generator
Table Tool
Cards
Alerts
Progress
More
▼
Pagination
Dropdown
Badges
Breadcrumbs
Text Maker
Link Maker
☰
Button Generator
Table Tool
Cards
Alerts
Progress
More
▼
Pagination
Dropdown
Badges
Breadcrumbs
Text Maker
Link Maker
Tailwind Card Maker
Create Your Card
Card Header
Sans
Serif
Monospace
Card Footer
Title
Sans
Serif
Monospace
Text
Sans
Serif
Monospace
Upload Image
Background Color
Text Color
Border Thickness
Border Radius
Border Color
Card Width (px)
Horizontal Layout
Show Preview
Generated Code
Copy 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
Horizontal layout of the card can be set by using the checkbox. You can see it in action when an image is given.
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.