Combining Components in a UI
Assemble buttons, cards, and badges together into a product listing or dashboard widget to practice component composition.
Why Component Composition Matters
Component composition is the practice of assembling small, focused UI pieces — buttons, cards, badges — into larger, functional interfaces. A single well-built card is useful, but a product listing page that combines cards, buttons, badges, and a grid layout is what users actually see and interact with.
Tailwind makes composition natural because all components share the same utility vocabulary. There is no style encapsulation to break — classes from different components never conflict.
Product Card With All Three Components
A product listing card is the perfect showcase for combining buttons, cards, and badges together. The card provides the surface and layout; a badge in the top corner labels the item as Sale or New; and a primary button in the footer drives the purchase action.
This three-component composition is one of the most common patterns in e-commerce and SaaS product UIs.
<div class="relative bg-white rounded-xl shadow-md overflow-hidden max-w-xs">
<!-- Sale badge -->
<span class="absolute top-3 left-3 z-10 px-2 py-0.5 rounded-full text-xs font-bold bg-red-500 text-white">SALE</span>
<!-- Product image -->
<img src="product.jpg" alt="Product" class="w-full h-48 object-cover" />
<!-- Card body -->
<div class="p-5">
<h3 class="text-base font-bold text-gray-900">Wireless Headphones</h3>
<div class="mt-1 flex items-center gap-2">
<span class="text-lg font-bold text-gray-900">$49.99</span>
<span class="text-sm line-through text-gray-400">$79.99</span>
</div>
</div>
<!-- Card footer with button -->
<div class="px-5 pb-5">
<button class="w-full py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors">
Add to Cart
</button>
</div>
</div>All lessons in this course
- Button Variants and States
- Card Component Patterns
- Badge and Tag Components
- Combining Components in a UI