How To Make Signup Page Using Tailwind | Create Registration Form Using Tailwind CSS For Beginners

hello everyone in this video i'm going to show you how to design a register page by using tailwind i have designed a register page on figma i will put the link of these files in the description alright the next step open google chrome and search for v.js we are going to use vjs to set up tailwind projects click on get start and then scroll down to the bottom we have to use this command to create feed projects copy it okay press shift on keyboard and right click and then open powershell paste the command over here hit enter okay it will ask you the project's name i'm going to name it sample tailwind register you can name it whatever you want okay hit enter and then i'm going to choose vanilla and hit enter then i'm going to cd to get access to the folder cd tailwind register okay we are in the folder right now the next command that we have to do is to run npm install and then npm run dev so i'm going to open this folder with a visual studio code okay then i type code dot okay all right yes i trust and then let's open new terminal and you can type this command npm install to download files npm install then it will create a node modules over here for you the next step you have to do is to run web application by typing npm run dev npm run dev okay we have set up this rvs with vanilla.js next we are going to tailwindcss.com okay we are going to install tailwind in our project click on framework guides and then click on feed and then you have to copy this command and execute it in to your project okay let's go to your projects we have to stop uh this one ctrl c and then then paste the command over here after the installation is done you have to copy this command and execute in the project okay paste it over here hit enter it will create two files the first one is tailwind configs dot c js and the second one is suppose css config dot c js so the next step you have to do you have to add files directory in content in tailwind config.js okay you go to tailwind configs over here so because html and main.js is in the main directory we can put it like this dot curry brace html comma js save okay the next step you need to add this one in the main css files which is this file styles.css you can remove all css from here because it come with feed okay paste is over here save okay the next step you have to include css in javascript files so in main javascript it's already include styles.css you can remove other javascript because it's come via beat you just remove it and then you can remove a caltha.js as well and you can remove these files as well and the next step you have to run npm run dev again okay let's run npm run dev let's open the browser again with this url you will get nothing right now and then let's test if tailwind is installed successfully okay i will create div tag over here and then i put hello tailwind then i put class bg red 500 okay save okay you will see that we've installed tailwind successfully the next step we will start design a register page let's go to figma and you will see when you take a look at over here you will see the background color of the register page is purple over here okay you will see that we use linear i use linear as a background color so this the background color start with this color and end with this color and it's aligned in this angle i will remove this one and let me remove this div as well so i will use min height screen so min high screen is a min high 100 vh i will put styles over here and then i will put background image and i will use linear guardians the degree i will use 115 degree let's take a look at the color i will copy this color because it starts with this color then i place this over here and the second color is this color i will copy this color and paste it over here save okay let's take a look at our website okay you have like uh background color right now the next step we will start uh using container okay i will use container over here div class container and then make a center mx auto for example if i type text over here and then i put bg white okay save and when i take a look at the website you will see and when you zoom out you will see this box is at the center over here i can use like py40 so you will see padding y40 padding top and bottom 40 you will see this box move down a little bit okay the next step i will remove this background color and i will create another div inside here div okay we put class over here i will put the width of this box to be 10 12. eight well i think okay eight well and then background color bg white and rowdy excel let me put some text over here save you will see we get like routed so i need this one to be at the center so i put mx auto over here a max auto and when you take a look at here you will see this box has shadow so we can put shadow over here shadow lg okay let's take a look it has shadow and i will determine overflow hidden okay i will create two div inside here okay the first div is the image and the second div is content is include uh input box over here okay we have two div over here so this div i will put image in it and this div i will put input box in it so let me put uh something over here like h2 register and this one is welcome let's copy this and over here is one welcome and let me put div over here and let me put p tag over here and let me copy the text here okay and put this over here okay we get something like this you will see that uh this welcome should be half of this box right so i can do it by put class and put with over here to be one half and this box should be one half as well class with one half you see it's covered only half of the box okay i want this one to sit side by side so i put flakes in the palin div which is this div see i put flakes over here you will see it says side by side so i want background image in this box in the first box so i put styles over there over here i put style background image so url and let me create a folder over here and name it images okay let me copy the image i have image on desktop okay let me put this over here so url and then image digital background image you will see the background image over here let's change this text to be white okay let's put class white and this one class text white sorry this should be text white save okay it's look good now let's start with this div so this div should have padding so i'm going to use padding top and bottom to be 16 and padding x to be 12 padding x is left and right and then register tag should be bigger put like text 3xl and then i'm going to put margin bottom 4. okay this look good next we need this tag i will copy this tag and then create p tags over here put the text over here then i put class over here mb should be or okay okay look good it's look really similar see [Music] the next step i'm going to create a form for register form action is nothing then i create a div i should create this input and this input right so i create a div uh i will create two input input type text so placeholder is first name okay we should get input box over here see so i will use class and then i will determine border and border color should be gray 400 and padding top and bottom should be one and padding left and right should be two i save and i will copy this input to create another input so surname all right see this is this look good but it's not this side by side so i will determine this one to be class grid and then i use two column grid column two and i need gap to be five this look good see even when i zoom in it still sits side by side okay i'm going to create another div over here and class matching top five and let me copy this one and put this over here and save it and for this one i'm going to use email see this is email i want this input box with to be full so i put with full over here with full save it it is full right now next what we need we need password and confirm password so i just copy this div and paste this down over here okay change this one to be password and this should be password okay and this should be password and this is password i'll confirm password save okay this look good uh the next step i need to create this checkbox and this text so i'm going to copy this text and let me create a div over here so div class margin top five okay let me put input checks box over here okay input type checks box name i will remove this one and put class over here and then i just put border border gray 400 okay then let me create span and paste the text that i just copied for this one i will put a link for term of use and another link for privacy policy i put class over here let me put href over here hash this one too let me put class over here text should be purple 500 and font should be semi-bowl let me copy these classes and paste this over here as well because it looks similar okay let's take a look alright the next step we need to create a button over here register now so let me create div over here and then put class empty five margin top five all right let me put button over here and then put register now okay put class over here we will style it so we need button to be full with this button is full width so we need background color to be purple 500 and padding y should be 3 padding top and bottom and tag should be at center and then text color should be white save see all right this size look good and we will styles this side so i want welcome text to be bigger so i go back to welcome tax and i put tax 3xl it should be big right now and i will put margin button to be three all right let's take a look it's look good right now i need this text to be at the center so i put flex in the pairing so i put flex and then i put a flag column and then i put item center okay and put justify center as well save let's take a look okay this look good then i will put like padding 12. okay this look good so back out should not repeat okay i will put like over here over here i will put bg no repeat and bg cover and bg center okay the position of background image all right this look good okay we will change this one to be purple here you see it's purple so [Music] we go to dash tags and then learn more over here we put a tag because it's a link so we put is over here and then put href hash and then class we put text purple 500 and then font semi bow save okay this look good as you see this is not responsive so we are going to make is responsive okay when is it small like this when it is mobile i want this one this box to be on top of register so i go to flex over here so if is mobile i'm going to use fake column and if it's last screen i'm going to use this fixed row okay let's save so save you see very small screen i want this box to be full width over here we see uh this box like this is for large screen so we put lg and for small we put full width okay this look good and register box we have to make it full with in mobile screen this is register box right so for mobile screen we want is full width when small screen when last screen v1 is one half okay this is responsive like now it looks so good and then make inspect and over here okay let's see see this is for mobile for mobile i want this box to be bigger let's go back here so with well like so this is for large screen and for small screen so because mobile first so we put mobile with nothing with should be 10 12 save okay see this block is bigger right now okay everything is responsive and it looks so good this is all about this video feel free to click like and subscribe thank you so much for watching and don't forget to comment down below

Channel: Devtamin

Views: 23,209

Keywords: Signup Page, Register Page, Signup Form, Registration Form, tailwindcss, Tailwind, Tailwindcss, tailwind, frontend, developer, web design, web developer, design login form, vite tailwind, vite tailwindcss, install tailwind, install vite, install tailwindcss, Login form, learn tailwindcss, learn tailwind, tailwind tutorial, hand-on tailwind, Design Signup Page, web development, css framework, UI, UI Design, UX/UI, CSS, html, programming, create websitee, design website, code

Id: TORSyJN9sOg

Length: 18min 51sec (1131 seconds)

Published: Tue Aug 30 2022