Create Login Page in Next JS with Tailwind CSS | Login Page UI in React JS

[Music] do [Music] hey guys welcome back to my youtube channel today in this tutorial i'm going to show you how we can create this login page ui by using 10. css in next years next year's is a react.js framework so you can consider this tutorial as a beginner's guide to the television css with react.js or next years and in one of my previous tutorial i have already shown you how we can create an e-commerce website by using television css in basic html so if you are interested in that i will provide the link of it in the description below or you can check it out from the i icon of this video so if you are interested in this kind of tutorial then hit the like button subscribe to my channel for more tutorials like this and don't forget to hit the notification bell icon so that you get notified whenever i post a new tutorial on this channel so without wasting any more time let's get started with the tutorial okay so here we need to first create the project and for that i have opened the terminal on my mac if you are on windows then you can use the command prompt or powershell and now we need to go to the directory in which i want to create the project and here i have this react directory within the tutorials directory which is located into the desktop and i want to go to that so for that i have provided cd command and then i can provide the path of this directory now hit enter so now we are at this react directory and within this referring now we can create the project so for that we need to go to the official documentation of next years if we want to clear the next year's project and yes we want to create the next year's project but here we want to create this with television css so this is the official website of tailwind css and if we go to the tailwind css documentation installation guide then we can see we have several integration guides for the television css and here we have the next js and i am going to follow this one here so after clicking on it here we can see we have a npx create next app with tailwind css command present so i'm not using basic next yes command to create our project instead i'm using this command so that it comes with tailwind css configuration along with it if we want to integrate elven css later in our next year's project that is also possible and for that we need to follow these steps okay but with this command we don't need to do any more configuration and as i am creating a new project so i am going to use this command so let's copy this one and use it here and let's change the project name now hit enter okay so here our project has been created now i am going to open this project in visual studio code and for that first i am going to move to this directory now open it in visual studio code by using this command now let's run the project by using npm run dev command so it has been compiled successfully now if we click here so it will open okay let me copy it it is opening in my other desktop so i am copying it and paste it here so here we can see our project is running now go to this pages directory and here within this index.js we have these components what we are seeing here right and let's see the package.json so here in the package.json we can see it is running the latest next yes and we have 10 wind css in the dev dependencies along with post css as well and here we have the television css config file along with this post css so to create the ui we need to update this index.js so here let's get rid of these things and let's provide a hello world task so here we can see the update now we can start working on this but before that i want to install another package to this project and that is for these icons so here you can see we have the social login icons along with this email and the lock icon right so we need to provide these icons as well and for that i am going to use react icons package so let's open it and we can install it by using this command so now we need to close this compilation process and we can do that by pressing ctrl c at the same time on the keyboard now paste the command and hit enter so here we have react icons added to our project now let's work on this and for that let's run the project by using this npm run dev command okay here while cleaning up the file i have deleted some code which is required here so here you can see we don't have any title so if i do control set here you can see within the head tag we have the title we need that so i am going to keep these things and this main tag as well but everything within the main tag i will get rid of it now we can see we have this icon and this title present and we have the footer as well and i don't need that footer so let's get rid of that as well now within this main tag we can create the project and for that first let's create the div and we will have two div because we have these two sections right so first section will be for the sign in section and second section will be for the sign up section so these two sections and these two sections have two different colors so we need to provide that and we need to wrap these two sections with another wrapper div which will contain these things so let's provide some class here and as you know in react we need to provide class as class name this is the jsx syntax and here we can provide the designing classes which we require first i will provide background color white so i have provided it let's see here we cannot see anything let's provide some text here so here we can see those two sections but here we cannot see the background white and for that first let's provide the background gray color to this page so i have provided that now we can see here we have some distinction if we zoom in then we can see that there is some distinction right now after this background color i want to provide a border radius and that i will provide this thing this rounded 2xl so that mean it will have 16 pixel border radius now save it now we can see we have some border radius here now along with this border radius i want to provide some shadow to it and we can do that by providing this shadow property and here also i want to provide shadow to excel here we can see we have some shadow now after that let's provide some more properties first i want to provide flex now after providing flex you can see now these two sections are beside each other so by default it has flex row property so that means it has flex direction row that's why these two sections are positioned beside each other if we want to position these things on top of each other which was before providing this flex then we need to provide flex call so that means it will have flex direction column so now these things are positioned like this but we want to position this as flex row and that is by default so that's why i will not provide anything it is perfectly fine for me now i want to provide a width to it and that i will provide this weight to third so this is the width for this section and as you can see this is the percentage width it is based upon the device width and i want to provide some max width as well and that i can provide by providing max w and then i want to provide this for excel now save it now we can see it has this width now let's work on these two divs first we need to provide the colors for the first if we don't need to provide any color because it has the white background color but here i want to provide some width and that width will be with 3x5 so that means for this wrapper view for this complete section we are dividing this in five sections and for this sign-in section i will provide three sections of those five sections right and for this one i will provide rest of the section so that means two by five and i will provide some padding here so that will be p5 which means 20 pixel padding now save it so here we can see it has some padding now let's provide some background color and padding to this section so here first provide the background color and i will provide green background color so here it will be bg green 500 so this is the color and here we have the different number for the color here you can see for the green we have 50 100 200 300 up to 900 so it has different shadow of the color or the depth of the color like as you can see in 50 it is very lighter green and in 900 it is very dark green so i am using somewhat middle in this shade so i will use 500 for the text color i will use white color now see so here we can see that color has been applied but with that color we can see that the rounded border has been gone now we need to provide those rounded corners as well but here we can only provide the rounded corner to these two sections here in the middle we don't need to provide any rounded corner so it will be top right and bottom right of this section let's provide the border radius it will be rounded top right and that is for tr and we need to provide it in same size which was 2xl right initially here in the wrapper div we have provided 2xl rounded corners so here also i'm going to provide that in the top right so similarly i need to provide it for the bottom right as well so it will be rounded b r b for bottom r for right so it is bottom right radius and here also it will be 2 xl now save it so here we can see it is now looking perfect now let's provide some padding and here we can see we have different paddings for this section in vertical we have much bigger padding but in horizontal axis it has less amount of padding so it will have different kinds of padding for vertical padding that will be p y so it will be applied to the padding top and bottom here you can see the suggestions and for this tailwind css classifications i am using and vs code extension called tailwind css intellisense so you can use it to get help for the tailwind css classes in vs code now let's provide this padding so horizontally i am going to provide much bigger padding and that will be 36 that means it is 144 pixel similarly i want to provide padding in horizontal axis also and for the horizontal axis i will provide some less padding which will be px12 that means 48 pixel now save it now here we can see that section has been created and it is looking much more similar to this thing now we need to provide these child elements into this sections right the wrapper components have been created and is looking pretty good so first i am focusing in this sign up section and here we can see we have this heading then we have some description and then we have a button so within this sign up section first i need to provide the heading text and for the class of it let's provide 3xl size now after that i want to provide bold text and i want to provide some margin button to it and i will provide 8 pixel which is mb2 now save it so here we can see that now after that we have a bar which is kind of acting like a underline of this text so we can create that by creating a div let's provide some class name to this div and first it will have a border so i will provide border to that means it has 2 pixel border width let's provide a width of this div and that i will provide with 10 that means 40 pixel let's provide a border color and that will be white color now after saving it here we can see that but i want to push it to the middle and that i can do by providing inline block property and let's provide some margin button to it as well now it is looking perfect now after that we have the short description and let's provide that text quickly now save it so here we can see that here you can see this space and that space is coming from this mb2 so similarly for this text also i need to provide some spacing at the bottom so i will provide margin button too now after that we have the button and that i can create by providing this anchor tag and here the text will be sign up so here we can see that now we need to change it to look like a button and for that we can provide some classes here and let's start with the border so let's provide border 2 pixel then i will provide border color white and it will be rounded that means it will have rounded corners to it so i can provide rounded and here we can see for the rounded we have 4 pixel rounded corner but i don't want that i want to provide it is completely rounded at the edges so i can provide rounded full now let's see so here it is looking kind of like a button it is taking a shape now we need to provide some padding and i will provide horizontal and vertical so for horizontal i will provide padding 12 so that means it is applying to the left and right of the section now at the top and bottom let's provide two point padding which means eight pixel after saving it here we can see the button is looking good but we don't have the spacing available here but i have already provided that in this paragraph but it is not considering that and to make it consider that i need to provide this inline block property that means it is display inline block css now save it now after that here we can see it has some spacing but let's see so here it has much more space in between these two sections so i will provide 10 point of the merging button so this anchor tag is looking like a button but i want to provide some hover effect to it so whenever we hover over to this button that time it should have different color and before that i also want to provide a bolder font here and i am going to use font semi bold so now it is looking good now let's provide the hover effect to it and for that let's provide the hover colon then we can specify the styling for this state for over effect i want to provide background color white to it by default it is having green background color but when we will hover over it that time it will be changed to white background color and the text will be green so let's provide that also here here again we need to provide hover colon then text white color now save it let's hover over it okay it is text white let's change it to text screen so it will be text screen 500 now let's see so it is looking good right so this section has been completed now we need to focus into this section where we have much more complex things let's focus into it so first we need to provide this logo the company name text so here within this div get rid of this paragraph tag and let's create another div and within this div let's provide some classes and this will be for the text first i want to align this text at the left hand side so i will provide text left which is text align left and i want to provide bold font now let's provide the text company name now save it so here we can see the text but this company needs to be in green color and that i can do by providing span tag and let's close it here and for this span tag class let's provide green color so it will be text screen 500 now save it so here we can see it is looking perfect now after this let's create another div and for this div let's provide padding and i will provide padding vertically that means at the top and the bottom and it will be adding 10 point which means 40 pixel now we need to provide the heading and that heading is sign into account now let's provide some styling to it so here for the class name of it i can provide text 3 xl that means 30 pixel and it will be font bold and these things are similar to this heading now we have different colors for it it will be text green 500 now it's looking good and along with it i want to provide some margin bottom to it so that will be similar to this and it will have similar underline like it which is having here so it will have similar thing here but the color will be changed for this thing and that will be after this instead of water white it will be border green 500 so it's looking good now after it we have this social login sections so we will have different social media accounts present and all of it in circular shape like the icons are the normal icon but these are within some circle so we need to create this it is a border which is put circle and these things are sitting beside each other let me create a div which will wrap this section so it will be social login section and for the class of it let's provide flex and when we will provide display flex that time it will have by default flex direction row and by having this the child element of the strip will sit beside each other after providing this flex we can provide justify center to make these contents align in center and then i will provide some margin vertically so at the top and the bottom of this complete section so our wrapper div has been created now within this let's create the child element and these child elements will be anchor tag because we should be able to click on those icons and that will do some tasks like login by using that social media after that within this we need to provide the icon and that icon we can provide by importing react icons and here we can see we can import it like this import from react icon slash fa fa means font awesome so here we can see we have different icons library present we have font icon we have ion icons we have material design icons all of these so we can use that and initially here we are going to use font awesome icon so that means it will be similar to this react icon slash fa so let's import it here react icons slash fa and here we are going to import ffs book f then we will require linkedin icon and also we need google icon as well so i have imported this three now we can use it here and first we have facebook icon so i have provided that let's see here we have the facebook icon and i want to provide some class here to change the size of the icon i want to provide this small font size which is 14 pixel now save it so here it is little bit smaller now and for this anchor tag now let's create that circle and that i can do by providing a border of 2 pixel then provide the border color and that will be border color gray and i will provide 200 point shade of it it will have rounded full and let's provide some padding to it and i will provide some margin which will be horizontally that means left and right so it is mx one so that means four pixel at the left and the right now save it so here we can see that icon now let's copy it and these things are looking good now we need to change the icons after the facebook we have linkedin and then we have google so all good here now after this section we have this text as well after the social login section we can have a paragraph and here let's provide that text and here we have some gray color right now it is dark color let's change the color here and that we can do by providing the gray color here that will be text clay 100 okay we cannot see it so let's increase it now it is good and let's provide some margin here okay so it is looking good now after this here we can see we have this login section now let's create it for a single input field we can see we have this gray background color within this we have this icon and beside this icon we have this input field box where we can actually input our data let's first create a wrapper div which will wrap complete section let's provide some class for this rapper div and here it will be flex and this time i want to provide flex direction column that's why i will provide flex call and i want to align items within it in center so i will use this item center which means align item center now after that within this let's create a single input field so it will be a div and first thing this div have a background color which is a gray color of 100 it has some width to it now let's provide some padding here which is 8 pixel so here we can see that box has been created now we need to provide the icon here and that icon will be fa envelope so that is this icon okay we will not use this icon it will be fa reg envelope okay now it's looking good but now we need to change the color of it so let's provide some class here okay it's showing some error okay i need to close the quotation so it's looking good now after this icon i need to provide the input field and for this input field type it will be email type for the name also i will provide email let's provide a placeholder so here we can see that input field now we need to align these things properly so first for this wrapper div which will be actually looking like the input field right now we can see this is our distinct section which is the input field but we want to make it like this in which we cannot distinguish input field this complete section is looking like an input field so we need to make that and for that here for this wrapper div i will provide flex and it will be items center so now these things are positioned beside each other and now i want to provide some spacing in between these two things so if i provide some margin right to this icon that will do the work so i have provided this and for this input field let's provide some classes and first we need to change the background color of it which is similar to the background color of the wrapper div now after saving it here we can see it is looking like a single input field but if we focus into it that time we can see we have some outline to it i don't want that to get rid of that let's provide outline none and i want to provide some text size of it so here it's looking good now if i inspect it then we can see this input field is expanding to this part only after that we don't have the cursor here we have the cursor but i want to expand it to throughout this wrapper div and that i can do by providing flex 1 now save it after that let's see it has been expanded right so now close it here we can see it has some extra height to it but here we don't have that for that i can provide this margin to every part of this icon so that means top bottom left and right now after that here we can see it has taken the height properly now after that we can copy this section again to have another input field but now here we can see we don't have any spacing in between these two so we need to provide some margin to these sections so after this item center i can provide margin bottom three so now it's looking good and for this one it will be password similarly i want to change the name of it and the placeholder of it so it has been changed right now i want to change the icon of it and for that i am going to use material design icon so let's import that from react icon and here it will be md and this time it will be md lock outline so let's use that here okay so it has been changed now after that we have left these three things so for the remember me and forgot password these two things will be within a section and i'm creating this section with this tip i will provide flex and it will have the same width of this wrapper section which is this section that is the width 64 and it will have some margin bottom to it now within it let's provide the label for the level class name i will provide flex item center to center these things properly and i will provide text access so that is the font size which is 12 pixel and in between this level let's provide the input type check box and let's provide a name so now here we can see it but in between these things i want to provide some spacing and i can provide that by providing some margin right to it and that i can provide by this mr1 okay i need to close it so now it's looking good now after that we have the forward password text and that will be within anchor tag now let's change the text size of it so here it will be text access now i need to push this forward password at the right hand side of this section and that i can do by providing justify between property in this wrapper div now save it so here it has been post at the right now after that we need to create the button and that we need to create after this section and the button will be similar to this sign up button so i can copy it from here and use it here and here we need to change the color of it so instead of border white it will be border green now save it and similarly the text needs to be changed into green color as well so it will be text green 500 now for the hover state i want to change it to bg green 500 and text will be white now save it let's see so it's working perfectly well right so now it's looking exactly like this so we have completed our login page ui with tailwind css properly so this is the tutorial guys i hope you have learned something new from this tutorial if you do so then hit the like button subscribe to my channel for more tutorials like this and let me know by commenting down below if you have any kind of suggestion for me then also let me know and don't forget to share this tutorial with your friends and colleagues and i will see you guys in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 29,308

Keywords: tailwind css tutorial, login page in react js, login page in next js, login page in next js with tailwind css, login page in react with tailwind css, login page ui in react, login page ui in next js, tailwind css for beginners, tailwind css react tutorial, tailwind css react for beginners, tailwind css next js tutorial, tailwind css next js setup, install tailwind css nextjs, tailwind css next js

Id: G1edEyAnEZY

Length: 31min 12sec (1872 seconds)

Published: Tue Nov 16 2021