Componenten combineren in een UI
Combineer buttons, cards en badges in een productoverzicht of dashboardwidget om componentcompositie te oefenen.
Componenten combineren in een UI is een gratis Tailwind CSS Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Tailwind CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Waarom compositie van componenten belangrijk is
Compositie van componenten is het samenvoegen van kleine, gerichte UI-onderdelen — knoppen, kaarten en badges — tot grotere, functionele interfaces. Eén goed gemaakte kaart is nuttig, maar een productoverzichtspagina die kaarten, knoppen, badges en een rasterindeling combineert, is wat gebruikers daadwerkelijk zien en waarmee ze interactie hebben.
Tailwind maakt compositie vanzelfsprekend, omdat alle componenten dezelfde vocabulary van utilities delen. Er is geen stijl-inkapseling die problemen kan veroorzaken — klassen uit verschillende componenten conflicteren nooit.
Productkaart met alle drie de componenten
Een kaart voor een productoverzicht is ideaal om knoppen, kaarten en badges samen te combineren. De kaart biedt het oppervlak en de indeling; een badge in de bovenhoek labelt het item als Uitverkoop of Nieuw; en een primaire knop in de voettekst start de aankoopactie.
Deze compositie van drie componenten is een van de meest voorkomende patronen in gebruikersinterfaces voor e-commerce- en SaaS-producten.
<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>Rasterindeling voor een productoverzicht
Plaats meerdere productkaarten in een responsief raster om een volledige overzichtspagina te maken. Gebruik grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6, zodat de indeling zich aanpast van één kolom op telefoons tot vier kolommen op grote schermen.
Voeg boven het raster een paginatitel en filterbalk toe met flex items-center justify-between mb-6 om een professioneel ogende kop voor het overzicht te maken.
<div class="max-w-7xl mx-auto px-4 py-8">
<!-- Page header -->
<div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-900">Featured Products</h1>
<span class="text-sm text-gray-500">24 items</span>
</div>
<!-- Product grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Cards go here -->
</div>
</div>Dashboardwidget waarin componenten worden gecombineerd
Een dashboardwidget is een ander uitstekend doel voor compositie. Bouw een kaartoppervlak met een statistiekgetal, een gekleurde trendbadge en een actieknop met alleen tekst in de voettekst.
De badge geeft aan of de meetwaarde stijgt of daalt, het getal toont de waarde en de knop verwijst naar een detailweergave — drie afzonderlijke componenten die samen één samenhangende widget vormen.
<div class="bg-white rounded-xl shadow-md p-5">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-gray-500">Monthly Revenue</p>
<span class="px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800">
+12.5%
</span>
</div>
<p class="mt-3 text-3xl font-bold text-gray-900">$24,890</p>
<div class="mt-4 border-t border-gray-100 pt-4">
<button class="text-sm font-semibold text-blue-600 hover:text-blue-700">View full report →</button>
</div>
</div>Rij in een gebruikerstabel met badges en knoppen
In een gegevenstabel combineert elke rij vaak een gebruikersavatar, een naam, een statusbadge en actieknoppen — allemaal binnen één horizontale rij. Gebruik flex items-center gap-3 voor de linkerkant en flex gap-2 voor de actieknoppen aan de rechterkant.
Dit patroon komt voor in beheerderspanelen, CRM-dashboards en alle beheerinterfaces waarin meerdere records snel moeten kunnen worden bekeken.
<div class="flex items-center justify-between px-4 py-3 bg-white border-b border-gray-100">
<!-- User info -->
<div class="flex items-center gap-3">
<img src="avatar.jpg" alt="" class="w-8 h-8 rounded-full object-cover" />
<div>
<p class="text-sm font-semibold text-gray-900">Sarah Mitchell</p>
<p class="text-xs text-gray-400">sarah@example.com</p>
</div>
</div>
<!-- Status badge -->
<span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span>
<!-- Actions -->
<div class="flex gap-2">
<button class="px-3 py-1 text-xs font-medium text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50">
Edit
</button>
<button class="px-3 py-1 text-xs font-medium text-white bg-red-600 rounded-md hover:bg-red-700">
Remove
</button>
</div>
</div>Samenstelling van een meldingenoverzicht
Een meldingenoverzicht combineert avatarafbeeldingen, tijdstempelbadges en sluitknoppen in een doorzoekbare lijst. Wikkel elke melding in een container met flex gap-3 p-4, voeg links een pictogramachtergrond met rounded-full toe en sluit de rij helemaal rechts af met een sluitknop.
Gebruik divide-y divide-gray-100 op de wrapper van de lijst om automatisch randlijnen tussen items toe te voegen, zonder aan elk element randklassen toe te voegen.
<div class="bg-white rounded-xl shadow-md divide-y divide-gray-100">
<div class="flex gap-3 p-4">
<div class="flex-shrink-0 w-9 h-9 rounded-full bg-blue-100 flex items-center justify-center">
<svg class="w-4 h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
</svg>
</div>
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-700"><strong>John</strong> viewed your profile.</p>
<p class="text-xs text-gray-400 mt-0.5">2 minutes ago</p>
</div>
<button class="flex-shrink-0 text-gray-400 hover:text-gray-600">×</button>
</div>
</div>Prijskaart met functielijst
Een prijskaart combineert een kaartomhulsel, een uitgelichte badge (voor het aanbevolen abonnement), een prijsweergave, een functielijst en een actieknop — daarmee is het een van de meest uitgebreide samenstellingen van componenten in UI-ontwerp.
Gebruik ring-2 ring-blue-600 op de kaart van het aanbevolen abonnement om deze uit te lichten zonder extra marge of binnenruimte toe te voegen die de uitlijning van het raster zou verstoren.
<div class="bg-white rounded-xl shadow-md ring-2 ring-blue-600 p-6">
<div class="flex justify-between items-start">
<h3 class="text-lg font-bold text-gray-900">Pro Plan</h3>
<span class="px-2.5 py-0.5 rounded-full text-xs font-bold bg-blue-600 text-white">Popular</span>
</div>
<p class="mt-4 text-4xl font-bold text-gray-900">$29<span class="text-base font-normal text-gray-500">/mo</span></p>
<ul class="mt-6 space-y-3">
<li class="flex items-center gap-2 text-sm text-gray-600">
<svg class="w-4 h-4 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Unlimited projects
</li>
<li class="flex items-center gap-2 text-sm text-gray-600">
<svg class="w-4 h-4 text-green-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Priority support
</li>
</ul>
<button class="mt-6 w-full py-2.5 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors">
Get Started
</button>
</div>Lege status met knop
Een lege status wordt weergegeven wanneer een lijst of raster geen items bevat. Deze combineert een illustratie of pictogram, een kop, een beschrijving en een actieknop — allemaal gecentreerd in de beschikbare ruimte.
Gebruik text-center py-16 op de container, een groot pictogram in een gekleurde cirkel en een primaire knop om gebruikers naar de volgende actie te leiden. Dit is een kleine maar belangrijke samenstelling die de gebruikerservaring aanzienlijk verbetert.
<div class="text-center py-16">
<div class="mx-auto w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center">
<svg class="w-8 h-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
</svg>
</div>
<h3 class="mt-4 text-base font-semibold text-gray-900">No products yet</h3>
<p class="mt-1 text-sm text-gray-500">Get started by adding your first product.</p>
<button class="mt-6 px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700">
Add Product
</button>
</div>Waarschuwingsbanner met pictogram en knop
Een waarschuwingsbanner combineert een gekleurde achtergrond, een statuspictogram, een bericht en een optionele sluitknop. Gebruik flex items-start gap-3 p-4 rounded-lg voor de indeling en achtergrondhulpmiddelen zoals bg-yellow-50 border border-yellow-200 voor de waarschuwingsvariant.
De sluitknop aan de rechterkant gebruikt ml-auto flex-shrink-0 om zichzelf helemaal naar het einde van de flexrij te verplaatsen, ongeacht de lengte van het bericht.
<div class="flex items-start gap-3 p-4 rounded-lg bg-yellow-50 border border-yellow-200">
<svg class="flex-shrink-0 w-5 h-5 text-yellow-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
</svg>
<p class="flex-1 text-sm text-yellow-800">
Your free trial ends in <strong>3 days</strong>. Upgrade to keep access.
</p>
<button class="ml-auto flex-shrink-0 px-3 py-1 text-xs font-semibold text-yellow-800 border border-yellow-400 rounded-md hover:bg-yellow-100">
Upgrade
</button>
</div>Beste werkwijzen voor tussenruimte en uitlijning
Bij het samenstellen van samengestelde UI's is consistente tussenruimte het verschil tussen een verzorgd en een rommelig ontwerp. Volg deze regels: gebruik gap-* binnen flex- en rastercontainers in plaats van afzonderlijke marges; gebruik space-y-* voor verticale stapels; en reserveer p-* voor interne binnenruimte binnen componentoppervlakken.
Houd waarden voor tussenruimte aan op de Tailwind-schaal (veelvouden van 4 px). Vermijd het combineren van willekeurige waarden met schaalwaarden — kies één aanpak per component en houd je daaraan.
<!-- Use gap inside flex/grid containers -->
<div class="flex gap-4">
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg">Save</button>
<button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg">Cancel</button>
</div>
<!-- Use space-y for stacked components -->
<div class="space-y-4">
<div class="bg-white rounded-xl shadow-md p-5">Widget 1</div>
<div class="bg-white rounded-xl shadow-md p-5">Widget 2</div>
<div class="bg-white rounded-xl shadow-md p-5">Widget 3</div>
</div>Korte controle
Test je begrip van de concepten uit Tailwind CSS Mastery in deze les.
Samenvatting van de les
In deze les heb je geleerd dat productkaarten het kaartomhulsel combineren met statusbadges en actieknoppen tot één samenhangende component; dat dashboardwidgets en rijen van gegevenstabellen meerdere componenten horizontaal rangschikken binnen flexcontainers; en dat beste werkwijzen voor tussenruimte gap-* binnen flex- en rastercontainers en space-y-* voor verticale stapels gebruiken om samenstellingen consistent te houden. Hierna bouwen we een responsieve navigatiebalk.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Componenten combineren in een UI” gratis?
Ja — de volledige tekst van “Componenten combineren in een UI” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Tailwind CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Componenten combineren in een UI”?
Combineer buttons, cards en badges in een productoverzicht of dashboardwidget om componentcompositie te oefenen. Je oefent met Tailwind CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Tailwind CSS Academy te beginnen?
Ervaring vooraf is niet nodig. Tailwind CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “Componenten combineren in een UI”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Tailwind CSS Academy?
Ja. Elke les over Tailwind CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Buttonvarianten en -statussen
- Patronen voor cardcomponenten
- Badge- en tagcomponenten
- Componenten combineren in een UI