Components: build a piece once, reuse it everywhere
A real site isn't designed one tag at a time. It's assembled from parts you recognize: a navbar, a hero, a card, a footer. Each of those is a component.
The big idea
A component is a self-contained chunk of markup with a consistent structure that you can reuse and combine into pages.
See it in code
A card has an anatomy: an image on top, then a label, a title, and a line of text. overflow-hidden clips the image to the card's rounded corners:
<article class="m-6 max-w-sm overflow-hidden rounded-2xl border border-white/10 bg-white/5">
<img src="/library/cosmos/planet.jpg" alt="A golden ringed planet against a field of stars" class="h-40 w-full object-cover">
<div class="space-y-2 p-6">
<p class="text-xs uppercase tracking-widest text-violet-300">Jupiter · Orbiter</p>
<h3 class="text-xl font-bold">Juno</h3>
<p class="text-sm text-slate-300">Orbiting Jupiter since 2016 and mapping its giant storms.</p>
</div>
</article>The outer article owns the shape: rounded, bordered, clipped. Everything inside just fills it in. That separation is what makes the piece reusable.
Reuse means the same structure and class list with different content. Change one card's design and you'd change them both the same way:
<div class="grid grid-cols-2 gap-4 p-6">
<article class="overflow-hidden rounded-2xl border border-white/10 bg-white/5">
<img src="/library/cosmos/planet.jpg" alt="A golden ringed planet against a field of stars" class="h-32 w-full object-cover">
<div class="space-y-2 p-5">
<p class="text-xs uppercase tracking-widest text-violet-300">Jupiter · Orbiter</p>
<h3 class="text-lg font-bold">Juno</h3>
<p class="text-sm text-slate-300">Mapping Jupiter's giant storms.</p>
</div>
</article>
<article class="overflow-hidden rounded-2xl border border-white/10 bg-white/5">
<img src="/library/cosmos/nebula.jpg" alt="Glowing clouds of pink and blue gas scattered with stars" class="h-32 w-full object-cover">
<div class="space-y-2 p-5">
<p class="text-xs uppercase tracking-widest text-violet-300">Deep space · Telescope</p>
<h3 class="text-lg font-bold">Webb</h3>
<p class="text-sm text-slate-300">Seeing some of the first galaxies.</p>
</div>
</article>
</div>Only five things differ between the cards: the image, its alt text, the label, the title, and the description. Everything else is the component.
A page is an ordered list of components. Read the comments and you can see the whole design before reading a single class:
<!-- navbar -->
<header class="flex items-center justify-between bg-slate-900 px-6 py-4">
<p class="text-lg font-bold text-violet-300">COSMOS</p>
<a href="#missions" class="rounded-full bg-violet-600 px-4 py-2 text-sm font-semibold">Explore</a>
</header>
<!-- hero -->
<section class="px-6 py-10 text-center">
<h1 class="text-5xl font-extrabold text-sky-300">COSMOS</h1>
<p class="mt-3 text-slate-300">Explore the universe through NASA's real missions.</p>
</section>
<!-- mission cards -->
<section id="missions" class="grid grid-cols-2 gap-4 px-6">
<article class="rounded-2xl border border-white/10 bg-white/5 p-5"><h3 class="font-bold">Juno</h3></article>
<article class="rounded-2xl border border-white/10 bg-white/5 p-5"><h3 class="font-bold">Webb</h3></article>
</section>
<!-- footer -->
<footer class="px-6 py-8 text-sm text-slate-500">Built with NASA's open data</footer>In the COSMOS course, a finished component can be dropped into a later page with one line, such as <!-- @include: navbar -->, so each lesson's file shows only what's being built now.
Thinking in components is how all large software is organized. Functions, classes, and modules are the same idea: a named piece with a clear job that you can use without rereading its insides.
Try it yourself
Add a third card for Cassini, copying the structure exactly, and change grid-cols-2 to grid-cols-3. Then add transition hover:-translate-y-1 to every card and notice how many places you had to edit.
The common mistake
Letting copies drift. Tweak the padding on one card and forget the others, and the page looks subtly broken. If a design change applies to a component, apply it to every instance.
What it unlocks
Repeating markup by hand gets tedious fast. Storing the content as data and generating the cards with a loop is building pages from data. Cards are usually arranged with grid.