How do I build a responsive card component using Tailwind utilities?
Asked on Sep 16, 2025
Answer
To build a responsive card component using Tailwind CSS, you can utilize Tailwind's utility classes for layout, spacing, and responsive design. Here's a simple example of a card component that adjusts its layout based on screen size.
<!-- BEGIN COPY / PASTE -->
<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden md:max-w-md">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="image.jpg" alt="Card Image">
</div>
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800">Card Title</h2>
<p class="mt-2 text-gray-600">This is a simple card component description. It is responsive and adjusts based on the screen size.</p>
</div>
</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The card uses "max-w-sm" for a maximum width on small screens and "md:max-w-md" for medium screens and up.
- Responsive classes like "md:flex" and "md:flex-shrink-0" adjust the layout for larger screens.
- Utility classes for spacing ("p-4", "mt-2") and typography ("text-xl", "font-semibold") enhance the card's appearance.
- Ensure the image source ("image.jpg") is correctly linked to display the image.
Recommended Links: