From the course: Tailwind CSS 4 Essential Training

Unlock this course with a free trial

Join today to access over 25,000 courses taught by industry experts.

Challenge: Info card with image

Challenge: Info card with image - Tailwind CSS Tutorial

From the course: Tailwind CSS 4 Essential Training

Start my 1-month free trial Buy for my team

Challenge: Info card with image

“

(bright music) - [Instructor] All right, here's a quick challenge. This the small info card about an orange orchard. Now this needs to be made responsive. This is what it looks like on a mobile, an image at the top with rounded corners on all four sides, and some text at the bottom. On a slightly larger screen, somewhere around this size, the images on the left sticking to the edges of the card. Notice there is no padding, and there's rounded corners only on the left top and left bottom. No rounded corners here. Mobile again, rounded corners everywhere, and it's not sticking to the card. There is no change in font size or anything, just this layout. This image stretches full height. Even if the text is smaller. The image stretches full height of the card, so that's all you need to do. The markup is already available. If you switch to 03Challenge branch, you can find it in this html info-card.html in the folder 03. There are also some screenshots attached in the images folder within 03…

Contents