This UI component on dji.com has four cards:

![Four cards on the DJI website](https://res.cloudinary.com/epic-web/image/upload/v1705955792/4f72882684267ba46a4c51caa7680e59.png)

When hovering over each card, it will slightly expand in width and eat into the space of the adjacent cards. Also, the text on each card smoothly glides up and down to uncover an additional paragraph.

## Recreating the Cards UI

Here is our starting point for recreating the cards UI:

```tsx
<div class="grid min-h-screen place-items-center">
	<p class="text-4xl font-bold">Let's do this!</p>
</div>
```

We have a simple functional component named `HoverStretchCards` that returns a grid with centered items. The grid is set to take up the full screen height at a minimum.

We have a full-height grid container using `place-items-center` to center its children, which for now is a bold text paragraph that says "Let's do this!".

Our goal is to transform this starting point into a responsive collection of cards that emulates the behavior of the DJI website cards. Let's get to it!

Recreate an interactive cards UI with Tailwind CSS.

Fluid Hover Cards with Tailwind CSS

[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!

Tailwind CSS, Flexbox, and CSS Grid have made it easier than ever for you to implement responsive designs.

But what about when it comes to creating components that respond to user interactions?

There are so many things to consider: What should happen when a user hovers over an element? How should other components react? How can you make sure that your animations are smooth and fluid? How can you ensure text remains readable when it's overlaid on top of an image?

Animation and interactivity are key to creating engaging user experiences, but they can be intimidating.

Fortunately, the same tools that make it easy to create responsive designs also make it easy to create engaging interactions.

Inspired by a component found on when browsing [dji.com](http://dji.com/), Simon Vrachliotis has developed this tutorial to show you how to build a set of professional-grade cards for displaying content.

There are three main sections to this tutorial:

**Setting the Stage:** Create a plan by exploring the deployed card component's behavior. Dive into the starting code and prepare for the transformation.

**Cart Layout:** Use Flexbox and CSS Grid properties to create a responsive layout for the cards. Work with image and text placement within each card.

**Interaction Polish:** Add a subtle background overlay for better text readability. Create smooth hover animations for card expansion and text reveal effects.

There's more to this tutorial than just the code.

Along the way, Simon shares his thought process and design decisions behind each Tailwind class that gets added. You'll learn how to think like a UI designer and develop the intuition for making things look good.

**Key Takeaways:**

- Using Flexbox and CSS Grid for responsive layouts.
- Understanding the role of the fractional `fr` unit.
- Properly ordering elements to achieve a desired look.
- Configuring Tailwind CSS for animation and transition effects.
- Achieving full-coverage background images with proper aspect ratios.
- Ensuring text readability with background overlays.

### Ready to Elevate Your UI Skills?

Whether you're a beginner or an experienced developer, this tutorial has something for you.

It's time to elevate your Tailwind CSS skills and impress your users with engaging hover interactions.

Let's do this!

Simon Vrachliotis

Understanding how to employ Flexbox for crafting fluid, horizontally adaptable UIs with reusable elements.

Overview of the Cards Grid

JavaScript's Array methods provide a quick way to create a list of items.

Use a Loop to Quickly Create a List

A step-by-step guide on how to fetch and display images dynamically in a gallery.

DynamicallyAdd Images to the Cards

Positioning and Styling Text in Cards

Adding a background gradient can enhance the readability of text laid over vibrant images.

Enhance Text Readability with a Gradient

By adding some classes to the cards, we can hide and reveal text on hover.

Hide and Reveal Text on Hover

Learn a CSS Grid technique to animate elements from zero to their full height on hover.

Use CSS Grid to Animate Elements with Dynamic Height

Add an interactive hover effect that changes the opacity of text.

Animate Text Opacity

Update the effect so the hovered card expands and the other cards shrink using Flexbox.

Animate A Card's Width on Hover with Flexbox

Setting a fixed width for card text will prevent line break jumps when the card expands and contracts.

Prevent Line Break Jumps with Fixed Widths

This was an iterative process, but there are two main takeaways that you should keep in mind when working on your own projects.