Okay.
So let's style our application a little bit.
In this video we're not going to spend too much time on it.
But let's make a little bit things a little bit better looking on our little application.
So at the moment what we have is this is a little bit too small to hover over and to, to click it.
So let's make it bigger.
How can we do that.
And of course we'll use our tailwind library for that.
So what we have is we could have that on faster.
This is styles for this one.
But if we'll go and we have that purple color, if we go to the parent element which is this one div
here, what we can do is we can decide what is the font color or font size on this element.
And all the children element will have that.
So how how are we going to decide that or how can we use that.
Classes from tailwind.
So basically tailwind comes with a text.
And then you have uh Excel version.
So you can do a text in Excel, which is higher.
Then you have two, three, four and so on.
So you can decide like how big you want to go with that text.
So if I would go something like six XL you see I can see there very very big.
So and I can go for something like a three maybe, and then you will have it smaller and actually like
that.
And this is a fine enough.
So what else we can do with tailwind.
Basically we can say use it.
And anything like for example we have like rate this movie if you want to have a kind of a border on
top of it.
So I could do a class name here and I can say border and I can do top border, for example, and I can
say like, oh, this, this border will be like two pixels, um, width.
And I'll go.
Also, what I can do is I can do border purple, for example, my color six 600.
So basically that will add a border here.
And you can see here we have that border there.
I can actually push it a little bit away from this.
So what I can do is I can use padding or margin.
And so let's say we want to use margin in the tailwind.
Margin is M.
And we can have a margin on top bottom left and right.
Or we can have a margin here.
So if I will do margin it will be equal from all the different directions.
But I want to have like margin top.
And then let's say we have five margin top five here.
So if I will go here you can see this is already pushed from there.
And you have a way to control it spacing, sizing colors and everything what you want.
So let's say we want to have this one a little bit bigger than the than this one.
So I can go here and I can find my movie title and I can say this class name will be text Excel for
example, or maybe two.
Excel if I will go here, you can see this is much bigger if I want to push it away.
I can this time use maybe padding and I will do padding bottom and padding bottom like this one.
And I can do maybe five.
So that will give me a little bit more room in between here.
Maybe five is too much I could do, maybe three if I want to use similar style here on the on this paragraph,
I can say maybe text Excel is here and I also do the padding bottom three.
So you can see here this is how we can style it.
So this is looking much better.
And if we go back to the header here there is not too much space from this section to the bottom section.
So we could do here is we could have maybe if I go to app.js here this is our header class name is header.
So we could put our classes there.
But this is the class we have in our CSS.
But we can also add classes here from tailwind and mix it up in the class name here.
So let's say we want to have padding of and let's say to a ten.
So that means we will add a padding here to entire, uh, this this element here.
And you can see here the tailwind will work with the styles we already have in here in the upper header.
So we can mix, mix and match.
Uh, another thing we can do.
Border maybe border bottom of two.
And you can say border orange.
500 for example like this.
So you can see here, and then we can maybe push it a little bit the rest of this thing.
So I will use this margin bottom now of maybe five.
And if you hover five right.
Bottom five.
If you hover over this style here you can see a you you will see what is the actually translate to CSS.
What is the CSS style that is applied here.
So if you are not really sure you can always do that.
And you can see here this is pushed a little bit more from this.
I don't like this orange a the purpose of of this exercise is to use some styling a little bit more
than and do your own thing, what you need to do.
I'm not really a good designer here, but I think it's like if you need to move around and use some
classes, this will be the way to do it.
For example, if you want to have this one a little bit bigger, and also if you want to hover over
this to see the cursor that is clickable item.
What.
We can also do that.
So we can go here.
We can go to movie list this time.
So we'll go movie list.
And this is the element we have on click.
I can also apply some class names here.
So class name equal.
And then in the quotes we can say text Excel.
So a little bit bigger.
And if I want to have like cursor I can say cursor pointer.
So that means if I will go back here and I can hover over this, you see my cursor changed to pointer.
So it kind of tell me this is a clickable.
So at the moment maybe it's not looking great but it's looking a little bit better and clearer to to
see see there.
So we can move back to our development of this component.
And what we will do is we will make it clickable.