Create Depth in a Tailwind Component with Shadows and Layers

Adam Wathan: [0:00] So far we've designed this card using a pretty flat approach. Honestly, I think it looks pretty good, but we can make it look even more interesting by adding a little bit of depth.

[0:08] The simplest way to add depth to a design is to introduce shadows to convey that some elements are closer to you and other elements are further away. Here's how we might do that with this card using Tailwind's utility classes.

[0:21] Let's get rid of this border and try and use a shadow to differentiate this card from the background instead. I'm just going to start by adding a shadow class to the end of our list here.

[0:29] Now you'll see that instead of a border, we do have a little bit of a subtle shadow around the card, which looks pretty nice.

[0:35] If you wanted this card to feel like it was popping off the page a little bit more, we could bump that up to shadow-md. If you wanted it to feel like it was raised even for more than that, we could go up to shadow-lg. If you wanted it to feel really raised off the page, we could bring that all the way up to shadow-xl.

[0:48] Simply adding shadows to a design is often all you need to get that little bit of extra polish.

[0:53] Another approach that I think is often underused when it comes to creating depth in designs is overlapping elements to make it feel like there are multiple layers on the page.

[1:03] I'll show you what I mean. Let's get rid of this shadow for now and talk through what I want to try here.

[1:07] How about instead of having this image at the top and the information just underneath it stacked like this, what if we made this information section feel like a separate card that was floating over top of a little bit of the image so the top of it poked on top of the image and the image sat behind the information card? I think that could look pretty exciting.

[1:27] To do this, we're going to need to style these two sections separately. To start, I'm going to get rid of all these classes since we're not going to need this anymore. Why don't we work on getting these layers in place as a first step?

[1:38] The first thing I'm going to do is reintroduce the white background to the content section. Now, we'll just make that background specific to this area instead of to the entire card.

[1:47] Next, to make it feel like this card is sitting on top of this image, I think we need to make it a little bit narrower so that we're going to be able to see the sides of the image next to the sides of the card.

[1:57] The easiest way to do that is to actually introduce another wrapper element here. I'm going to add a div here. Maybe we'll give it a horizontal padding of px-4 or something. Let's just move this white card inside of this div. This will make it a little bit narrower.

[2:12] Now you can see that this card has four Tailwind spacing units narrower than the image above.

[2:18] Now we've got these two elements in place, how do we get this card to actually sit on top of this image instead of just being directly below it?

[2:25] The way that we can do that is using negative margins. Negative margins allow us to pull elements into space that they're not supposed to be in by default.

[2:35] If we want to pull this up, we can add a negative top margin utility by just adding a dash in front of any regular top margin utility.

[2:42] If we do something like negative mt-4, you'll see that the card does get pulled up a little bit. For some reason, the card is showing up underneath the image. Why would that be?

[2:51] The reason for this is that, in CSS, positioned elements, like this element that has a position of relative, are always positioned on top of unpositioned elements.

[3:02] This div is not positioned. It just has the default position of static. It is being rendered underneath this element in terms of the stacking hierarchy.

[3:12] The first thing you might think to try is add a z-index utility to this. Maybe z-10 could bring it up a little bit. We see that this doesn't actually work because z-index doesn't affect elements that are unpositioned.

[3:23] To get this to work, we have to add position-relative. Now you'll see that it is stacked on top.

[3:30] Because this div actually comes after this div in the document, we don't need this z-10 either because it's automatically going to be stacked on top, as long as both of them are positioned.

[3:40] Back to this negative margin, I think we could pull it up probably a lot more than we have here. Why don't we try something like mt-20, see what that looks like?

[3:48] That's not too bad, maybe a little bit too much. What about mt-16? Yeah, I like this. Now that we're covering up a lot of this image, I think maybe we can make the image a little bit taller than it is currently because we are obscuring a lot of stuff there.

[4:01] Instead of giving this a padding-bottom of two-thirds, why don't we change the aspect ratio of this image to increase the height a little bit? Maybe we can try something like three quarters, which would be a little bit taller. Maybe even go so far as five-sixths. Yeah, that's looking better.

[4:16] Now we have this stacking in place, why don't we work on some polishing details to really bring this to the next level?

[4:22] The first thing that I'm noticing is we lost our original rounded corners when we got rid of the styles on the root card element.

[4:29] Why don't we actually give both of these elements that same border radius? Maybe we'll add a rounded-lg here. Then on this right card, we'll add rounded-lg as well. This didn't take on the image, so let's make sure that we add overflow-hidden here.

[4:43] Alternatively, if we wanted to make things a little bit simpler, we could do this rounded-lg right on the image instead of on the wrapper. This will have the same effect.

[4:52] This is looking pretty good, but I think we could combine this layering with shadows to really emphasize the effect even more.

[5:00] Since this image is meant to be behind this card, I think this shadow that we give it should be a smaller shadow than whatever we give to the card.

[5:07] Why don't we try something like maybe shadow-md for the image? You can see that adds a little bit of a shadow there. It kind of makes it pop off the page a little bit.

[5:14] Now for this white card, why don't we try the next shadow up? We'll do shadow-lg here. I think this looks awesome.

[5:22] Quick recap, great way to add depth to your designs is to introduce shadows. Use the different sizes of shadows depending on how close or how far away you want the element to feel.

[5:32] If you really want to make it obvious that there's some depth in your design, try and look for opportunities to overlap things so it really communicates that there's actually multiple layers on the screen, like we've done with this card and the image behind it.