Create Depth in a Tailwind Component with Shadows and Layers

Adam Wathan
InstructorAdam Wathan

Share this video with your friends

Send Tweet

The card is designed with a pretty flat. We can add depth through shadows and layers to make it look even better. This will make it look like some elements are closer and some farther away.

To do this, we'll make the images containing div relative so that we can pull the text content on top of the image with a negative margin (-mt-4). We'll adjust the style of the image and content to look great in a layered fashion with adjusting the shadow of each section of the component.