Current section: Implementation 12 exercises

Fluid Hover Cards with Tailwind CSS

This UI component on dji.com has four cards:

Four cards on the DJI website

When hovering over each card, it will slightly expand in width and eat into the space of the adjacent cards. Also, the te

Loading lesson


00:00 A while ago, I was browsing the DJI website and on this Osmo Pocket 3 page, I found this pretty interesting bit of UI right here. So there's these four cards and when you hover over one, you can see that it takes a little bit more width and takes some of the real estate from the other cards. So that's a pretty cool effect.

00:19 And there's also this text that slides up and then down to reveal the extra paragraph when you're hovering on one of the cards. So I thought that'd be pretty interesting and fun to recreate this UI with Tailwind CSS. As a starting point, I have a full-height grid container with PlaceItemCenter, which

00:38 will center our cards on the screen. And I just have this text that says "Let's do this" and looks like that. So let's do this!