Tutorial React Login with Tailwind CSS | 2022

hey what's up guys welcome to my channel again here beto madana with another video and in this video we are going to learn how to create this beautiful login with react and tailwind css and here i have a little demo of what we will be building today as you can see it's a simple login but we have this cool screen division of half and half on the left side we have our form and on the right side we have this sphere with a nice blur effect and if i drag my window we can see that our login is completely responsive and it looks good for mobile as for desktop this tutorial is perfect for those who want to get more familiar with dell and css or want to learn how to do a little more complicated things like animations gradients blur effects etc for example here when i do hover over these buttons and they have this cool animation and when i press them we have another animation where they get smaller this video also is going to help you to get more fluent when styling when styling with tailwind css so if you want to learn how to create this cool project stick to the end of the video please give it a like and subscribe if you haven't already and now let's start before we start guys remember that uh the resources and code for this tutorial it's available for you completely free in my platform called with veto i'm gonna leave the link in the description below you can go to projects and see the project that we are doing today so you can click on it scroll down and you'll find some information about the tools we are using for this specific project and we also have the comments that we are using to install dependencies and all that and if you scroll all the way down you you will find the links for youtube download zip and github alright now that you know that we can start to create our app today we are using uh react so we are going to start our project using create react app if you don't have create react app you in your computer you need to run the following command that is installed flag g create react app i already have it in style so i'm just going to run create react app and the name for my app is login tailwind tutorial tutorial perfect so now we just need to wait for the project to be ready once it's ready we can now access the carpet that we just create the folder and now i'm going to run the command code dot to open it on visual studio and we can also say here and npm start to start our development server and as you can see our server is running now in localhost 3000 and visual studio is open here you can see that my project is running this is how a new react app looks and i'm going to put it here on the right side of my screen i'm going to drag this a little and just like that perfect so now in this site i'm going to go to my app file and here we can uh start deleting some stuff that we don't need that comes by default we when we create our app so i'm going to start for delete these two imports and i'm i'm also going to delete this app css because because we are not going to be using it and i'm going to delete pretty much all of these app components and as well as a class of this dip and now here we can do like hello react for example just to see what happens and i'm going to reload the the app and as you can see we have we have our hello react so it means that is working perfect so now i'm just going to open my terminal and we are going to style table in css so we can go to code with beto and just copy the command to install tailwind in our project i'm going to paste it and hit enter that was quick so after that we just need to run the command and npx tailwind in need flag p uh what this is going to do it's going to create two files of configuration for tailwind css and in our project so now i'm hitting enter and as you can see on this side we can see our two new files that we just created with the command that we just run and here in tailwind.config.js we need to do some changes and i'm going to go back here to code with beto i'm just going to copy this configuration basically we are saying today when css that we want to apply the styles in this content inside of our folder source and four files with javascript and typescript okay so now we can save that and close those windows and now last thing that we need to do is to copy this directives and paste it in our index css we now can save and that's pretty much all we need to do to configure tailwind css in our project so i'm going to go back to my react app here and now we can just start writing styling css styles okay so i'm going to add a class name to this dip and i'm going to say text slash text 5 xl and if i reload nothing happens and that's because we just create these two new files of configuration and after we do that we have to restart our server our development server so i'm going to open my terminal i'm going to hit ctrl c to stop the server i'm going to clear my window and run the command mpm start again to restart our server okay so now it's running again and as you can see in my window we have hello react running with uh the text 5 xl and i can say also like take center just to see if i had if i hit save and the style is applying to my uh to my div and my text inside that dip okay what i'm gonna do now is i'm going to create a new folder called components and inside this folder i'm going to create a file called form dot js and this is going to be our form and here we're going to have our inputs for the email and password and all that stuff so now i'm gonna go to my new file form and i'm going to start by importing old as react from react like that and i'm just going to export default this component so i'm going to say export default function form and this is going to return just for now i'm just going to say a div and inside this div i'm going to say hello form okay i'm going to hit save and now we can go to our app.js file i'm gonna do this a little bigger so you can see when i close my terminal and now we go to our app file and here we can just um write a form the form that we just create and as you can see up here it's automatically import and we can see our text that says hello form on this side and funny thing is that um the styles that has the parent thief are applying as well as the child form and so i'm just going to delete it and we can see that the styles won't apply in either of those texts that we have inside that div okay so uh here in our index css we can apply styles that are going to apply globally to our application so i'm going to set here my background it's a perfect uh place to set my background of my application and i'm going to say background equal to a f1 f1 f1 that is like a white but not too white it's like a gray if i hit save you can see on the right side that we got this new background for our entire application so now we can close our index css and we can start working here i'm going to start by saying flex because we want to have our components from left to right right we're going to have two sides i'm going to say with full and edge screen height screen it's going to take the height of the screen and now i'm going to put two dips one d for our form and the other div is going to be for the right side of our uh screen that is going to be the sphere with the blur effect right so inside this div um i'm going to create a class name inside the tip of my form and i'm gonna say with full and actually before i apply this style i i forgot to tell you guys that when we are applying styles with tailwind css we want to uh make our design responsive right so when we start applying our styles we want to start styling for mobile so for example here i have my my window like for mobile because it's too small and when we are applying a tailwind class names we want to apply first for mobile so when we have our viewing model we want to say that we want to be the width full but when we are in desktop for example that is mobile and this is desktop right so when we are in desktop we want to take half of the width but when it's a phone or um screen size of a phone we want to take a full full width okay so we can say here large with one medium okay and um i'm going to say here flakes as well and i'm going to um say item center and justify center okay if i hit save now we can see that we have our hello form in the center of the screen and and and it's taking with full okay and if i um and if i drive my window to be large size we can see that when it's large size is just it's only taking half of the width so now we can say in our div in our other diff we are going to apply a background grade 200 and um we we can't see that because we don't have anything inside that div and so so that i'm going to add here another class that is going to be um hiding because when it's um for mobile we don't want to um we don't want this div to appear in our screen right so we are going to start in hiding and when the screen is large we are going to say flex because we want to see this diff and only when the screen is large so i'm going to say edge full to take the the height full of the screen and i'm going to say a hello inside of this div so we can see the background in and all the styles that we are applying it's taking height full as you can see and the background is a little uh more um gray than our left side okay so now um i'm going to leave my window in the large size and here i'm going to apply a couple of styles okay i'm going to say item center and justify center as well if i hit save now we can see that our hello it's going down to the middle of the window and i'm going to apply a class name to this uh div that i just created i'm going to close attack like this and i'm going to say inside this div width equal to 60 and this div is going to be our sphere so we are going to have 60 by 60 in our sphere and now i'm going to say background a and this background is going to be a gradient so we can say background gradient 2 to top right okay so we want our colors to go from bottom left to top right and now we can specify the first color after this this class we can say from and we can say we can specify the color so i'm going to say from violet 500 and we can after that say the color or specify the color that we want to end this gradient so i'm going to say 2 ping 500 as well so if i hit save now we can see that we have this beautiful gradient square square gradient and we want a circle right we want we want us first so we can say around the full when i want to add rounded full here and i hit save now and we can see that we have our sphere pretty cool right so um we want this side to decide to take a half of the window right when it's large so we can say window i mean with um one medium and there we have it guys and our um our screen is starting to look cool and if i um stretch it we can see that our div it's disappearing when we have a screen small for mobile for example and when it's large it it's a half of the width okay so now i'm going to create another div and i'm going to say class name equal to and this is going to be our blur and we want our blur to take the foot the full width of the half size right and i'm going to say height half and background white with 10 with 10 percent of opacity so if i as you can see on the right side we can see that our div is um it's in the same layer of our sphere and i apply and i just apply the the backdrop effect to have this blur effect so we want we want it over or sphere so we can say or we can give it a position absolute if i hit save now we can see that now it's over our div over our sphere and when we add absolute to this div we want to add um another class to this the parent and we're gonna set relative when we are saying relative we are saying that this absolute it's going to refer to this div relative to a position itself so for example if i want to this if i want this div to be at the bottom of the screen it's go i'm going to say bottoms here right but this dip is going to position at the um at the end or all the way down of the parent that is relative and as you can see here after after i add bottom zero it's a setting um at the bottom of the parenthesis relative okay and that's pretty much i think for this side of the um of the screen and i can just add this animation to the to the sphere and if you don't like this animation we can add like bounce for example that's my favorite i think that one looks cool in this specific screen and that's it guys you can of course play with the values of the animations and all that and um i think we just finished the right side of our screen so now uh let's start working in our form okay so i'm just going to um go to my form here and i'm gonna um make my windows small so we can start um styling for mobile like i said and i'm going to delete this that we are not gonna need anymore and first of all i'm going to start with my title that is welcome back and what i like to do guys is to start um doing my html and then apply the styles right so here we're gonna do the p that is welcome back please enter your information your details and if i hit save we can see that we are seeing our html on the window perfect so um the next thing that we are going to need to do here is start by creating our um inputs so each input is going to be inside a dip inside a container tip and inside this diff we can just say div another div that is going to contain our label for the input and this label is going to be the email and you can see there we have our label and yeah i'm gonna do input inside this same div right and this input i'm just going to give it a a class name of course uh but for now uh i'm not gonna apply any class name i'm just gonna apply a placeholder and the placeholder for this input is gonna be entered your email like that and as you can see on the right side we can see our input even even um it it looks white wider than the than the background so now we can just copy this div and paste it down here and just change email for password like so like password and there we have it on the right side i'm going to change this email for password as well password and we can add and for this and type of input we can say that we want to be password that means that when we write in this input we are not going to see the text that we are entering so i think that that's all for our inputs now down here we can just start adding our another div that is gonna contain um two buttons forgot password and and a checkbox for terms and conditions so i'm gonna create another div inside this div and we can say input but the type of this input is gonna be a checkbox so i'm gonna say type equal to checkbox and down here we can say a label and we we can say remember for 30 days in this case you can of course do put the labels that you want and there we have it or checkbox but uh a cool thing that i just learned a couple days ago guys is that we if you want to um click on the text on the label of this input we can add this id and say for example remember and to this label we can add the property for and add the id of the input that is remember and now if we click on the text that is remember for 30 days our checkbox is going to be checked which is pretty cool so we have that looking good and that's a good practice of html of course now we can add our next button i'm gonna do this a little bigger so you can see you can see and okay we have that div and we're going to create an uh now a button that is going to say forgot password and it's going to be on the right side of this remember for 30 days but for now uh we are just going to leave it like that and i think we have plenty of html now we can start adding some styles so i'm gonna start by adding some styles to this title h1 so i'm going to say class name equal to and i'm going to start by adding the class text 5xl to make it bigger and i'm going to zoom out a little bit so we can see how it's going to look actually without zooming now i'm going to say font uh semivolt to make it uh to make the phone bolt semibolt and i think that's it for our title i'm going to go now to my p tag and i'm going to add a class name that is going to say font medium and a text of the size large okay if i hit save now we can see that our text is looking good on the right side and i'm going to add a text text grade 500 to make it gray because it's a subtitle and a margin top of four just to have this this nice separation between this p and the title and now we can start working on the div that contains all these inputs and for this we are going to say margin top as well and we want to add eight for the margin top to have that nice separation between those items and we can start working on our email inputs so i'm gonna say class name equal to text large just to make it a little bigger and font medium as well and for the inputs we're gonna save with full which means that it's gonna take um the whole width and it's gonna push our label down i mean our label up in this case we're gonna have email up and the input is gonna take the full width um at the bottom of the email label and i'm going to say border 2 and i'm going to add border gray 100 and as you can see it's taking now with full i'm going to say rounded xl to have it to have this knife rounded and i'm gonna add a padding of four nice now now it looks like an input i'm gonna say margin top of one just to have a little separation between our email and our input and i'm going to say here background transparent so we don't have that white uh white background that comes by default and our uh screen is starting to look good huh okay so in this case we don't want to have all this all this card or all this form with a background transparent we want to to have it with a background white so i'm going to add a background white to the div container of the form and yeah as you can see of this size it looks this this way but we can add some padding to make it look good so i'm going to say p in the x axis and i'm going to say 10 p y of 20 and it's starting to look better i'm just going to make it rounded so i'm going to say rounded we can say 3xl and it's starting to look like a card like a nice input i'm going to say border 2 to add a little border and i'm going to say border gray of of 200 and now now we can keep working down here so for our password i'm just going to copy this input that i already have and i'm going to do the same that i did before that is going to change the email for password and down here email for password and that's it we have our two inputs looking good so now we can start working on the remember for 30 day size so i'm gonna add a class name to this label and i'm gonna say margin left of two just to have this little separation between the checkbox and the label and i'm gonna say font medium and i'm going to set text base that is the default size for a font and i'm going to do the same for my forgot password just that i'm going to have a different color in this case i'm going to say font medium and i'm going to say font violet 500 that is our primary color we could say that it's our primary because it's the same color r as our sphere so it's looking good perfect so now we want these two items uh to be from left to right so we can add a flakes to this div container i'm gonna say first i'm gonna say margin top of eight and then i'm gonna say flicks to have them from left to right and i'm gonna justify them between perfect now it's looking good i'm just gonna add item center just to make sure that that the items are centered perfect now we can start working in our buttons so down here i'm going to start by adding another div okay and this div is going to contain our two buttons so i'm going to say just button like this and for this button i'm gonna say sign in and the other button is gonna say sign in but with google so we are going to have the option to sign in with google and now um we can just start by adding a class name to the div container of these two buttons and i'm going to say class name margin top of 8 as well just to keep the same distance and have this harmony look and i'm going to say flex but this time we don't want the items from left to right so we can say flex call to have them on the form of a column and i'm going to add a gap that it that means a separation on the y-axis of four perfect we have our buttons down there and i'm going to start adding a style to this sign in button so i'm going to say background violet 500 i'm going to add a padding first i'm going to say text white of course we want the text white and we want the text to be bold in this case so i'm going to say text large and tag and font bold it's not text it's font both perfect so now it's looking good or button and we can add a padding now just to have a more space so i'm gonna go all the way here and i'm gonna say padding on y-axis of four we have that nice um that nice height on the bottom uh but you know i'm thinking that for maybe too much maybe we can do three for now i'm gonna add as well a rounded xl to have that nice rounded and i'm going to change this 443 and now we have this nice button and perfect so now if i go here uh even our even though our button looks good we don't have any feedback for example when we hover over the button or when we press it nothing happens so what we can do with d1 css is we can add these properties called um active for example and here we can apply a style when the with the button is active so i'm going to say scale and we can specify here the size that we want to scale so i want to make it smaller when it's active so i'm going to say 0.98 and now if i come here and press it we can see that it's getting smaller every time i press it and um after that we can say as well active and we can have a duration for example if we want so um it it doesn't um it's hard to see us uh to by eye but we have a duration of 75 and we can add as well a transition just to make it uh just to make it look sm smoother so we can say transition old and now we have a better um better animation when we press our button but i also i also want an animation when i'm making a hover so we can say hover and when i wa when i have my mouse up hover this button i want to make it bigger so i'm going to say scale but this time it's going to be 1.01 if i hit save and i go to this side um i'm going to add as well an ec in in easy out okay so this is gonna make it smoother as well and okay so now if i go here we can see that when i do hover it's getting bigger and when i press it it's getting smaller which makes it just which make it look super good and it's a better user experience responsive user experience so now we can start working in our sign in with google and for designing with google i'm going to paste an svg that i already have and don't worry if you want to have this svg you can just go to code with beto and grab the svg from the code and if i hit save now we can see that we have our google svg on that side so we are going to take this button and add a class name flex because we wanted to from left to right and we can say item center and justify center perfect now we can just add a gap maybe yes gap of two to have this nice separation between those items and we can just copy the same animation from active and hover states from our button up here and i'm just going to go here and paste it like that if i hit save now go to my button we have those same uh cool animations in our sign in with google button perfect so now we can just add some a couple of styles here just to make it look better i'm gonna say flex border of two and this border is gonna be of color uh gray two hundred a hundred sorry if i hit save we can see that um that border and i'm gonna add a padding of course padding of three as well just to have the same size in all of them padding on the axis y and perfect so we just need to add the style rounded so i'm going to say rounded 3 xlr xl yes excel perfect perfect nice it's looking good now if i go here we can see that our uh login it's almost finished and it's looking good completely responsive and when we create when we have a large screen we have this look and when we are on mobile we can have only the login screen only the login input so now lastly we want to add to more text at the bottom and those texts are going to be inside this div and inside of p tag and it's going to say don't have an account and we're going to give the option to sign in so we're going to need a button as well and i'm going to say sign up like that okay so now we can say class name flex okay first margin top x to have that same separation flex because we want them from left to right and justify center and is not align its item center yes now we can just add some style to this class name b to this p tag class name we're gonna say font medium like that and we're gonna say text base because we want uh the minimum size available okay so now we can say class name takes violet 500 and i'm gonna make this uh text a little um a little um both so i'm gonna say medium and we can say margin left of 2 just to have that nice separation and i guess that's pretty much it guys this would be our final look of this screen and i hope you like this tutorial guys i hope you learned something don't forget that you can go to code with beto to get all the resources and code for this video if you enjoyed this video and if you learned something please give it a like and subscribe and i'll see you guys in the next video you

Channel: Code with Beto

Views: 13,352

Keywords: React, tailwind, tailwindcss, react, login, tutorial, style, beginners

Id: Rp9LgClUIYc

Length: 36min 40sec (2200 seconds)

Published: Wed May 18 2022