Okay, let's continue. In this video, I want to work on the Idea cards. So these cards right here. So let's get started. So back to our code, let's add a new container for these ideas underneath our filters here. And I will name it ideasContainer. And let's give it some space in between space-y-6 and a margin on the top of top and bottom. And let's put a comment here and ideasContainer. So let's start with one ideaContainer. So let's name it ideaContainer singular. Again, let's end the comment so I can see what I'm doing. And ideaContainer. And let's add some classes here. So it's white. rounded-xl should be the size of our rounded corners, or it's not exact, but I'm just using rounded-xl, which is fine for now. So it's going to be a flex container. So this side will be the first flex item. And this will be the second one. And then the second one will be a flex container.

and going back and forth between the browser and your code. And it's added an image here. Actually, this should be a link. So I'll put it within an <a> tag should be a link to the person's profile page. So yeah, let's put it within an <a> tag. Okay, and image to say avatar here. And let's give it some classes. So class I have with h-14 height h-14. And oops, height h-14 and rounded-xl like we've been using. So for the image, I'm just making use of the Unsplash API for now. So I'm going to paste in the URL. So you can give it a size. And if you do face, or a query string of face and crop=face, then it will crop it to what it thinks is a face. And I have v=1. So I can have multiple images. So this should work should be an image of a person. Okay. What's next? Next is the title. So let's add that. Okay, so that's going to be another flex item within this flex container. So I have some margin on the left and the right. And this is the title,

What's next? Next is the title. So let's add that. Okay, so that's going to be another flex item within this flex container. So I have some margin on the left and the right. And this is the title, I have it as an h4. So whatever you want, you can pick here, say, text-xl, semi-bold. And it's a link as well. So let's say a and it's say hover:underline for now. And let's put a title in here. So a random title can go here. Okay. See how that looks? Looks good. And next should be the text. So if you look at the design, yeah, it's this text here. So let's go ahead and add that should be underneath the h4. So let's say text-gray, I have it as text-gray-600. margin-top. And that's good enough for now. Say lorem-100. Okay. And that's squished our image. Let's see if we can force it to not change size. So flex-none,

a button for this. So that would be this next item here. So button, it's going to be relative, because we have to place an SVG in there. Actually, I don't think it has to be relative. So we'll leave that off for now. Let's say bg-gray-100. Let's say hover:bg-gray-200. Oops, that should be a dot. Let me just expand this for now. And let's make it rounded-full. And it's force a height here. So same as the statusIndicator. And in here, we have to put an SVG. Actually, let's see if this works. First, let me just put some text, text. Okay. And that looks fine for now. I think we have to add the transition as well. So same as we've been doing. So let me just grab this. And let's place it there as well. Let's put it here. Okay. And let's go ahead and look for an SVG for three dots. So like I've been doing, I usually use heroicons. So let's look for dots.

And let's see if it's more narrow now. Well, it's done compiling it does. It is I mean. And that looks good to me. Cool. Actually, why is it centered? I don't think it's supposed to be centered. Yeah, it's supposed to be left aligned. So let's add that. I think we can add that on the unordered list. So let's say text-left. Okay, cool. Looks good to me. And let's bump this over to the right a bit. Maybe we can add a margin-left right here. margin-left of 108 maybe. So that looks good to me. Okay. And we'll toggle it using Alpine in a later video. Okay, now let's work on limiting this description to three lines like it is in the design here. And there is a CSS property for that called line-clamping. And there is a Tailwind plugin that we can use to do that. So it's called tailwind-line-clamp. And here it is right here. Let's go ahead and install this.

tailwind plugin that we can use to do that. So it's called tailwind-line-clamp. And here it is right here. Let's go ahead and install this. And we have to add it to our plugins. And our tailwind.config.js. Add that down here. Let me just put this on its own line. Put this on its own line. Okay, let's add the tailwind-line-clamp. And then this npm run dev again. And it's pretty straightforward to use, we just have to add the line-clamp utility and however number of lines that you want. So line-clamp: 3 in our case. So wherever that big blob of text is right here, where is it right here? line-clamp: 3, that should limit it to three lines. And it does cool. So yeah, it looks pretty close to the design we have here. So I'm pretty happy with that. One more thing, if you look at the design

So again, if you look at the default config, there should be a box-shadow in here somewhere. There it is. And we can just add a new one and name it whatever we want. So let's do that in our tailwind.config.js, wherever we are extending tailwind. So let's put it after the maxWidth right here. Actually, let's add the key for it. box-shadow. And let's name this first one card. Okay, let's paste that in. And we don't need this box-shadow here. And that should be good. Let's put this in quotes. Let's add the other one. Let's call that one dialog. And let's grab the parameters for that in Zeplin. So it's this one right here. And it's this CSS here. So let's grab this, paste that in here. And let's get rid of the box-shadow. Okay. So again, npm run dev, because we made changes to our config.

And let's get rid of the box shadow. Okay. So again, npm run dev, because we made changes to our config. And let's change our shadows here in our code. So instead of shadow md, say shadow card. And where else are we using the shadow? So right here for the dialog, shadow dialogue. shadow dialogue. And I believe that's it. shadow card and shadow dialogue. Yep, that's it. Let's see if these shadows changed. And yeah, I did. There we go. Cool. Let's also make this a pointer. Actually, there's a pointer already. Actually, I want to make it a pointer for everything, including when we have our cursor here. Okay, so let's just add cursor pointer to that section up here. Where is it? shadow card right here. We can say cursor pointer.

we'll make it more dynamic. So I've added this blue section to indicate that you voted already. So this button is blue, and the number of votes is blue. And I've also added random titles and the status indicator for the different statuses here. So we have in progress, closed, implemented, and considering. So yeah, our design is looking pretty good. I think this is a good place to break. And in the next video, we'll continue working on this. So let's go ahead and make a commit here. Let's say git add, git commit, episode three. Say design idea cards.