Build a React JS Website with Tailwind CSS - Beginner Tutorial Learning Tailwind CSS

what is up guys clint here back with another video and in today's video i'm going to show you how i built this react js right in application i'm really excited basically it's like a cloud management front-end app here and really cool we're going to be building it with tailwind css uh there will be no custom css in here i'm really having a great time learning tale when it's super super powerful and there's nothing i haven't been able to do until when i can't do in custom css so this is what we're building here like i said cloud management front end react js application here we're going to be using smooth scroll so this is our fixed uh nap bar here at the top i have a nice header here using the flexbox and grid system here we click this we're gonna get a nice scroll down to the about section here boom there we go looking nice and then the support boom we're gonna show you how to do an overlay and tailwind css with uh these cards here as well put a little nice border around their icons where i'm using hero icons or react icons here and uh very very nice so scrolling down to the platforms there we go using the grid system on this here and then our pricing here at the bottom very nice here we show you how to offset our margins here so everything is looking nice and everything we're going to show you how you get a nice hover effect boom there you go we're going to be reusing some properties here until when i'm going to show you how to set that up as well and let's just drag this down to a mobile device so you can see boom and there we go i'm like a iphone xr here everything is looking nice i have our nice drop down menu boom there it goes scrolls down everything is looking clean you guys so i'm going to show you how to do this in react.js using tailwind css from a complete blank slate without further ado let's jump in all right we're starting off in vs code here what i'm going to do just a blank code editor i'm going to press the control back tick button to open up my terminal here i'm going to go and change directory here to my desktop now i'm gonna create a react app i'm gonna be using yarn in this video using npm that's fine so i'm just gonna type yarn create space react app and then let's call this here cloud app react go ahead and press enter guys so only take a moment all right says happy hacking that means we're ready to go i'm going to drag over my folder we just created so i'm going to press this control back tick button i'm going to type yarn start to start at my development server it's going to be npm start for using npm right and what i'm going to do i'm just going to this is just going to be our create react app boiler plate right here so everything is working properly i'm going to go in here and just get rid of a few things that we won't be using today so these bottom three files logo report web files setup test app.css the app.test for this little application let's just delete those we're not going to need them so don't worry about these errors here we're actually going to tell us where our errors are it tells us exactly what we need to do so in here let's go ahead and remove this there we go and in our app.js we can go and remove this code here and we'll just delete that there we'll just leave it as an empty fragment and we can close that as well so here we should be able to type some text in here and it should show up on the screen let's just test and make sure hey there you go everything is working i'm gonna go and put this in an h1 actually just so we can test our tailwind there we go so let's go ahead and install tailwind how do we do that well let's go over to the tailwind css website tailwindcss.com i'm going to click get started here in our framework guides because we're using react so here they have next js laravel by knox so they have a lot of things here we're gonna be using the create react app so go ahead and click that so first it's walking us through it from the beginning here so we've already created our our application here so we can go ahead and skip this step so down here we need to install tailwind so go ahead and copy that if you're using um npm i'm using yarn so i'm just going to copy that i'm going to leave that d out of there sometimes i was having issues with that so we can ever close this uh terminal here you could open up a new one here and i'm just going to type yarn add one there we go and then i'm just going to copy this next line down and mpx is different than npme guys so there's no confusion there so go ahead and run that that's going to create our tailwind.config file over here on the left there it is right there boom very very nice now go over here on tail one we're not done yet we need to do a few more things so this content um right here that little array we just need to copy this and put it inside of this content array here boom there we go all right and then our index.css which we left over here we left that one open we deleted the app.css so we're going to go ahead and copy this and it wants us to paste that inside our index.css now we can just delete that boom there we go now we should be up and running here so we might have to close our server here so let's go ahead and and restart here i'm going to close this one and i'm going to press ctrl c so with tailwind css you know with the h1 and react you're going to get this bold uh this bold look here with the tailwind it should just look like plain uh p tag here so our server is closed now let's crank this thing back up that's what's so great about telling you guys it's super super powerful it comes that's why i love it so much it comes as like a like a just base level and you can style everything completely so there hasn't been anything yet there we go that's what we want right there now with our h1 here we can do something given class name and we could say text text we'll say 4 xl boom there it goes and that is font size 2.25 rim so and what this is you guys this uh little pop up here you see that is the intellisense for tailwind i highly highly highly recommend you get that if you're using tailwind css it's a must-have just go over to your plugins here tailwind intellisense and it is super super helpful you guys i could not imagine um working without that so that's how we're gonna do that and say hey how do we center this text we wanted this text to sit here in the center and i don't know what to do that's fine this is how easy it is guys just go over to tailwind here type in search we'll just remove that and we'll say how do we center okay and then you look text we'll say text alignment here you go just click that text left text center and that's all you have to do guys just text center let's see if that works so we can just write text center boom there it is that's how easy tailwind is you guys it's super super powerful you can i mean you don't you can save so much time uh and so much your projects look so much cleaner without all these extra heavy css files so this is so easy you guys all right so let's go ahead and get started here i'm going to delete that boom there we go okay so we're going to be working inside of the source folder you guys so don't worry about these other folders here for now and inside the source folder i'm going to create an assets folder so we're going to keep some images and then also i'm going to create a components folder and for this video i'm just going to go ahead and bring over the images i'm going to be using um i just have two images here um there we go just these two here and you can grab these i'm gonna put a link to this uh my github down in the description below so feel free to just clone it or describe these images if you want to use your own that's cool too so that's what we're going to be doing there now inside our components folder let's go ahead and create our navbar component so i'm going to type navbar.jsx and i'm going to generate a functional component here arrow component just rafce i'm using the react ds7 snippets extension we can actually close that so in here in our app.js what we want to do is bring in our nav bar okay no option to auto import it that's right we're going to import here at the top audience slash fbar there we go there we go perfect that's what we want right there now in here let's go ahead and get rid of that there so since we're using tailwind this is going to be super easy this is a lot of fun you guys so for our navbar what we're going to be using we're going to be using two icons uh let's go ahead and import these here so for hero icons what we need to do i actually need to install this uh install this application here so your hero icons um this is it right here react that's what we want so we're just going to click that there so this is how we install here icons mpmi hero icons for using yarn i'm just going to type yarn ads so let's go and copy that and our other server here yarn add hero icons boom there we go that should install there perfectly already so the icons we're going to be using today we have to import them so i'm going to go to import and open up some curly brackets i'm using menu icon also x icon there we go i'm going to import these from hero icons react slash i believe these are outlined here and let's put our menu icon close that off and see if it displays there's our menu icon that's what we're using that's our hamburger menu quite large that's all right we're going to go ahead and give this c width of 5. there we go perfect that's what i want right there all right so also in here we'll come back and use those in a minute so for our navbar i'm gonna we're gonna be using uh flexbox for our navbar so for this here we wanna use last name this is gonna be a width of the screen so this would be 100 viewport widths there now i'm going to give this height of 80 pixels and if we open up some curly brackets we actually define our own dimensions here you can put pixels rim whatever you like so that's what we're going to do there so remember if you're using tailwind css the the brackets there you can always uh define your custom define your own your own limits there so we also want to do a z index of 10 there we go and we're going to give this easy zinc uh we'll do 200 there we go we want it to be fixed with a drop shadow of large that's right what we want right there perfect now for our next div here for our next div here this is like a container you can think of so let's do this afc a little padding on the x so p x 2 basically p 2 is padding on all sides p x 2 is just going to be on the x axis so the left and right and p y would just be on the y axis so top and bottom so we're using p x 2 here that's what 1 and 2 should be 0.5 rim there we go left and right 0.5 rim very nice so i want this to be flex and justify just divide between and that's going to give us our space between there and we'll do items center item center width full and h full and what that means is the width is 100 as well as the height here so don't worry about this icon here now in here we're going to close this up some just in here what we want to have is our logo or our brand here at the top so what i'm going to do i'm going to create a little dip to house that and i'm just going to put it in an h1 and we'll just say brand there we go and in this div we do last name flex and items center here and for this here we do text 3xl font bold margin right 4 okay just like padding we use margin there and then what we're going to say is sm text for excel so what this sm is is small and what i want to do is um the minimum width and the total css works off the minimum width so what that means is basically in this right here we want text to be uh it's going to be 3xl and then anything over this minimum width will go to 4xl right there so in this mini minimum width is set to 640 pixels and what i can actually do is i can actually bring over i'm going to if i can find this super quick i'm going to bring over tailwind so in our tailwood you don't have to have this in here but what we can do i have this screens i'm just going to put it in here we can actually just replace that extend delete that what's going on here here i'm going to replace this whole thing so um what's going on here we know our plug-ins what's going on it's bugging out here you guys it's fine look i'm gonna close this shouldn't be having any issues with that there make sure everything is working sometimes you just have to restart it you guys sorry about that so in here just so we know the sm is going to refer to 640 pixels and all the way up to the 2xl could be 1536 so just to keep your uh keep that in mind there so going back here so basically we set the text to 3xl unless it gets on a uh over over 640 pixels and then it'll go up a little bit more so we can just test this out here we're gonna index we see our pixels at the top uh right of the screen here and there it is so 630 so boom you can see it changed just subtly there just subtly you can see it kind of change there and that is what we want that's perfect right there go and remove that there so that's what we want right there you guys so we have our brand name here and what we're also going to want here is we're going to be putting our we're going to be putting our menu in here right next to our brand so let's go down here and install our menu here we're gonna use an unordered list with a class name of let's see here we're gonna use so in our class in our list here the way we're going to do this like i said since everything is performed on a minimum with basis what we want to say is actually hidden but anything above we'll do a medium screen which is there it is 768 pixels we want this to display as flex and then inside here we'll have our our list items here okay so home and we'll have about i'm gonna have a support platforms this last one can be uh pricing here boom there we go there we go there we go looking nice there all right and you can't see it right now but if we open up here boom there they are we'll keep it just above so there they are right there we'll leave it like so now like i said with 101 css you can apply styles to all it's super super easy instead of applying um if we wanted each one of these list items to have padding that would get kind of messy so the way we could do that and make it a little bit cleaner is if we go into our index.css here and what we're going to do on our index dot in our oops sorry whoops what we can actually do in our in uh index.css we can add some styling so what we're going to say here at layer base and then here we can add a list item and we'll just say at apply p4 for padding four boom and that will apply to all the list items on our site on our whole application ever we do this so what i'm also going to do is add our button here just while we're in here so for our button what we're going to have is and you can put multiple um you can define multiple items here as well so we're going to say for our buttons we want the text to be white we're going to border and then background to be bd indigo 600 and we'll say we want the border color to be indigo 600 as well and let's add some um go on a new line here oh what happened there what i'm going to do is go on a new line and what i'm going to do is some hover so the way we do hover in cs tailwind type hover keyword there and then we're going to say we want the bg to be transparent when we hover over the background we'll change to transparent and then hover we also want the text to be indigo 600 as well boom there we go and let's give them all a nice rounded rounded medium there will be about six pixels so as a border radius so that's going to be perfect right there now that we have all that knocked out you guys let's go back into our into our nav bar and i'm going to close this down so we can you can see a little bit better here boom so for our nav bar let's go and add in after our ul and this c div here i'm going to create another dip and this is going to be our buttons here our buttons on the far right of the screen so inside here what we're going to have is a with this to be hidden as well and then anything above mediums will display flex heading right board here so in here we're gonna have our two buttons and this one is going to be signed in and we'll copy this one down here and this one can be whoops signed up perfect that's what we want right there now on this first button i actually don't want any any border or any background so i'm gonna say border none bg transparent there we go that's what we're gonna went there perfect and i also want the text to be black on this so this is the only button where i'm adding customizations all the other ones should be perfect i'm going to add a little um probably a little margin right for it as well perfect now for this button let's just add some padding here px uh eight and then we'll do py three boom look a little funky on this here all right all right we're going to go ahead and change this so we want this on medium that's what we want right there it's just displaying a little bit funny there you guys so perfect perfect come back and have a look at that all right now for the next thing after these buttons here we want to create a hamburger menu so for our hamburger menu boom there we're going to go and we want this just to be we only want our hamburger to show if it's underneath uh probably a minimum width here so we'll just type empty hidden which means anything over the medium width which is 768 pixels the button will be hidden now in here let's do our developer or our menu here and this is the menu icon we can actually just copy this down from right here boom there we go i'll save that there we go a nice little button right there perfect perfect so now that we have that let's style our drop down video so for our drop down window the way we're going to do it in here what i'm going to do is just come right here just underneath the container so we're underneath this parent div here and what we want to do here i'm going to give a little space which is easier to follow along with now this is just going to be a ul and we'll give this thing we're going to give this thing a class name of what we want to say is um absolute i'm going to give it a background bg zinc 200 which is the same as our as our nav bar there we're going to take up the full width of the screen and do padding on the left and right going to be 8 pixels all right so let's add some list items in here you know what i'm gonna copy these many ways you can add in a nap where you guys this is how i'm doing it so this is what we want right there perfect i'm going to add a few more little styling in here just to our list items so the way i'm going to get a little tip here and uh in vs code see our cursor there i'm going to press the alt button and then click here and we can actually type on multiple lines here just to speed up all things so i'm gonna give this a class name what border bottom two then border zinc 300 for the color and the width to be full so we're gonna have that take up the full width of the screen that's perfect right there that's what we want right there there we go now we're also going to add in our buttons here so just underneath this list item here div here with our button and this one is going to be sign in next one will be perfect that's what we want right there now let's go ahead and give this one again we aren't going to want any background on this one so bg transparent the text needs to be indigo 600 and we're gonna do padding on the left and right set this to eight you guys there we go py3 and margin bottom margin bottom four and that's what we want right there and for this let's just add our padding here so px8 and py there we go that's what i want right there perfect now let's have these uh stack on top of each other so we're gonna say flex flex column there we go give it a little margin about one rim top and bottom that's what we want right there and this should already have our cover effect look at that you guys already have our hover effect from the styles we threw in our index.css so that's what we want right there that is beautiful you guys now we can't close it yet that's because we don't have any state and what we need to do now is actually add some state so in the top of our nav bar here let's go ahead and put a comma here we're gonna import our use state here at the top and our state is gonna be managed just right in here just underneath our arrow function here so what we can say is say const and we'll say nav and set nav i'm just naming the variables in here this is going to be equal to u-state we're going to set this as a false value on the default and we're also going to have a handle click function again i'm just naming this what i like to name it you can name it anything you'd like and we're going to set this to set nav opposite so we're setting the nav to the opposite of what it currently is set at so right now it's false and when we click our handle click function it's going to set it the opposite false which is true so that's what we want to do right there now how we do this we're going to have to go down here and add an on click button here to our buttons and we'll just do that right here in our menu boom right here so for our menu icon i want to say in here we'll add on click right here so just after the class name doesn't matter really where unclick we want to run the handle click boom there we go so that's what we want right there now we also need to set up some state in here to kind of toggle back and forth between our our state so we're going to do that here at we could do that here on our our button here let's do our button first so what we can actually do we'll just say if f is opposite we're going to use ternary operator so basically we're saying if the opposite of nav is true then we're gonna execute this here actually i don't even think we need these here um else we're gonna execute this here so we actually want our menu icon here first else we're going to display our x icon i believe it was the class name with five just to make sure x icon that's what we want that's perfect right now oh there we go now our we're now hasting our drop down menu here to follow that so let's go down to our let's check out our menu here and what we want to set what we want to set here for our drop down menu boom so inside here i'm actually just going to copy all this right here okay you guys this would be the easiest way to do it what am i do actually let's just cut that out so we have that saved and in here we're going to delete those uh quotes and we're actually going to put some curly brackets we're going to say if nav it's not is not true then we want to display whoops we'll put our text in here we actually want it to be hidden else display absolute there we go so now if we click on this it should drop down yeah there it goes that's perfect that's what we want you guys that is what we want so let's scroll this thing open make sure everything is looking nice there we go everything is looking beautiful there perfect and down on the smaller screen that is what we want you guys that's how powerful tailwind is you guys not a single css file here that's all we have to do right there just for some for some styling that's so easy you guys boom there we go so now let's go ahead and go into our um components folder here and let's start on this hero better here so i'm just going to create plus uh ctrl b here to bring this back up and let's create a hero sorry not a folder we actually just need to create a file in here so hero.jsx and you can write the file extension jsx or js either one's fine i do jsx so i can use my uh my extensions here without um my shortcuts without any configuration here so i'm gonna type rfc to get our functional component now what we're gonna do is we're gonna be using some icons in here boom so these little four icons down here let's go ahead and import those just so we have access to those so let's import our react or sorry hero icons using hero icons now so cloud up load icon there's one of them and we're also going to be using database icon we're using paper airplane icon and server icon there we go and this is going to be from hero icons react and these actually are going to be this solid okay and we're also going to be using an image this image here and that one let's go into our assets folder that is going to be our cyber dash bg there so let's import that one next the way we import images react you have to import and then we're going to name our image and i'm just going to name this image bg image here and from let's go look for it in here it's going to be in our assets folder and it's just called cyber bg this one's a png perfect all right so now we've imported our images and our icons so now we have access to use them here in our code down here so in this outer div what we're going to have let's go ahead and do a class name we're going to have we want this to be width to be full screen we want the height to be uh screen as well 100 vh sorry the width is going to be 100 and the the height is going to be 100 viewport heights here now let's give this a background zinc we'll probably use 200 there we go and we're going to flex flex column justify between there you go and guys i've just been using tailwind just only for a couple weeks now it's super super easy to pick up and the way i so the way i usually create my projects when i was doing custom css i would write all my html first okay you guys i'd write all my html jsx whatever you want it could be completely unstyled and then i would go back and style everything so with with tailwind it's a little bit different for me i'm kind of trying the approach of just styling each div um rather than just creating dips i found it to be a little bit easier uh i'm still kind of playing around with it and going back and forth so many many ways to do things this is just the way i'm doing it here so i just wanted to to clarify that so this next div is going to be kind of like this container here and we want this to display as a grid okay so and like i said we're doing mobile first uh design here you guys so basically mobile first like i said we're designing on the minimum possible uh viewport screen as as as we can here so we want this display automatically it's going to be uh the grid item the grid columns one and anything above medium screen here so 768 we're going to set the grid columns to uh two and then we'll have just our container here max width remember if we open up our curly brackets we can define whatever we like to use and i'm gonna set this to 1240 pixels there we go and then margin auto so and i do like being able to see all my html there and then styling it afterwards so i might do that as well in this video so now we're gonna have let's see here now what we're doing is this left side here we're gonna if we open this back up we're gonna use this side right here is what we're gonna be styling right now so we're gonna have a div here and what we're gonna have in here is our p tag this is a unique sequencing say in production and then we'll have an h1 that says cloud okay so here we are doing it the other way just to see i said i wasn't going to do it but here i am this is our tech brand boom there we go and then we want a button and we'll say get started let's go ahead and import this so we can actually see what we're doing all right there we go auto imported we didn't auto import make sure you get it here at the top so boom there it is you guys from the styling we've done thus far let's go ahead and style this up how we want it here so for this div what we're going to do is let's see blacks flex column then we're going to want to justify to the center boom there we go md so i mean 768 and above we want items start with a width of full padding on the x would be 2 which is 0.5 rim then p y 8 means 2 ram padding on the y axis the top and bottom there we go now for this p tag see if we can do anything here let's do a text 2 xl let's see that is going to be 1.5 rim that looks good there for our h1 let's do py3 it's going to give it about 0.75 padding on the top and bottom text we'll do 5 xl 5xl there we go then anything above 768 let's do text 7xl be massive here and we'll do font bold so boom that's what we want looking good there looking good i'll add this there boom and for our button let's do class p y three and we could have added this you guys we could have added this to uh to our our button and our index.css the paddings but that's okay see how this looks can't even select this thing there we go whoa that looks kind of funky so py3 px this look there you go wanted a little bit bigger though so let's go ahead and change some stuff here um so let's do see anything above small let's make the width 60 percent also do percentages in here but that's what we want there we go and it gets a little bit bigger as the screen is bigger that's perfect that's what what boom there you go and full width at the at the minimum screen there that's perfect right there you guys that's looking really really nice see how easy tailwind css is super great already alrighty so let's go in here and i'm gonna give this a margin real quick as well just one rim top and bottom there we go so now let's do uh the right side which is going to be our image so for our image boom there we go so for our image let's give it a class name well it's not what we want right there so in here we have our image and the way we use our image we don't need quotes there we need some curly brackets and then we're just gonna just pass in our bg image that is literally all we need to do boom there it goes uh react likes to you to get some alt tags you'll throw some some complaints down there if you don't i'm going to throw in a slash there so everything should be looking pretty good we're going to might have to add some more styling to our images here but that's looking i mean really pretty great here boom we'll have to fix a few things but so far so good everything is looking nice so our image see if we can do we're gonna make this take up width full hundred percent there we go perfect okay now see if we need a let me just pesticide awesome awesome extension here you guys for developers i recommend you get it if you do not boom all right everything's looking good there perfect pesticide just shows you all your boxes here so it's super easy to use use it all the time it's really great and if you just reload all the lines go away so that's pesticides are just chrome extension highly recommend you get that it's a lot of fun to use so just outside of our image here this lacks div here should be the very bottom part right here this little box there so we can just add a tip here but we're gonna in this div boom there we go and then we're gonna have a cap tag i'm just gonna say data services there we go then under that we're gonna have another div with uh see we're gonna have a p tag and that is gonna be an icon and then we'll say app security there we go and i'm just going to copy this down so we're going to have four of those whoop that's not one i'm gonna copy this down here that's what we want perfect perfect perfect and it's an app security we're going to want dash dash board design we're going to have cloud data and then we'll have api boom there we go perfect perfect so you can't see it right now that's okay we're gonna come back and style this thing so for this div containing this box at the bottom we're gonna position that as absolute and what i'm going to do i'm going to drop this down to like a mobile mobile device here so you can really see what we're doing so let's go ahead and give this class name this is the data services div here and it is going to be absolute flex flex column it's going to be kind of long here um adding on the y axis is going to be 8 2 rim and then anything on medium we want to say min with anything above mediums to be 700 pixels 760 pixels bottom i want to say negative 5 percent here and i'm going to go ahead and put a little space down here just so you can follow along what i'm doing margin left and right it's going to be one also going to have left m d there we go left one and transform there we go i wanted bg to be zinc 200 give this thing a border and i'm going to say border slate 300 rounded excel text to be center we'll say shadow excel i know that was a lot you guys i'm gonna sorry about that i'll drop that down i just want this to be able to you'll be able to read everything there so let's open this thing up displaying a little funny that's all right so what we're going to want to do here let me have a look at this all right so this div here this is surrounding our p tags and also our icon we're going to come back and add our icon here our hero icon so you know what let's do that right now so what we're going to be using this first one here we can see at the top cloud upload icon so i'm just type cloud upload icon and we're probably going to want to give this and we'll just leave that there for now we can go ahead and add them so the next one is going to be database icon and let's do server icon [Music] and this last one paper airplane icon everything's huge that's right remember i'm going to press this alt button here so we can go ahead and type on multiple lines so we can give this a class name and for this class name we're going to do lex or sorry we're going to give this h h6 there okay that's the size we want and for this p tag i'm going to do the same thing so i can type on all these lines here and we're actually going to get make the p tags as our icon is inside our p tag we can display this as flex okay and then px4 and py2 and let's see here that is looking good looks like we left a little arrow there boom now we want our icons to be that purple color here so for our icon i guess we can go back in here and add we'll say text indigo we'll give it that 600 color and that's what we want and then for over here let's make this um like like a gray color uh so we'll do text slate 500 there we go perfect now in this div here that kind of surrounds everything there we go what we want to do with this one blacks justify between then a flex wrap and padding of one rim on the left and right there we go so it's not looking quite how i want it to look looks like we're missing missing something here but there we go all right so what are we missing let's go have a look i know this can get kind of messy here absolute flexion flex column py8 minimum minimum medium medium minimum weight 760 pixels bottom boom there we go is that what we need our border there we go that i think that was our only issue there we go that's what we want caravan that's a good our i thought we put an uh bottom here on our navbar maybe we're in our hero where's our nav bar [Music] drop shadow ah that's good i just misspelled it it's all boom that's what we want all right everything is looking clean you guys see this is so easy to tell when i'm loving telling you guys this is so simple boom there we go okay so for our hero i think that's it for here you guys what we want to do next is actually our uh the support like trusted by developers across the world that's what we're going to be doing next you guys so let's go in here we can actually just see uh close others so we are going to need our app.js open so in our components folder what we need sorry what we need is let's say we'll say about jsx there we go rafce to get our component here and about import that that's what we want there it is all right you guys hit that like button if you like what we're doing here smash the like button i'd appreciate that trying to grow this this channel here if you have any uh input i'd love to hear your input too um any critiques throw them my way it's hate i can take it too man throw some hate my way it's all good all righty here so for our class names our outer div here you know what let's go let's try it this other way here you guys i'm gonna go through and kind of throw it all together then come back and style it we'll see how it goes that way so for this div here this is kind of like our outermost div the next one is going to be our container here and then after our container would have see another div that's going to hold our h2 here and our h2 is gonna i'm gonna look at this while i build it here so our h2 i'm just gonna copy this here boom trusted by developers all around the world then after that h2 we're going to have a p tag with some lorem text you probably just type lorem 20 or lorem 30 to make it a little quicker and after outside of that diff boom now we want to have this box here so we're going to have another div and and have a div for each box here and inside the dip we're going to have a p tag that says 100 and this one's going to say completion boom there we go now for this we can just copy this down a few times sometimes there next is going to be 24 24 7 boom then delivery this would be 100 100k transactions that's what we want boom there we go there we go let's have a look there we go that's it right there you did that all right so let's uh let's style this thing that's all we need for the that's it so let's just throw in some tailwind you guys so boom we want the width to be full and then we have see margin top and bottom 32 so what is that that should be eight eight rim margin top and bottom just giving some space giving lots of space in between our components here makes everything really really nice and really really clean don't skip out on this on the spaces i'm not a huge design guy decide it's not my thing but i do know the more space probably the better air on the side of more space not less space that's for sure so in here let's do our max width 1240 pixels mx auto there we go all right all right and then in here this is the div for our text here what we want is the text to be center and we want our h2 to have whoa we want our h2 to have a font size or text size of five excel bold boom there we go that looks nice all right and in here let's do text 3xl you guys uh py6 let's give that gray uh there we go there we go let's scroll it down that's what we want all right for our box around here we're going to be using a grid here so let's do grid now once we just display grid here we're going to do grid column one actually i think we think we need to um even declare that it's just going to automatically go to one column but then anything over at the medium break point which is 768 pixels let's do grid columns uh three there we go all right good columns three on anything over that we'll give it a gap one so very very small and then px two there so boom there we go let's open this up should display there we go that's what we want you guys boom there we go all right all right so that looks nice there let's just add i wonder if we can do text center hopefully this will apply to everything in there that's what we want right there perfect so for this div what we can do hold down that alt button again you guys and we're going to give this a border padding of two rim on the top and bottom rounded xl forget what those dimensions are it's probably 12 rounded xl wuff to look again whoops made a little mistake here you guys um last name oh come on there we go i'm just gonna copy this down get over that like i was saying this excel i believe it's about 10 12 pixels there we go it's off a little bit 12 pixels and let's do there we go i'm going to do a shadow excel there we go and that should be it that's perfect right there oh man looking good there nice so let's check this 100 up boom that's what we want to do class name let's do text 6xl but bold and indigo [Music] 600 not bg we just want this to be text so this is the text color oh we had that on there we go nice nice nice and for rp tags here let's hit those boom last name and we'll do text gray once 400 and let's just do one top ram there we go nice so let's open this thing up see how it looks that's perfect you guys that's what we want boom look at that looking nice all right all right sweet let's do this that is our about so let's go on next one we'll be throwing up here next looks like our support boom try this again here just looking at our support so let's go into our uh component folder here new file uh whoop new component support dot jsx gonna be importing this thing here control spacebar oh no it's not letting me import it hey all good here that's what let's just import the port from opponents there we go all right you guys so for our support here rafc that's why it wouldn't let me generate you have to have you have to be exporting to to be able to access the auto import so you have to make sure you're exporting so for our support here we are going to be using some icons there are icons we're going to be using let's go ahead and import these things so we're going to be using three icons and use the phone icon arrow small right icon and that is going to be from react icons and this is outline so you have outline and then also solid for for um putting on one line since it's so small you have outline and solid for your hero icons just to show you real quick if we go to hero icons let's have a look boom so when you look at here you have the outline and then the solid and the way the way uh these work here you can either copy the svg or if this c here it says academic cap the way you would write that would be here academic cap you're just going to use camelcase then you're going to add the text icon after it so if we just use that there we can now access this icon here so that's how you do that we're not using that one though so that's how we're gonna do that now we're also if you're gonna use the outline and the solid i'm pretty sure you're gonna have to put these on separate lines import them separately so we're also gonna be using chip icon and support icon gonna have to separate these out with a comma and we'll import these from our hero icon slash react slash these are gonna be solid okay so that's how you import your hero icons here and you can search for all icons in here so but that's how you're going to do that there i just wanted to show you that make that clear hopefully i can save you some time that's my whole goal you guys just i'm not an expert developer here i don't even code full-time right now so i do uh i do some some freelance gigs in here there might be able to work on my own business coding stuff that's super cool but um hoping to transition into a development job here in react in the near future so right now i'm just doing this for fun and just kind of learning and sharing what i learned with you guys so if i can kind of help you guys along that would be great here so we're actually going to be using there we go now support what we actually want to do here is actually have another div so this outer one is going to be actually we are going to use the image let's import that image super quick as well so remember how we import our image import i'm just going to call this support image from it's in our assets folder and it's just called support this one's a jpeg there we go now we have access to that image okay so we have our outer div here then we're gonna have this is our um overlay here this one's gonna be our image we'll have an image and remember we don't use these here we're just going to bring in support image there we go perfect and outside of this div that's just going to contain our image now we're going to have a div here this is going to be our container here boom and then we're gonna have a div holding our h2 yes h2 which is going to be support then underneath our h2 we have a h3 let's just do a p tag and i'm gonna no sorry guys i'm gonna bring in this as my p tag here boom there you go and under here i'm to use this as an h3 finding the right team there we go right there perfect perfect all right and for these down here just underneath this div here create another div and this is going to be our container for these boxes down here this is where we're putting coding right now the div around these boxes so let's do a div here and then what we're gonna have is a dib for each box and inside the box we're gonna have a div with a icon we're gonna be using our phone icon and i'm gonna go ahead i don't really do this yet then in here we're gonna have an h3 that says sales and in here i'm just gonna say lorem 20 like so we can make a little bit less we need to boom there we go so i'm just going to open this up that's why i see how ugly that is okay so i'm gonna go install it just now we're doing three boxes i'm just gonna style it with one that way we can just copy down all the styles and make it nice and easy like so all right so that's our sales let's finish up this contact here so underneath that div we're going to do one more div here and this is going to be the contact contact us here so a little dip on the p tag it's going to say contact us and then inside this p tag we can throw in our icon and we're going to have a um was it arrow arrow s m right icon that's what we want right there perfect so let's go ahead and get some styling done in here so on this first one right here what we're going to want to do this is our outermost div here and the class name we're going to width to be full and we want the height to be screen which is 100 percent there we go 100 viewport heights here and margin hop 24 about six rim there we go now for our image tip here and we're gonna do a width width full height 700 pixels there we go nice nice vg gray this is going to be our overlay here 900 and the way we use our alpha boom 90. there that's how we use the alpha and as you can see we won't be able to see it yet yeah because we still need to position this absolutely but that is what we're going to be doing right now we're going to keep it over here so we can see we use so 900 is the color then to add the alpha the transparency and and tailwind do 90 you could do 80 50 would be 50 i'm going to leave it at 90 90 and we should be able to see this here shortly if we just play it as absolute up i'm gonna have to change this image here as well so let's do the image now the class name width full with the height to be full 100 100 object cover there we go make sure we imported that object cover then we're going to type mix blend overlay you guys and that is going to bring our overlay over our screen here looks like we're missing something so width full the height is 700 pixels bg gray absolute and the image is going to be bowl or object cover mix blend overlay let's have a look here all right i'm going to close that out here uh we always weren't updating there we go sometimes react is funny like that there we go i thought it should be working just like why isn't this working sometimes you just have to reload the page or just restart the server so it happens you guys sometimes don't let it choke you up too long everything's looking clean there we go all right so that's how we do the mix blend overlay okay so now we have an overlay on here and next let's do this div surrounding the support here so for this div here we're going to give this is we'll do our container div really here um so for this left one out there okay kind of break this up here so for this here what we want to do is children what we're going to do is class name width say max width let's set up our 1240 pixels here mx auto there we go and let's give a text white and relative is the positioning we're going to want boom there we go and our next div here give it a p x and py12 there we go everything is looking good we'll come back and style all that stuff so for our h2 let's do [Music] peg top eight we'll do text slate 300 this is for our issue here always do this here class name there we go already text we want this to be uppercase and i think we need to type center there we go let's see if we can all right so for this as well the h3 let's do what are we doing for the h3 text 5xl black bold that's a good color text white would be fine um py six and do text center oh there we go okay now for this let's turn this we want that to be a little bit a little bit gray and we'll we'll we'll bump up the sizing a little bit probably that first one too for our h2 let's do there we go so for our p tag here let's do a padding top and bottom we're gonna be four and that looks good so let's do text three xl text late 300 there we go that's what we want perfect now for the for the bottom part here for our little box here is what we're styling now this box right here gonna be easy you guys so for this div right here we're gonna go ahead and give this a class name of grid and we should be able to say grid columns one and then anything over the large which uh was large 10 24 pixels anything above large we're going to do grid column 3 relative the gap on the x-axis we want to be 2 rim and then gap on the y-axis will be that gay sorry about that gap y 16 see what that is four ram you guys four ram on the y there now px four and pt 12 and small pt 20 text black that should be you guys for this one boom there we go now for the actual that's the outermost if now here bg y rounded of xl and shadow to xl there we go now this we're going to want to do 8 that's what what perfect now for our icon you guys for our icon here let's give this a width of 16 adding a 4 and then we'll do bg indigo let's do our 600 and we want that actually to be the phone to be white so we'll say text white rounded large and margin top let's go ahead and say negative four rim so we just slide it up a little bit that's what we want right there that is money right there you guys perfect perfect perfect this little arrow icon it's just bugging me being so big so let's do a width five margin left too that's it okay perfect so now we can actually see a little bit better what we're doing whoops didn't mean to paste that what i want to do is drop that bar back down so 4rh 3 is i believe where we are at right now want to do font font bold and then text to xl margin top and bottom six there we go now for this here the text here text gray 600 and text excel is 22 20 pixels and also when you use text excel also it increases the line height as well as you can see here super super nice there so thank you tailwind css for that now for our div here that's looking good noticing style this little bottom part here so we want this bottom take up the full little width of this little box here so right here on this outer div here what we can say is bg slate 100 what we want it to be padding left eight and padding white four top and bottom that's what we want there we go now this is probably gonna need to be this class name i'm gonna display this as flex here so blacks items center and uh text indigo and our icon is inside our p tag here that's how we can do that that's what we want right there you guys that's like that's it right there so the reason i only added once now i can just copy everything down so if we find the top of this box sales boom so right here you guys we're gonna copy that down twice and for sales we're also gonna use technical support here so this one here i believe this is the second one i think here we go it is going to be tech nickel port there we go and we can change our icon instead of the phone icon um what are we using uh support icon there we go perfect perfect and then this last one here see media inquiries so i'm going to go down here to sales and i'll just say media increase and over here we were going to be using not the phone icon but we're going to be using the chip icon that's what we want guys let's open this thing up should yeah at 10 24 pixels it breaks down to three boxes that's what you want awesome you guys that is so nice right there perfect and we can throw in some react smooth scroll at the end of this you guys make it nice and scrolling nice and smooth that's what's up right there perfect actually maybe add a little padding to that let's go into our we go into our nav part here just before i forget and this where's our hamburger this is it here and i'm going to say marchin right there we go perfect perfect all right it's always bugging me you guys so that's it with the support after the support what do we have here after support doing this all in one platform here all right so let's go ahead to our components folder here and we'll say let me say uh okay oh and one dot jsx raf ce now that we're exporting our component here we should be able to just auto import it all in one there it goes it found it it found it all right for our all in one component here boom this is this right here all in one platform we're gonna have eight notification boxes with our react uh or our hero icons the green check mark let's do that right now we so we just created our our component here so let's go ahead and we can get rid of that there and so this is gonna be our outer container here the one thing in that here we have another div and this is going to be our um our max width container here and then i'm just going to look at what we're doing here it makes a little bit easier for me here boom we're going to have our h2 so our h2 is going to say all in one platform there we go and our next tag is going to be a p tag and we say laura loren 20 should be fine there there we go and we're going to stay within our container here now what we want to have is a div this is going to be the box right now that we're writing the box for all eight little components here so i'm going to have div and that's going to be a grid there and inside this div we're going to have now another card needs to be displays flex this is the individual box right here so in here we're going to have the see we just have a div with our icon here and it's going to be check icon there we go oh we didn't import let's import our icon so we have access to that so we're gonna import check icon there you go at hero icons slash outline now we're gonna have access to our icon here there we go so you can see our icon this display is a little bit funky so that's okay don't worry about that we're going to go back and fix that so our icon here boom everything is looking good icon we'll go ahead and give a whis class name with uh 7 and then margin right 4 text green 600 there we go just to get that back down to a better size so tech screen 600 that's what we want right there so underneath uh this div right here i mean within that div we have one more tip here and this is going to have uh the notifications here which i'll just say is an h3 this is notifications there we go and then also a p tag we'll say lorem 15. i'm gonna bring this open a bit okay so it looks like it's displaying properly on mobile on full screens here so going back over here let's give this some styling here so like i said this is the outermost dip we want the width to be full and we'll have a margin y of 32 so 8 ram on top and bottom for the margins and here it's going to be our max width of 1240 pixels margin x is going to be auto there we go and px 2 there we go m4 rh2 text 5 xl font bold text center this p tag one text b3 xl i think should be good uh text let's type it down take it down a little bit there we go text 2xl uh py8 text gray 500 text center there we go cool now for this div here this is the outermost box we're going to give this a grid and what we want it to be is it's going to be one i think we want it to be one on on small devices here but anything above the 640 pixels we're gonna set this grid columns to two should be good then anything above large will send the grid columns to uh four and we'll give it a gap of one ram then also padding top one ram there we go now for our box here this is an individual box want this to be a flex and then inside here i don't think we need to really um we don't need to uh put anything in this div here let's see here actually and we have an extra div in here there we go let's see how that is blacks that's what we want right there i believe now for our uh div here around the box let's see how this looking actually notifications there we go okay so we're gonna have just around here we have a flex with our icon here then we're gonna have a div with our h3 ptag div div um i think that is that's going to be what we want right there yeah perfect perfect so let's go ahead and copy this down actually before we copy it we're going to h3 we want the font to be bold we'll do text large there we go and and then also text large uh padding top b2 hang bottom four which is all right this is looking a little bit funny here i wonder what happens if we put this in a div if that changes anything oh there you go perfect that's what we want that's what we want i'm gonna go ahead and save that so it kind of formats it and then i'm just gonna put a little space here and so what we want we have this copy down about eight times let's see boom there we go now it should drop down to four once we go under it once we go into 10 24 pixels drop down to two on each side let's have a look there he goes and then down to one now that's perfect right there that's what we want you guys i'm going to drop this back down now let's go ahead and have a look at this here because this is not looking right our support we want this to display after our support here so let's go into our support dot jsx and we should be able to see h screen let's see if we can just delete there we go that's it okay perfect make sure everything works properly perfect and down on mobile devices perfect that's what we want so we decided to get rid of that screen um we didn't want to define the full width of the screen uh because that's where it was kind of cutting it off right there so now it just says basically by deleting that it's just take up however much space the content is going to take up and then end the page there so that's what we want right there perfect you guys we are done with excuse me we're done all in one platform let's do this awesome uh pricing component here with these uh buttons we're gonna use and for tailwind boom there we go so next let's go and i'm gonna delete those and let's create our pricing dot jsx there we go rafce going to give us our functional component and it will be exported so we can access it here there we go pricing and we should see it down here at the bottom there we are perfect so in pricing what we're going to want to do we have our outer div here and for our pricing we are going to be using the check icon here perfect so let's import the check icon so we have access to that import check icon from direct icons and this one is going to be solid a little bit different this one's going to be solid now we have arc div here this is outermost f and then we're going to have the if i can just look here perfect this is going to be our kind of container here there we go and then inside of this we're going to have another div boom boom boom so actually i'm going to delete this so this second div is going to be our background and we're actually just going to display this one absolute so i'm just going to say absolutely give myself a little a little note there then here is going to be our container and and within our container we're going to have another div here and this is going to house our h2 that's going to say pricing and then down here we're just going to say 120 and that's going to be for our we'll just give this as a p tag and let's copy this here the right price i can't copy this that's fine we'll say h3 the right price for your research there we go boom boom all right and we have this text down here completed and next we're going to do our columns here so this is going to be a container that we're holding for our two boxes here and then each side we're gonna have the left and the right side so this first div is gonna be on the left and then it's gonna have a span it says standard there we go now underneath that span we're going to have a div and the p it's going to be uh i'm gonna go ahead so i press save so it formatted that there now in this we're going to say 49 and for this we'll have a span it says month right there perfect then we're going to have another div here with our we just make this our p tag here and this is gonna say we'll say lorem seven there we go give us some space so we can see what we're doing here and this would be a div so for this outer for this outer div here this is going to be for our our text and check boxes right there so we're gonna have a p in here we're gonna have our check icon and then we're gonna have let's say alarm three and then after that div we can go ahead and copy this down a few times say we'll have five there we go and after this p tag let's throw a button it says get started all right there's our icons so perfect that's why we weren't there now let's go ahead and style this you guys um real quick these buttons drive me crazy so let me give this class name we'll do width of uh there we go width 8 is going to be fine uh we'll do width of eight then margin right five text green six hundred okay perfect perfect now let's go up the top of this thing that we're to be styling and for the first div here we're in a width of full i'm just going to say text white because we're going to be throwing some background over here i know you can't see it right now that's fine then this div here this is the div that's going to be positioned absolutely and this is just going to be our background color so it's actually going to be an empty div i just threw the note in there so i remember i like to make a lot of notes while i'm coding here all right so excuse me this width is going to be width of bull and it's going to be a height of 800 put this in our brackets so we can define whatever we like there 800 pixels this is going to be the the black box that uh our cards are gonna extend past just a little bit here so bg slate we'll do 900. like i said this one's gonna be absolute with a mix mix blend overlay again ah blend overlay there we go perfect that's what we want right there nice nice nice so i there we go i know it's kind of hard to see but these are actually kind of kind of like see-through a little bit so we're gonna have to give that a class of relative and you'll see what i'm talking about as soon as we make that change so the next here we're going to do this is our out of our container here we'll say max with 1240 pixels there we go and we want to do mx auto py 12 perfect here now for this div just giving some space so it's easy to follow along here now for our pricing this div here will give it a class name we want the text to be center py padding on the top and bottoms would be two rim text slate and 300 there perfect perfect now for this text we want the text to be uh 3xl we'll make it uppercase that's the text transform uppercase right there perfect perfect and for this h3 let's do we'll do 5xl bot bold text white and py there we go perfect perfect that is what we want and look for this here text 3 xl let's see how that turns out perfect that's what we want right there you guys looking nice so for our card let's style our card that looks kind of funky right there so for our card let's knock this out this is actually the card container we're gonna have two different cards so for this one here let's give it a grid grid here and then we're going to want this to be um basically it's going to be displaying one column on small devices then anything over medium which is 768 pixels let's do grid column two there we go so anything above medium will show two columns boom so you can't see it but it's there if we use our we use our pesticide now you can see two columns and we scroll down right there's our break point and we're gonna go ahead and keep styling this here so i'm gonna drop this down just a tad boom all right so we have our grid that drops down to two columns now excuse me for this next one here we actually want the card this is the card itself that we want a background of white text slate 300 let's do 900 be a little bit darker perfect that's what we want margin for which is one rim padding we have two ram rounded xl shadow to xl there we go kind of see that shadow a little bit now for this span what we're going to do for this standard there we go we want this to be uppercase uppercase there we go padding px3 py1 this is our background speed a little off purple there perfect perfect and then text indigo 900 should be nice and dark next indigo 900 and let's do rounded 2 xl text small there we go let's reload this and see how it looks that's looking right there that's what we want perfect perfect now i'm going to drop that box down so we can see a little better and for this div here that's surrounding our our price and our little lorem text here we're not going to need anything there but for price we actually want this to be a little bit bigger so we'll say text uh for our our pricing here six xl this would be quite large there let's see what that is three point seven five rim that's 60 pixels we'll do five bold and py4 and we actually want this to be a flex so we can i want this to be a little bit smaller that little month there that's why we're making that flex then for this span here we'll do text xl text slate 500 blacks flex call justify and and that's going to drop it down to the bottom here good at least there we want to drop it down to the bottom here i don't want it at the top so we have flex flex column justify there we go just didn't finish there boom so that's what we want right there perfect boom that was looking nice and for these down here so for our text here we're going to need just a little bit of styling here on our text so let's give that a class name of text 2xl to make a little bit bigger um py8 to give some padding and we'll take text slate 500 all right there we go now for this div here is surrounding this div here is surrounding all of our icons so let's do text a little opposite color there let's style this p tag because i don't think we're going to need anything else here let's dial this p tag we'll style all of them here i'm just pressing the alt button down there so class name we'll do flex padding top and bottom one rim there we go not bad not bad that's what we want all right i can change the size a little bit here so let's do i'll hold this down i could add it right here text will do to excel should bring it up a little bit there we go nice nice looking nice there that is what we want perfect perfect perfect perfect all right i wonder if this mix makes a difference okay so if i remove remember what i said some of these are kind of like see through a little bit so if as you can see you could tell this one looks a little bit darker than the others and that's because we're getting a little bit of this overlay here a blend so if we just add a relative class that should actually fix that i'm wondering if i add it up here let's see if we add it here we'll change anything so actually you see that there's a massive change there so i'm just going to delete that so we'll just add these as relative so if you actually if you see if i delete that you can see these get a little bit darker because we're getting some of this dark uh overlay here from the background so i'm just gonna go ahead and put that back to relative that's what you want perfect you guys so let's finish with our button we just all our button down here so let's give this class name we want to give it a width bull um we actually don't even need the rounded py4 and then my4 for some margin boom there we go and let's see what anything else i think that's perfect right there you guys so uh we used a different color that's fine for this i'll just leave it as is for this color so if we open this up this should be on the left side we only did one box here and now what i'm gonna do i'm just gonna copy that down and we'll just change the pricing so this is the standard boom so let's grab this uh what's the outermost div here boom this right here so what we're going to do is just copy that and we'll just copy it down there instead of 49 this one can be 99 and this one can be we'll say just say premium boom there we go open this up that's what we're there guys standard and premium perfect everything is looking nice that's how we want it that's how we want it perfect perfect and let's have a look on mobile devices iphone oh looking clean everything is displaying beautifully that is what we want right there you guys smash the like button if you like what we're doing here trying to keep this energy up here and going uh so that's it right there for our pricing component now let's go down and finish our footer here and then we'll wrap it up with the react scroll so for our footer um what we can do for our footer we're going to need to go in and create a ctrl b here to pop this open and we'll create another file here our footer.jsx and rafce we'll get our functional component here and let's go ahead and import butter i don't think it imported i'm gonna press the control space to open that up there we go now perfect that's what we want right here just drop this down so we have some room now for our footer for our footer we're going to use some icons we're actually using react icons i didn't find the hero icons i wanted so we'll just install that real quick yarn add or react icons again if you're using npm it's just going to be mpmi react dash icons so go ahead and install that there there we go and just to make sure that installed correctly we can check our package there it is uh react icons right there perfect so i'm gonna go and import the icons we're gonna be using very very similar to the same way we import our others so we're gonna be using fa facebook we're gonna be using fa github i need to separate these for the comma f a instagram fa twitter and we'll say f a twitch there you go we'll be using all these and we're importing those from react icons now these have fa in front of them so we're going to import these from react icons slash f a so here's our footer here at the bottom so this is our outer container here now inside we're going to have our this is our container they're going to have a div with an h6 in here and we're gonna say solutions boom there we go then under here an ordered list and we're gonna have a list item and this one's gonna be marketing copy this down and we'll say analytics um data we'll say cloud boom there we go let's open this up that's what we want right there perfect and remember the li we added so already have a padding of four we added that in the uh index.css file at the beginning of the video so that's why we have some some padding there around the box so for our comp for our footer what we want is see we're gonna have a grid system down here and we're gonna have six columns we're gonna have four uh unordered list here and then our subscribe box the right is gonna take up two columns so that is how we're gonna be doing that there and so let's go ahead and style this one here um then we can just copy everything down so the class name here is width going to be full margin top 24 bg slate 900 and then text gray 300 py8 and then px2 now for our container here max with 1240 pixels there we go mx auto and this is going to be like i said grid anything above medium which is the 768 when the grid columns to be uh six and then border bomb two border gray 600 py eight there we go there we go all right so we still need to add some things in here so underneath this is our little footer here we're gonna leave that blank for this here we can add bold uppercase and pt two there we go perfect perfect now for our ul that's fine for this i'm just going to add i'm just going to take down the padding just a little bit so we'll say p y p y one just to take it down the tab that looks good there and what we can do i'm just going this div here copy this because we're going to have four of these so the first one is solutions and then next we're gonna have support you don't have to type all these in guys you can do whatever you like here we'll say pricing documentation guides api that is won't delete this last one just so they're a little uneven here and we'll have a company about this one can be blog and we'll say jobs press partners and then we'll have this last one legal and we'll have let's see let's do claims private privacy terms policies see how that looks yeah that's not what want looking good so far boom that's what we want but we actually want this to uh probably take up we'll say grade call two there we go then anything above medium we're gonna jump to six that's perfect so let's add in right here so just below this div boom our next dip we're going to create and in here we're going to actually have this div and this is going to be a we'll give it a span calm sorry column span calm span two pt eight and anything panning up two all right and we're gonna have our subscribe to newsletter here perfect and then we're gonna have the latest news articles and resources to your inbox weekly perfect here we go now we are going to want a form boom we don't need an action since this form isn't going to submit to anywhere but info here we're going to have our input and email then after import we want a button and it'll be subscribe there we go that's what we want and then at the very bottom we're gonna have another dip here with some social icons so let's go ahead and do that very bottom so just underneath this div here um and then underneath so this is the container dip underneath that but within this parent dip still we're gonna have one more div and in here we could say i'm gonna separate this so it's a little bit easier to see now in here we're going to have our p tag that says 2022 work blow lc all rights reserved there we go perfect now div with our icons we're gonna have fa facebook fa instagram there we go f a twitter i was picking random ones you guys so that way fa twitch and then we'll do fa get uh perfect perfect there we go all right so let's style this thing from here down it's looking kind of funny right there we need to style this and then down here as well keep this open so for our form here on the right um what we're gonna do we have the columns column span set to two so it's taking up the correct amount of room on our on our grid system down here now for this p tag let's give this font bold uppercase how does that look there we go matches the others there now this p tag here p y 4 there we go and then for our form for our form we want to do blacks flex column and then anything above small we'll do flex row there we go perfect perfect now for our input do a width um [Music] let me say with bull p two or rounded where the router to be medium and then margin bottom perfect perfect now for our button we'll do p y try p2 and b4 that's looking okay now let's drop this thing down and make sure that's what we want perfect we just hit that's what we want we wanted to stack on mobile devices looks perfect let's hit this bottom part here so we actually want this to display as flex and we want to give this the max with the suit since it's outside of our container so the way we want to do that is just the same as the above so we'll do a max width 240 pixels margin auto there we go and we'll also let's say we're doing plex we want to do justify between but we only want this to we only want just five between uh if it's uh if it's uh we only want justified between if it's on larger devices here so on the small we'll just say on a small flex row we're going to be text center as well and text gray 500 that is looking perfect right there now we want these here our divs here or our icons here windows device flex justify between there we go anything above small will do a max width of 300 pixels and padding top four text to excel boom there we go now justify between let's have let's open this up all right so for this div here looks like we're mixing missing a little something here i'm gonna add in padding in here as well while we're at it px2 py py4 so this we actually want to display anything above small max width let's change this to just width i think was the issue there we go and just fire between these are off set a little bit no i didn't do it let's get rid of one is this up here i believe there we go i dropped it down just a little bit that's what we want now make sure everything is looking good small plus row all right now let's drop this down to a mobile device ooh and we want this to actually so let's see um so instead of flex what we could actually say flex column and then down here since we have this small anything above 768 should speed displays flex here so as we open that up hmm that's not what we want let's have a look here so we have a flex column i'm gonna add this in here so that is what we want let me use this pesticide hmm that's not what what are we doing here okay so let's see here what we want let me get out of this pesticide i think it's kind of annoying sometimes so on mobile devices that's perfect oh we still want these to display a little bit further across because on this one original build there we go yeah there we go so we want on small else we want to with a hundred percent 1240 pixels margin [Music] make sure it's margin x auto there we go an item services center we don't need this item center here we do need the justify content to be between there we go that was the issue there now there we go perfect now we still need these to line up because that's looking a little bit funny there so pick center grade 500 there we go we just add a little bit of padding that's perfect have a look is this what we want it's looking pretty good looking pretty good we might need to change these just change this color a little bit we could do see if we wanted to you don't have to you guys let's see we'll leave it at that for now let's scroll this thing open a lot a little placeholder in this input down here placeholder [Music] enter email there we go boom there we go so let's drop this thing down well let's break it up full screen see how it looks boom go up the top everything is displaying beautifully that is what we want you guys perfect thank you for following along smash the like button if you haven't already i appreciate that so let's have a look everything our hover effect is working properly let's scroll down trusted by developers perfect support team we have our overlay here with our image offsetting the margin there ran into a few problems we got those fixed everything is looking beautiful that is what we want you guys perfect that is what you want now looking at it on a mobile device here boom everything is looking beautiful that is what we want you guys that is perfect now let's go ahead and add this react smooth scroll to really wrap up our project give it a more professional feel here boom perfect that's what we want we wanted to stack on mobile everything looks perfect all right so i'm going to drop this back down now let's go to let's type in here we'll say react smooth scroll here up we don't want that not digital ocean this here perfect so we want to go ahead and install this so it's going to be npm i react scroll i'm going to go to my open terminal here i'm using yarn again so yarn add react scroll boom go ahead and install that now i'm going to crest command b to get my side folder here back up now in our nav bars where we're looking here in our navbar what we're going to want to do we're going to import this right here boom i'm just going to copy that import it here at the top we're actually not going to use all these um and probably not using these is events element button not sure if we're gonna be using any of those but these for sure now let's scroll down here is our link right there i'm just going to copy this now i'm just going to paste this right here and i'm going to drag this open a little bit further so we can see what we're doing that's what we want now we can actually clean this up a bit i'm gonna delete that we don't need that we uh will keep the offset for now smooth true we don't need this spy uh we are going to need this we won't need the active class there we go now in here boom home and what i'm going to do i'm just going to put this around the list item here that way we can still maintain all of our uh all of our styling here so i'm just gonna copy this down a few times and we'll just change this out with about about and then our next one was support and then we're gonna have platforms and then pricing there we go perfect perfect let's get rid of those make sure everything still looks as it should there you go perfect perfect now let's go over [Music] we have to do the same thing to our mobile device here our mobile menu so let's just copy these before we copy these let's go ahead and add so the way react scroll works the smooth scroll we're going to name our components that we're going to scroll to and then we just call those in here so bringing this back up if we go to for this home here i'm going to put this as home and then in here in my hero because our navbar is fixed we're just going to give our hero let's give it a name as home and then the about is our next section here we're going here we'll just give it another name about and then for our pricing for our pricing we'll do the same thing pricing and in here in support name support that is what we want right there perfect perfect perfect now let's close all of these don't need those still need navbar here so in here we call that one home we called about we just called that about and then the support platforms we need to go back and do this one platforms and then pricing pricing now platforms is the all-in-one so in here probably shouldn't call this product platforms that's okay so name platform all right so let's open this up and see if it's working support oh something's going on let's refresh pricing support platforms there we go so that is working how it should boom now we actually want to add the offset here because you see if we click home everything is shook off by our navbar here so what we can add in our nav navbar so home offset is 50. let's just try a 100 here to see how that works actually probably don't even need offset at all on this one let me see if we're gonna need that okay that's what we want perfect so for about we're gonna need a pretty big offset for about let's try this 200 and for the support for support we'll do negative 50. i think this needs to be actually negative 200 and we'll try negative 100 and then that's how this looks here pricing that looks good pricing is perfect platforms looking good support about home perfect now if we go to our mobile menu it's not going to work because that's a different video so what we can do is just copy this here perfect down here and actually so we need to add this class name i'm just going to copy this uh whole class name in right here boom perfect and i'm just going to use my alt tab here all button just paste it in there oh i just saved it and formatted kind of funny let me go back sometimes i don't like the way it formats it so that's what we want right there perfect perfect perfect and can i move that over and we can now delete these see if it works support boom but we have an issue whenever we click on the button our menu does not shut down and this is a problem this is a very big problem so let's go into our code here the way we're going to fix that is with our state here so we have our handle click and see what we can also say we'll say we'll give it a cons say handle close and we can set nav to f there we go just like that there and on our mobile menu let's have on click and we'll run this handle close function here so and this is very important you cannot put it on the list item element you have to put it on the link element here okay so if you're running into some issues make sure you have it on the right element so what we're going to say is on click we want to handle close so let's see that should be everything we need here click on support oh something's oh there it goes okay so i think it's working pricing there we go platforms support there you go and about this is clean you guys this is so perfect there we go all right guys we are completed we have completed the project here we have the cloud management application here we designed it react js using tailwind css we wrote zero custom css you guys how powerful is that this is so so easy to use tailwind i'm really really loving using in my and my uh in my pres uh projects here recently i'm having a really great time with it if you like the video make sure you smash that like button below trying to grow this channel up here i'm gonna have some more content coming out here in the near future be working react.js some mongodb and also some firebase so i hope you liked you guys make sure you like the video and i will see you on the next one

Channel: Code Commerce

Views: 93,877

Keywords:

Id: TVQnhcVFTVs

Length: 123min 25sec (7405 seconds)

Published: Mon Feb 28 2022