Tailwind CSS Tutorial #9 - Cards

Key Takeaways

or rather than gang so in this video I'd like to take everything that we've learned so far and also throw some more things into the mix as well to create a custom card components and that card component is going to be to contain individual recipes so this is a recipe right here with an image inside it a title and also who the recipe is by so those three things are going to live inside the card so let me go over here and let's go to where the cards are they're right here so this div is going to be a single card with an image span for the title and a span for who created it so let's give this deal with the card itself some classes to style this card so the first thing I'm going to do is give it a background of white so BG - white now if I save this and come over here we're not going to notice a difference because the background of the whole thing is white so we can't see the background of the card because they're both the same color so let's instead go to the main and say BG - gray - 100 and then hopefully because the background of the main is gray and this is now white it should stand out a little bit more so you can see now the card right here this strip has a white background if I make this bigger you should be able to see that more you can see this white bit right here okay so that's the background sorted now I also want to make our card have rounded corners so at each corner it should be rounded now to do that we just need to apply a rounded class that's all there is to it now if we just do around it like this it gives us a default rounded corner but we can control the size of the rounded corners using these extras right here so small medium large or full and we can also control each corner separately we're just going to stick with the default rounded class now if I save this and preview we can see if you look closely the bottom is rounded right here I'll tell you what I'm going to do is make this great darker for the sake of this tutorial so we can see the contrast a bit more so let me come over here okay so now we can see these corners are rounded but they're not rounded at the top up here that's because the image itself is not rounded and it's going over the corners so the way we can combat this is by coming up here where is the card and after rounded we can say overflow is hidden so now anything that goes over the boundary of the card itself including at the corners is going to be hidden including that part of the image that goes over the corners so now you can see it is rounded at the top awesome now I also want to give this card a drop shadow so let's come back over here and the class we use for that is just shadow and again it could be an extra small small medium large Excel to excel in a outline etc I'm going to stick with the default one for now just to show you this and come over here and we can see a subtle shadow I'm going to make it a bit bigger by saying shadow and D and saving that and now we can see that's a little more obvious the shadow right there okay cool so that's pretty much it for the card itself now what I'm going to do is change the background back to 100 in strength so this thing right here from 500 to 100 save it and come back over here around okay yeah cool that card is looking pretty good alright then so there's a few more things I want to do first of all I'm going to style up this thing right here so let's do the first spun down here this one let's give this a class and set it equal to font - bold save that and preview and that just makes this bold the title now I also want the second line right here to go on to the next line so it shouldn't start next to it you should go underneath now to do that we need to make it into a block level element this thing so I can just say right here the class is going to be equal to block to do that and it should push it down onto the next line awesome okay I also want to make this a bit lighter the text so text - gray and it's going to be 500 and also I'm going to make the text smaller so text - SM save that and preview and that is looking a bit better awesome so I also want to give this a bit of padding around here now instead of padding what we could do is take this div and apply margin to it now I'm not going to apply padding to the card itself and I'll show you why if I say P four all the way around and save it then we're going to get padding around the image as well and I want the image to go right up to the edge so I don't want that to happen so let me take it off here and instead I'm just gonna apply margin to the div which surrounds the text so I can say class is equal to M and it's going to be in all directions and the strength is going to be four so M - four save it and that looks a bit better okay so I just want to style the images a little bit because at the minute if the card is bigger than the image then it doesn't go all the way across to the edge so to do that I'm going to come up to the image and say class is equal to and I'm gonna say that W - full which means the width should be the full width it should fully contain the width of its parent so now it does that but I think that the height is too much so I'm gonna go over here and apply some height classes to it now I'm gonna give it a height of strength thirty-two by default and then when it gets to small screens and up it's going to be a height of 48 so a bit bigger so if we go to very small screens this is going to be the height for larger screens it's going to be this but notice now we've distorted the image it looks really stretched now we can combat that very simply by just saying object - cover and that's going to take out the distortion it's still gonna have the same width and height however the image is basically going to zoom in but only show inside this width and height so it's never distorted now okay and we see certain parts of the image within those boundaries awesome so that is looking pretty good ultimately we don't want the card going all the way across like this and we're going to control that later on when we use CSS grid because instead of just one here we're gonna have three cards next to each other and they won't be stretched across the entire page but for now that component is looking alright there is another thing I'd like to do and that is to place a badge up here with the time on but we'll do that in the next video