A Card from Scratch
Time to put the whole lesson together. Between Oscar's and Bella's cards, we've added a card for Daisy, a cuddly white cat, but without a single class: you'll style it yourself. Make it look like Oscar's card. You can look at his classes when you need to, but first try to remember what each part needs.
Daisy's card is built just like Oscar's: the div with the id daisy is the card, and inside it are the picture and another div with the texts and the button. The checks look at the result, not at particular classes, so you can choose your own sizes and shades.
A reminder of what makes a card a card: a background and a frame that set it apart from the page (bg-white, border, rounded-*, shadow-*), a picture cut to shape (w-full, aspect-* or h-*, object-cover) and rounded with the card (overflow-hidden), and texts with enough space around them (p-*, mt-*).
The page is getting long: scroll down in the preview to see Daisy's card.
Instructions
Give Daisy's card a white background and the same maximum width as Oscar's card, center it, and give it a margin at the top so that it doesn't touch Oscar's card (mx-auto mt-6 max-w-sm bg-white).
Give the card a light border, rounded corners and a shadow, and make sure that the picture gets rounded with it.
Make the picture fill the width of the card and give it a shape, for example the same as Oscar's, without distorting it.
Give the div with the texts padding, and style the texts like Oscar's: a big bold name, a smaller gray line with the age, and a margin above the description. (A colored line next to the description is up to you.)
Finally, the button: as wide as the texts of the card, orange with white text, with rounded corners and some space above it.
Start programming for free
9/10