Summary

In this lesson, we turned Oscar's plain box into a modern card and learned that:

• border gives an element a border 1 pixel wide, and border-2, border-4 and border-8 thicker ones (the number is in pixels). Preflight gives every element border: 0 solid, so a width is all it takes.
• A border has the element's text color (currentColor) by default. Another color comes from the palette: border-stone-200.
• border-t, border-r, border-b, border-l, border-x and border-y draw a border on some sides only, also with a width: border-l-4.
• rounded-xs to rounded-3xl round the corners, rounded-full makes a pill or a circle, and rounded-t-2xl and the like round only some corners.
• shadow-xs to shadow-2xl add a shadow (the CSS property box-shadow).
• In Tailwind 4, some names have changed: rounded-xs and shadow-xs are what Tailwind 3 called rounded-sm and shadow-sm.
• Thanks to Preflight, images are blocks that are never wider than their parent and keep their aspect ratio.
• object-cover fills the picture's box without distorting the picture and cuts off what sticks out; object-contain fits the whole picture inside.
• aspect-video, aspect-square and aspect-4/3 give an element an aspect ratio, so its height follows its width.
• overflow-hidden cuts off the content along the rounded corners, too, so a picture gets rounded with its card.
• opacity-60 and the like fade a whole element with everything in it, unlike a color with a slash, such as bg-black/50.

In the next lesson, Flexbox, Grid and Position, you'll lay out cards like these side by side and in a grid, and put a badge in the corner of a card.

To practice, here is a contact card for the shelter's website. Give it the look of a card.