Fluid Hover Cards with Tailwind CSS
This UI component on dji.com has four cards:
When hovering over each card, it will slightly expand in width and eat into the space of the adjacent cards. Also, the te
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!