Okay, so we have our application up and running and at the moment we have only a title here.
But in this video what we will do is we will create a layout for our application.
So what we need to do is we need to go into our app.js and we need to prepare something.
So what kind of light would you like to have.
I would like to have a two column layout.
That means I will have a list of the videos or movies on the left hand side, and on the right hand
side I will have details.
So to do that I will need to create a div and inside the div I will.
For now I will put h1 and I will do movie list and then I will also have movie details a second one.
So basically we will have two headings.
And I want to have this on the left hand side and this one on the right hand side.
Normally what I could do is I could create a new class name.
And in my CSS just create that class.
But I will show you one library that I use a lot.
And it's very handy for any development.
So it's called a tailwind.
So we can go here and tailwind CSS.
So basically tailwind give us a an option to specify classes directly here.
And it has predefined classes for almost everything what we need.
And that means you don't need to refer to CSS.
You will just put the classes directly in the HTML.
So we'll click Get Started here.
And you have an instruction on how to install a tailwind.
But this is general instruction here.
If you want to have like a specific framework you can go to Framework Guides here.
And we have a create react here.
So we can use that directly.
So first thing first we need to do we have already project.
We go to the project we need to install this CSS.
So I will copy that.
And I will stop this server for now.
And I will install that here.
Another thing what we need to do is we need to do Npx tailwind CSS in it.
So I will go go here and I will do that basically that in it will create a config file for our tailwind.
So you can see here on the left hand side we have tailwind config.js.
I will open that.
And we need to make some changes here.
So I need to put in the content here.
What kind of files we would like to enable.
Tailwind CSS four.
And going back here I can put that in a context.
So basically what we are doing is in the source folder we will use all the files that are ending with
JS, JSX and TSX.
So all our components will have that tailwind enabled.
I can save it and close it.
And also what I need to do is I will need to load the base styles for CSS.
And so I will copy that.
And in here what I can do is at the beginning of my app CSS I will load it here like this.
So basically I have that one useful thing that you might want to have is if you go to extensions here
sorry extension here you can do install tailwind CSS extension.
So it's intellisense extension that will help you write some classes.
So it will help you to finish.
If you start writing something, it will kind of help you with the existing classes there.
So that will be very handy.
So let's go back here to our application.
We have that div here.
So what we want to do is we want to create that uh layout.
So normally I would do like class name and put it in a CSS.
But I can do it here.
So if I will do class name here I can specify the classes directly here.
So what are the classes I want to have.
Grid.
So you see our typing grid that will enable the the grid.
Even if I will hover over it you see that will be the class that will be applied because tailwind has
already that class display grid.
So I don't need to create that classes.
I can specify it here and I can do it other things.
So I can do grid and you can see here intellisense kind of help me writing this up.
I will want to have grid columns too.
And if I will save it now if I will I need to run an application npm start.
If I will go here and I need to wait until you refresh.
You can see here this is on the left hand side.
This is on the right hand side.
I already have that two column layout there.
So it is working fine for for for now.
And we need to do some cleanup as well.
So if I will go here we at the moment what we want to have is we want to have that up header.
At the moment it's taking the entire space of this.
So what I can do is I can take the background color and put it in here.
So my entire application will be a max height, 100 vertical height.
So it will occupy the whole space.
And then we will put the background color.
We don't need any flex here.
So we can remove all of that.
And I can do text align center I can move it to up header.
So basically I want to have my application background color and that will occupy the entire space.
And I want to have header text align center I can have the font size and color.
Maybe we can have a default color for everything in our application here.
So if I will come back here to our application, you can see this is what I have.
I have the header here.
And I have on the left hand side I have one on the right hand side I have another one.
So if I will go here, you see I don't have any classes for the grid here.
Everything is controlled by this class here that is going from our tailwind and that's very handy.
Instead of writing your own classes, you will use it whatever that tailwind has already prepared.
What I can do is I can add some maybe padding to my heading.
So I will do padding, maybe 20 pixels and and you see how I can mix it up.
I can still have my own classes here.
I don't need to to do everything in tailwind, but I can have like my classes and combination with tailwind
classes.
So if I go here and I will refresh it and this is what we have at the moment.
It's not perfect, but it's a kind of starting layout that we will use later in the course.