Cards

Cards are versatile UI components that can display a variety of content such as images, text, and interactive elements like buttons. Tailwind CSS provides a range of utilities that make it easy to create and style card components.

Card Structure

A basic card component typically includes the following elements: an image, a title, descriptive text, and action buttons.

We already know the separate elements of this component, so let's combine all our knowledge into one complete card.

Explanation

1. max-w-sm: Sets the maximum width of the element to small size (24rem or 384px);
2. rounded: Applies small rounded corners to the element;
3. overflow-hidden: Ensures any content that overflows the bounds of the element is hidden;
4. shadow-lg: Applies a large box shadow to the element.

1. w-full: Sets the width of the image to 100% of its container;
2. px-6: Adds horizontal padding of 1.5rem (24px) on both left and right;
3. py-4: Adds vertical padding of 1rem (16px) on both top and bottom;
4. font-bold: Applies bold font weight;
5. text-xl: Sets the font size to xl (1.25rem or 20px);
6. mb-2: Adds a bottom margin of 0.5rem (8px);
7. text-gray-700: Sets the text color to a medium gray;
8. text-base: Sets the font size to base (1rem or 16px).

1. px-6: Adds horizontal padding of 1.5rem (24px) on both left and right;
2. pt-4: Adds top padding of 1rem (16px);
3. pb-2: Adds bottom padding of 0.5rem (8px);
4. bg-blue-500: Sets the background color to a shade of blue;
5. hover:bg-blue-700: Changes the background color to a darker shade of blue on hover;
6. text-white: Sets the text color to white;
7. font-bold: Applies bold font weight;
8. py-2: Adds vertical padding of 0.5rem (8px);
9. px-4: Adds horizontal padding of 1rem (16px);
10. rounded: Applies small rounded corners to the button;
11. bg-gray-500: Sets the background color to a shade of gray;
12. hover:bg-gray-700: Changes the background color to a darker shade of gray on hover;
13. text-white: Sets the text color to white;
14. font-bold: Applies bold font weight;
15. py-2: Adds vertical padding of 0.5rem (8px);
16. px-4: Adds horizontal padding of 1rem (16px);
17. rounded: Applies small rounded corners to the button;
18. ml-2: Adds a left margin of 0.5rem (8px).

As you can see, all the utility classes have already been considered. Now, we combine everything in one card component.

Let's add one more section to the previous example, which will be badges.

Explanation - Badges

1. px-6: Adds horizontal padding of 1.5rem (24px) on both left and right;
2. pt-4: Adds top padding of 1rem (16px);
3. pb-2: Adds bottom padding of 0.5rem (8px);
4. inline-block: Displays the element as an inline-level block container;
5. bg-gray-200: Sets the background color to a light gray;
6. rounded-full: Applies fully rounded corners to the element;
7. px-3: Adds horizontal padding of 0.75rem (12px) on both left and right;
8. py-1: Adds vertical padding of 0.25rem (4px) on both top and bottom;
9. text-sm: Sets the font size to small (0.875rem or 14px);
10. font-semibold: Applies a semibold font weight;
11. text-gray-700: Sets the text color to a medium gray;
12. mr-2: Adds a right margin of 0.5rem (8px);
13. mb-2: Adds a bottom margin of 0.5rem (8px).

Note

All in-depth information about the Card component can be found here.