React Project Website Tutorial With Tailwind CSS From Scratch (2022)

what's going on guys Clinton here welcome back to the channel code Commerce and in this video we're gonna be creating this react.js application styled with Tailwind CSS has a nice travel theme so just a quick rundown we have a top bar we have a nav bar we have this image background with a bit of an overlay on it and it might be a little bit hard to tell right now some text down there we have some cards here and again everything is fully responsive you guys a little select form there we have a gallery here image gallery and a contact form in the bottom and again everything is completely mobile responsive here you can see we start changing up the screen as we get to certain break points so if you want to see how I built all this from scratch oh and by the way we do have some smooth scrolling in effect and again this is all Tailwind CSS you guys and just to show you the nice little side drawer menu in here as well with a smooth scrolling effect so if you want to see I built this from start to finish in react.js then let's go ahead and get started so here I am and a blank code editor I'm already in the working directory just this week away Dash react folder so I'm going to press the control back take button it's just going to open up my terminal down here and let's go ahead and create our react application so I'm going to type MPX create Dash react Dash app now you can name a folder here or if you just want to install it in the current directory that you're in you can just put a period there and press enter and that's going to create a basic react application inside the folder that you are currently in happy hacking that means we are ready to get started are you guys so first what I want to do let's go into our source folder here on the left and I'm just going to I'm just going to clean up a few things here and get rid of a few files that we're not going to be needing for this build so the app.css the app.test the logo.svg report web vitals in the setup test let's just go ahead and delete all of these like I said we're not going to need them for this build just kind of declutter a little bit now next let's go ahead and install Tailwind CSS so just go to tailwindcss.com this is the landing page here I'm going to click on the get started button there and we can actually click on framework guides got next JS larabelle beat Gatsby let's find react should be down here at the bottom create react app there we go go and click on that there and so what it wants to do first is create our basic correct application which we did that so next we need to install Tailwind so I'm just going to copy that right there paste it over next while that's installing we're going to need this MPX Tailwind CSS init Dash p let's go ahead and run that command and what that's going to do is create a few things here on the left notably this tailwind.config.js and we're going to need this because the next step is actually to just copy this inside of the content array so I'm going to hold on to that let's go over here and just paste it in there there we go and you guys this final step to install Tailwind inside of the index.css it wants us to paste this Tailwind base components and utilities and these are some directives one in which we're going to be using that base so let's go ahead and you guys you can get rid of all this we're going to end up writing all of our own all of our own CSS here with Tailwind so let's go ahead and yeah that should be up there so let's go ahead and start our server with npm start it's going to start up our development server and right now you guys we should just see a blank page we might have a few errors here um just looking for things that we deleted so inside of here yep there are the errors so let's go ahead inside of our app.js let's go ahead and get rid of a lot of this boilerplate code that we're not going to need it's trying to import some things that we don't have and we can just import re whoops we'll just import react from react there we go and let's see still need the report web vitals that's going to be in this index.js so let's just go ahead and get rid of that there and we don't need to import it either okay so that should clear up all of the errors perfect now if you if you start if you jumped ahead and you start riding some tailwind and you're not seeing any effects make sure you restart the server just a little quick heads up so let's close this and let's go ahead and add what I want to add we're going to have some Global Styles and we're gonna we're gonna do that here inside of our index.css so first what I want to do is actually import the font that I'm going to be using I'm using a Google font here you can use whatever you want you like but this is the uh Poppins font and by the way I just toggled that sidebar with command B I know a few folks have asked me in the past so command B does the little sidebar toggling so next I'm going to add two two CSS variables here some root variables and um we're going to do that right here what we're going to say is colon root and these are just going to be whoops these are just going to be colors you guys and um so let's go ahead and give them a couple two dashes there we're going to say primary Dash dark and this first color they're both going to be Blues kind of bluish purple so five six five one e five there we go and then next let's do another one here dash dash this is going to be primary light and this one here is going to be 709 dff okay so these are the two nice little colors that we're going to be using here so next what I want to add are the global Styles here and we're going to do this right down here and you guys Tailwind has some really great documentation if you want to read through it they have really great documentation and just probably just about all of your questions you can find in there so what what I'm going to say for the global variables I'm going to say layer at layer base okay now in here I want to we're going to add a smooth scroll so I'm going to Target just the HTML element and what I want to say is at apply scroll smooth and this scroll smooth here if we hover over it this is a really cool plugin just I believe it's called Tailwind intellisense I'm not for certain but really really great if you're using Tailwind it gives you all these pop-ups and really kind of helps you know what you're doing a little bit quicker so next let's try the body here and let's go ahead and give this the font that we're going to be using font and we're going to say pop-ins and we'll use uh the brackets like that actually lets us write in some custom or kind of like custom values in CSS I'm going to touch on that here again in just a moment when we get into writing some more styling so next the list item we're going to say p-4 and that's going to give a padding of I believe it's one Rim there we go one Rim already coming in handy here and I'm going to say text SM for text small now next for our button this is going to be applied to all buttons I'm going to say apply PX4 so one ram padding on the x-axis then py2 and kind of goes by multiples of four so four is one ram two would be 0.5 Rim which is 8 pixels and so on and so forth so next we're going to give it a border and we're gonna have this little gradient as you can see here kind of a gradient from a darker blue to the lighter blue so that's what we're doing that's what we're doing right now we're starting to say BG gradient to R now we're going to use one of our variables we're going to say from you could say like from Red 600 whatever you want to say but since we're using our our custom variables again we're in CSS or sorry with Tailwind we can use our brackets I'm going to say VAR just like so and then open up our parentheses and we'll say primary Dash dark so from this color then we'll say two open up our our brackets there bar primary light and then we'll say text White and let's go ahead and give one more here our H2 where say apply text Excel and flat bold is what you're going to see here if you were to type in an H1 before any of this you would see Tailwind by default it's kind of lumps everything into no Styles at all so even an H1 A P tag and H6 they're all going to be the exact same size the exact same font weight which allows just for a lot of customization here within Tailwind okay so that is all of our index.css you guys so let's go ahead and we can close that and let's go ahead and go into let's create our first component hey so inside the source folder let's first create another folder I'm going to call this components and this is where all of our components are going to live here so again with this one in the components folder I'm going to create a top bar.js or dot jsx doesn't matter here so raf-ce going to generate our functional component and you guys real quick I forgot we're going to be using these react icons yay super super awesome icons I love using react icons really easy package to use let's go ahead and stop our server real quick just to install this so I'm just going to paste that in there just like so super super quick and let's go ahead and start writing npm start let's start our server back up yes there we go so let's go ahead and import a let's go ahead and import a few of the icons that we're going to be using so what I'm going to use we're going to say this is how easy it is to use the react icon so import from react icons just like that now let's import our icons in here so what I want is AI fill phone and AI outline clock circle now see the little these are the this is the font name right here but they all come with these little pretext so whoops so this little pretext we actually have to add after the react icons just like so now next we want to import I'm going to use BS chat Square dots this is going to be from whoops from react Dash icons and then again we need to add in that little BS just like so perfect you guys so next that's all we need to do we now have access to our icons so let's go ahead and write let's go ahead and write some of this stuff here so it's a little bit harder for me to see whenever I'm zoomed in so let me know in the comments if you like it zoomed in or how it is at this current state here so let's create another div here within this div here's going to be our first icon and what we're doing right here is just going to be like um this top here so this BS Square dots that's our little logo that we're going to be using there so we'll say BS Square dots just like so there we go and after that we need an H1 and this is going to be our title and let's go ahead and import this you guys so we'll say this is our top bar here we go let's import top bar from components slash top bar there we go okay so we should see there we have it we can zoom in a little bit there we have it yay okay so after this H1 after this div here what we're going to do next this little section here is is a div here and then we have our Button as well so if we open it up and these are actually going to disappear on smaller screens there so let's go ahead and do that right now so after this second div we're going to create another div and inside here we're going to have another div this is going to be our AI r a i outline clock Circle there we go let's have a P tag there and this is going to be our timing so we're going to say 9 am to 5 a.m there we go and below that div we have another one here this student's going to say AI bill phone this is going to be our phone number here and a P tag we'll say one eight eight one seven one two three four big phone number by the way please don't call it okay and then let's do a div here or sorry a button we'll just say get a free quote okay so let's go and save kids nice and formatted that is all the HTML that we're gonna write for our top bar now we just need to style it this is the fun part using Tailwind CSS I love tail one it is so easy to write to write CSS in the style thing so let's give this a class name we want it to display display as Flex we're going to say justify between so it's kind of spread out on the opposite sides of the screen there we go where items center now PX4 so padding of one rim on the x-axis then py2 which is a padding of eight pixels on the top and bottom there we go perfect so next for this little section right here let's go ahead and say class name and we'll say Flex we want items Center now for our dots let's give this what we can actually do is give it a size attribute here and let's say 30. kind of beefed up our icon there let's give it a class name and you can style these just with Tailwind or any other CSS as well so I'm going to say text and let's give this a color so text color again you should say text red or we're going to use our custom variable here so say dash dash primary dark just like so you can see you get that little purplish blue color margin right of two which is just eight pixels there so perfect everything's looking good let's dial our H1 here so class name now for H1 I'm going to say text XL I see 1.25 REM bold when the text to be a gray of 700 there we go everything is looking great so far so next let's style this div we're going to give this a class name of flex because we want these to be displayed horizontally they're perfect now for our clock here let's go ahead and I'm going to hold down the option button so I can type at two places on the same time and I want to give these let's give this a class name so I actually want to have these hidden on smaller devices and then once we hit the break point which this is past the break point they're going to be displayed but Tailwind is a mobile first approach meaning we need to add in those Styles first so what we can say is hidden then anything above the medium This Is How We Do break points and Tailwind we'll say medium anything above medium we want it to display as Flex and I want these to display it as items Center then PX 6. and I believe the medium break point is 640 pixels I may be wrong but I believe they're 640 so as we shrink that down see we're right at the break point there so we're shooting down we don't see them and then once we hit the medium break point boom there we are and you can add in some custom you can change the sizes of these breakpoints if you'd like as well but for the sake of this video this is going to be just fine so next let's go into this AI outline Circle here that little clock and I'm going to give this again a size attribute of 20. we'll say class name and let's go ahead and do this as well so size 20. last name and what we're going to do again I'm going to hold down that hold down the option button so I can type in here and let's give this a margin right of 2 and we'll say text and we use our variables here pop open our brackets variable dark there we go perfect that's what we want right there and next for our P tag let's go ahead and style these so let's give it a class we'll have the caps lock on there class name and what we're going to need here is let's see text small and then text Gray 700. 800 700 the lighter the number or the the lower the number will be the lighter the color and I think it goes up to 800 maybe 900 I think maybe 900 I may be mistaken there but so 700 is going to be perfect there then our button is already styled it was because we did that in our index.css right here and that's why we already have this beautiful button right there so let's go ahead and open this up perfect spans across the screen everything is looking exactly how it should yay all right so as we get down below our break point that little the time and the clock disappear so okay so next let's go ahead and create and that's it you guys we just finished our top bar smash like button if you feel like you're getting somebody out of this if you're loving Tailwind super super awesome next let's go ahead and create our next component and our next component is going to be the nav bar so let's go ahead and do that right now we'll say navbar.jsx perfect r-a-f-ce is going to generate our functional components and so let's go ahead and again we're going to use a couple icons in here so let's import we're going to use fa bars from we'll say react Dash icons then again this one's going to be fa perfect and it's going to import this one's going to be BS chat Square dots from react icons slash BS yes there we go and next I'm just going to copy all of these here to save a little bit of time so import and see all these have all start with fa so we can actually import them on the same in the same line here so from react Dash icons okay go ahead and save that so it gets nice and formatted awesome so let's go ahead and let's go ahead and write out write out a few of okay so let's go ahead and import first let's do we're going to need to import a u-state hook and we're also going to use the use effect hook okay but we'll come back to those we want to go ahead and import those but we'll come back to them so first let's go ahead and Style let's go ahead and style the top part of our navbar so what we're going to say we're coming here and again I like to be able to see what I'm doing so let's just import this real quick here we go and we'll import navbar from there we go okay so now that we have our navbar let's go ahead and start off writing some CSS okay so what we're going to say I see our nav bar in there perfect let's have so we have our div here now we want to create an unordered list now inside our unorder list we're going to have a list item then we're going to have an a tag and this one's going to be well we can just put a slash there we'll say home and let's go ahead and I'm going to select these and I'm going to hold down the shift option button to just copy those down so we need a gallery at deals and a contact so this one's going to be gallery this one can be deals this one can be contact okay so and let's go ahead and give these some IDs and we're going to use these in the in the following components so we know where to scroll to with our smooth scrolling so make sure you add in these here we go contact perfect so just below this unordered list here let's go ahead and add in I'm going to shrink this down so we can like to see what we're doing here boom so we're going to add in these icons there very very nice so let's go ahead and add in our social icons I'm going to open this up a bit so for like I said just below our owner list we're going to create another div and inside here we're gonna have our social icons will say f a Facebook F there we go perfect perfect and I'm going to go ahead and just copy in these other ones just to save a tad bit of time so these already have the class name in here so let's make sure you add class name or say mx-4 and what this class is if you haven't known by now margin on the x-axis x axis of 4 which is one REM all right so now that we have that div in here you see everything looking good and we're going to come back in we're gonna I like to write all the HTML and then get it all styled here so I think it's it's easier to follow along uh this way so next let's go ahead and do our mobile menu so and you guys we're gonna have to okay we already have all these imported okay bars and again I just kind of caught this you guys we can actually delete this line we just need to import fa bars down here like so and then we can actually just get rid of that there so I just caught that but again remember these have to if they start with different letters there then they have to be imported on separate lines okay so let's go ahead and start with our mobile we're going to start with our mobile menu here so let's just go ahead and give a little quick note here we'll say this is going to be our hamburger icon here so I'm going to create a div and inside here is where we're going to have our fa bars there we go there's our bars right there and we're also going to have just below that mobile menu and this is going to be our side drawer menu that we're creating right now so let's go ahead and do that so for our side drawer menu let's have a div here okay and this is going to have so let's go ahead and we'll come back and write some CSS in that in a minute but inside of our nav here we're going to have an unordered list and then we're gonna have a list item and let's go ahead and I'm going to go ahead and just copy all these to make it easy and save a little bit of time boom so go ahead and paste those in there like so perfect and okay that looks good so let's go ahead and write some CSS using tailwind and that's going to hide all of our that's going to hide our side drawer off the screen so I think yeah that looks good for now um we might have to no yeah we'll come back and install everything in a minute so perfect so let's go ahead and start let's go back to the top with some styling and then we'll add our state because we're gonna we're gonna use the U State hook to manage whether or not our side drawer menu is on the screen or not so let's go ahead and style our menu here so let's give it a class name and what we want is width full again this is for our nav bar here so we want admin minimum height of and we're going to use our brackets here but you could say Min height you know eight or six or whatever you want to do again I want to use a custom value so I can just use the brackets again there very very nice so Flex justify I'm going to say justify between item Center and you see this popping up I believe that's the Tailwind intellisense again so it kind of allows you to write that's what I love about Tailwind so much they have all these plugins as well and just allows you to write and style things so quickly so 700 there we go 80. let's go ahead and give that a save there's our nav bar awesome all right so now for our unordered lists give it a class name and we actually want this to be hidden but anything above small because we're going to use the small um break point here which I believe is 640 pixels anything above that we wanted it to display Flex so this small break point is what we're going to use for our mobile menu so boom there you go as you can see kind of disappears and this is our mobile menu that we're gonna style in a minute so I hope that makes sense there you go all right so next so that is our unordered list for our list item we actually don't need any styling on those because we already added those in on our Global styling right there so that's kind of like to save a little bit of time so next let's go ahead and style our our social icons here so for this div we want these to lay horizontally so let's say flex and let's justify between so they lay down and again in case you can't really see those I'll open it up just a bit while we're doing this here so that is for our unordered list now for our icons they're already styled how we need them to be styled so next let's do our hamburger let's do our hamburger icon so for this div we're going to come back and add an on click here so but for now we want anything above small we want this to be hidden because we only want our hamburger icon to be shown on smaller screens right okay so anything above small it's going to be hidden and again this is that Tailwind mobile first approach and then we'll give it a z index of 10 because we're going to add an overlay we want it to be on top of the overlay so next for our bars let's go ahead and give our bars which is going to be it's just our our little hamburger button there a size of 20 and then for a class name for the bars let's say margin rank four and then cursor pointer so every time we hover it we get the little pointer pointer finger there we go okay so next let's do our actual mobile menu this is going to be this damn this mobile menu right here and again we're actually going to hide it off the screen so whenever we click it just gets slid in from the side with our nice overlay there perfect perfect so what do we want and we're actually going to use a ternary operator here let's go ahead and give it a class name and since we're using a ternary Opera here instead of using some quotes we're actually going to use some brackets and we're going to write our JavaScript inside the brackets so what we're going to say and we actually haven't added our our state in here so let's go ahead and let's go ahead and let's go ahead and style our nav bar or our mobile menu as it's going to be appearing on the screen like so so let's do that right now what we're going to say we're going to say overflow [Music] um overflow y and for right now you guys let me show you what I'm gonna do here we'll say over overflow y hidden anything above medium we're going to use that Medium break point we want it to be hidden ease in we're gonna have a nice transition the duration is going to be I'm going to use 300 we want it to be positioned absolute and text Gray 300 because it is going to have that kind of gray overlay so left zero top zero a height of screen and the height H dash screen is 100 viewport Heights there so same as saying that as well and then we'll say background of black and to give it a little bit of opacity we'll say 90. PX 4 py7 Flex Flex column just like so okay so next I want this to be full screen there we go perfect perfect perfect okay so that is all of our that's how we want our navbar to show we're going to come back and style these here in a moment so don't worry about that yet but this is basically what we want our our nav bar to look like whenever it is engaged so let's go ahead and add some State up here so we already imported here at the top so let's just go up here and we'll say just right below this nav bar here we'll say const and then open up our brackets and you can call this whatever you like I'm gonna say nav and set nav this is going to equal to use State it's just going to be a Boolean value so false and we're going to be able to toggle back and forth between false and true and false so just the Boolean value there and we also need a function to toggle this so we're going to say const handle nav we're going to use a narrow function there and we'll say set nav and we just want to set the nav to its opposite of its current value there so that's all we need to do there now let's scroll let's scroll back down to to our Styles here so right now our menu is being shown okay and let's go ahead and let's go ahead and finish styling it and then we'll set up the logic to whether or not it's going to be toggled so now that we have that in there like so next let's do our unordered list here so I'm going to give this a class name the unorder list of H full so it's going to say height full height 100 width 100 text Center then padding on the top of 12. there you go perfect now for our list item we're going to need to add styles to all of these and they're all going to be the same so just go ahead and hold down the option button if you're on a Mac so I'll give this a class name there just save some time here so what we're going to say text 2XL kind of beef them up a little bit padding on the y-axis of 8 which is Two Rim okay perfect and then next we don't need to add any styling to our anchor tags and they're already have our um are they're already attached to the ID that we're going to set here at a later date so now we just need a way to toggle whether or not our navbar is showing so we have this is our our current Styles so what we're going to use is actually a ternary operator so what I'm going to do is go ahead and what we're going to say if the nav is true then show this else show a different set of styles so let's go ahead and write that and the nav is just our state up here that we created so now we have access to this and again make sure you're importing the U State hook here at the top so what we're going to say if nav is true just a ternary operator if nav is true show these styles else we're going to show these set of styles here and this set is going to be absolute we want it to be top zero h screen but we're going to hide it off the page so I'm going to say left negative 100 I'm putting that inside the curly brackets ease in then duration of 500. so go ahead and give that a save and what that did was just hide it somewhere over here way off the page so it doesn't work yet we need to add we need to find our our button so let's go find our button the fa bar is there okay so what we need to have is a basically a click event so whenever we click this it toggles and changes our state so what we want to add is we're going to add an on click event here so we can add that to the div or to the bars what we're going to say is on click and guys make sure if you're you know used to writing JavaScript everything's camel case here so if you did it on lowercase it's not going to work properly so and what we want to do is just run this handle nav handle nav function just like so so next let's go ahead and see if that works also I'm going to add that to our div right here there we go so go ahead and give that a save and let's see if it works hey there you go so there is our top bar here is our mobile navigation let's have a look and okay there you go perfect perfect that is what is looking like you guys and whatever you click it just closes automatically so smash the like button you guys if you feel like you're getting some value out of this as you can see it closes whenever we pass that break point I know I forgot that in some of the past videos so there you have it you guys now let's move on to let's move on to our hero background all right you guys so moving on I'm gonna go ahead and press the command B button to toggle my sidebar and let's create our next component which is going to be this hero background here at the top with an image that I just pulled over from unsplash it's going to contain this text as well so let's go ahead and do that right now let's create a new component in here and I'm going to call this hero.js.jsx so RAF CE is going to get our functional component and I'm going to go ahead and close that index.css and real quick before I forget let's go ahead and import this hero just like so and we'll import hero from components slash hero okay perfect so that looks good and everything is looking beautifully here boom there we go oh this is our this is our one right here perfect all right so let's go ahead and get started with that so here we are you can actually already see the hero text showing through but that's right we're going to take care of that so inside of our hero component here let's go ahead and add firstly we're going to add an image and in for this Source set here I'm going to go ahead and paste in whoops I'm going to go ahead and paste in the um the link that we're going to be using I'm not going to be importing any images I'm just going to paste it this in there and feel free I'm gonna add something in here slash so react doesn't give us any errors so feel free to um feel free to use whatever image you like there it is over here on the right and we're going to style it so it looks so it actually takes up the whole bit of the screen there so that's what we're going to do for that image so just below the image there we go just below the image there let's go ahead and create another div then inside this div we're gonna have yet another one then we're going to have an H1 and the H1 is going to say find your special trip just like so and we're going to have an H2 it says with weak away yay and then just below that we're gonna have a P tag and I'm gonna use some lorem text maybe like lorem 30 I think we can come back and change that it might be a little bit too much um let's just leave it there for now okay so that is all of the j6 code that we're going to be using so let's go ahead and style this so it takes up the full almost the full with this full height of the screen just leaves a little bit of room down there and let's go ahead and do that so inside of here let's target this top div first I'm going to give it a class name so the class name I'm going to say width full so width 100 then for the height I'm going to use the brackets here so I can use custom values I'm going to say 90 viewport Heights so that's going to take up nearly the entire amount of the screen but we need to add in some CSS for our some Tailwind CSS for our image here as well so we'll go ahead and do that right here we'll say class name on the image and let's say width full so with full height full which is 100 let's say object cover so the aspect ratio doesn't get all skewed so there we go image is doing just what we want perfect so next let's go ahead and we're this is going to be our container right here this div here is going to be I guess you what we would call a container so let's go and say Max width you can set with or you can say Max width so for Max width I'm going to say again using the acrylic or the the brackets there a Max width of 1140 pixels and margin Auto there we go perfect now in this div here we want this to be this here is going to be positioned absolute when I say top using our brackets again top is going to be 40 percent there we go now we also want this to be width full we're going to add in some some media queries so anything above medium we're going to say 50 percent with a Max width of 600 pixels height a full Flex Flex column so it's saying Flex Direction column and I want the text to be white let's give it a little bit of padding okay perfect there you go all right and we're going to add an overlay to this image um maybe maybe not we don't have to if you want to you can so we might actually not need to so next let's target this H1 so you see this H1 find your special trip that's that text right here and notice it like we talked about in the beginning of the video Tailwind applies these like Baseline styling so H1 at its core has no styling whatsoever so let's go ahead and give it some styling and what I'm going to say is flat and bold okay and say text for Excel I do love that about Tailwind just gives you so much uh customization so much Freedom there now with the H2 I'm going to give that a class name as well we'll say text or XL pyo4 and I'm gonna say italic yeah there we go perfect and I think that's going to be good for our for our P tag I don't need to style that at all yeah that's perfect okay so next let's move on I think that's going to be it let's go ahead and open this up just to make sure yeah perfect there you go smash the like button you guys hope you're liking this pretty cool pretty pretty cool all right so next let's go on and do these little Gallery images I guess I'm gonna call them like activities here so Resorts cruises and excursions this is going to be one component right there it's kind of an overlap on our uh hero image there okay so let's go ahead and press the control B there so inside our components folder we're going to create the activities dot jsx okay so for our activities we're going to have mass essentially through those three different ones so RAF CE is going to join our functional component now inside here we're going to have a div with an H3 this one's going to say Resorts okay and it's going to have an image and for this image I'm just going to copy these I'm going to copy these over so this is the source for the image I'm just going to put a little slash there so it doesn't give us any errors and we're going to have little overlays over here so we can add the text on top of our image so there we go so right below our image right below our image here so this actually needs I'm going to shift this up a line this actually needs to be within our div here so just below this let's say we'll give this another div and this one's going to be we're going to position this relative we'll come back and do that I'm going to give this and see here um actually I think that's all we need so let's just go ahead and copy that let's just go ahead and copy this down I'm just going to replace those just like so perfect now I think that's that's probably all we need to do here oh let's go ahead and import these so what we're looking for is activities there we go all right so we should there we have it we have our pictures in there so what I'm going to do next is actually add in I'm going to give its own unique pictures so I'm going to copy in these here and I got these pictures from unsplash I really like grabbing all my pictures from unsplash or a lot of them at least I find that I they have a majority of the most of the pictures I like just end up coming from unsplash there all right now for our final picture here there we go toggle this down all right so I'm gonna go ahead and give that a quick save gets nice and formatted there we have all of our code in there so let's go ahead and style it so it looks very nice like this and again is mobile responsive though this is what we're working on right here and again it's just going to overlap our our hero just a bit all right so let's go ahead and get started with our top div here and what we're going to say for this top diff we're going to say Max class name we're going to say a Max width and again here we are using our brackets for our custom values of 11 40 pixels we'll say margin Auto with full anything above medium we're going to say display Flex an Mt margin top we'll see negative 75 pixels whoops and what that's going to do just kind of pull it up into our hero hey there you go perfect so for our next div is just the container here and we're actually gonna all of these are going to be the same so let's go ahead and copy this I'm going to hold down the option button there we go so what we're going to have here is a class name of relative and then also we want let's see p four let's go ahead and do that there we go perfect all right so next what we want to do let's go ahead and let's see here next let's go ahead and style the H tags and we'll do all those the same as well to see what I'm doing so we want these to sit right in the middle of these images and the reason we gave the images or the the parent container or the parent yeah the parent diff here a class name of relative so we can position these so we can position the the text within there so let's give these all a class name and we want to position them Absolute Z of 10 so they're on top so I want to say top use our brackets here so 50 oh man keep doing that I go back and forth between my MacBook Pro and also ah there it is again I go back and forth between my MacBook Pro and also a desktop keyboard so it's always messing with me there on the on the keyboards so 50 will say left 50 percent and then we want to translate on the x-axis of negative 50 percent translate y-axis of negative 50 percent there we go and text white text to 2XL so it beefs it up just a little bit we'll say font bold all right there we go perfect looking good I like that so now for now let's let's style all of our images and we're going to give them kind of like a little bit of a border as you see here it has this border and has like a faint Shadow around it just a little box shadow that we're gonna apply with Tailwind as well so let's go ahead and do that now again I'm just going to select all of our images here to speed this up a little bit a Big Time Saver big Big Time Saver so let's say class name now in here for our for our images they're all going to be the same we're gonna say width full we want height full object cover relative and then what we're going to say is border of Four which is just one ram and then we'll say border White Shadow Dash LG and that's how easy it is to add the Shadow and you can add 2XL 3XL or you can say small or medium but for the sake of this we're gonna we're gonna say shadow large so that is all we need to do guys for our activities so next what I want to do is let's see how this looks just to make sure it is responsive there you have it you guys boom and you can change the break points if you want um I think medium is good here if you want to move it to small or even to large feel free to do that as well so look at that you guys smash that like button if you feel like you're getting some value out of this I had a lot of fun putting this together so next what we want to do here let's go ahead and we're going to do the booking which is this part right here this little like form here is going to be responsive as well boom there you go perfect so let's go ahead and do that form next so inside of our components here I'm going to call this booking.jsx there we go RAF CE is going to get our functional component we're not going to be importing anything so let's go ahead and real quick for the activities not sure if we need to add that's fine so let's go back to the booking here so on the booking before I forget what I want to do is add in an ID because remember when we did the nav bar when we did our nav bar our kind of scroll to here this is what we're scrolling to we're scrolling to the ID so we need to make sure we put those in there so for the ID booking we could say booking or let's see what we'd say in here I think I said maybe deals Gallery deals so I can say deals I'll just put that in there I guess I could have said booking but whatever we'll say deals there perfect now next we're going to have a form okay and we're not actually going to submit it anywhere so there's no there's no back into this so we can just leave it as is so div here then let's have a label and again we don't need this html4 we're not going to be using anything um for the sake of this video so destination and make sure we have.js okay and just make sure we have it in there probably can't see it's going to be hiding underneath all of these here so what I want to do activities activities okay make sure I have that right perfect so um all right so uh sorry I was jumping around there okay so now that we have our sorry we have our booking here that's what we wanted yeah okay sorry I was thrown off here so let's add in our um we're gonna add in the booking the booking it's here so let's go and say booking import booking from components booking there we go go ahead and give that a quick save and there we have it down here you can see our destination our little label down there okay so for our booking we already have the label now just below the label we're going to have a select in there okay and we don't need an ID and the name we'll just I'll just leave it as is for now but we are going to add some options in here so we'll say option and I actually don't need the value in there as well like I said they're not going to have a back end to this thing so antiqua and let's copy this down a few times just to have a few options say Key West I love the beaches and then we'll say the Maldives then next we'll do um Cozumel okay so after this select here after that div we're going to create another div so we're gonna say div and inside here we're gonna have yeah another div and this is going to have a get this broken down so it's easier to read there we go okay now inside this div we're going to have a label it's going to say uh get rid of this this one's going to be check-in okay so check in and then we need an input here and input we'll leave we can leave the type of uh this is actually going to be a date so input of date and then let's do a another div here we'll just copy this down save a little bit of time and this is going to be check check out okay and then next we're going to need a search okay so we'll drop down two divs for that one we'll create another div here and we'll have a label again get rid of that and this one's going to be search and we're going to have a button here and we'll say rates and availabilities oh Bill what kind of games availabilities all right I'm sorry all right um I still didn't spell it right geez there we go all right sorry now um okay let's go ahead and save that sorry you guys it's all right you can you can hate on me in the comments there so we have our component down here ah very nice very nice everything's working I have a little select down there as well with our options in here so next let's go ahead and style this thing okay so at the very top we already have the ID of deals and that's again that's kind of targeting our little component here for our smooth scrolling and our nav bar so let's go ahead and give this a class name and we'll say Max width 1140 pixels kind of maintain everything width full p dash four now for our form and again we're not it's not going to submit anywhere so anything we'll say anything above the large break point which is I believe 1024 pixels I'm not certain I'll have to double check and we'll say anything above large would justify justify the um there we go again justify between we'll say width full then items Center just like so okay so next for this div here give this a class name and we'll say we want this to be Flex Flex column then padding on the y-axis of two and then or sorry margin of the y-axis 2 and then also padding two as well so hey there you go everything's looking good so far that's what we want we just need to keep styling so for our label our label is not going to need any styling but so for this select here we will and we can actually just get rid of that for our select let's give this see large anything above large we'll say width hmm of 300 pixels anything above medium we're just going to say width full which is 100 border rounded MD that's one we haven't used yet basically just gives a little border radius makes the the edges just a little bit rounded you can do that for the buttons as well if you like then a padding of two now none of our options need any styling so next let's drop down to this div right here I want to give this a class name and this one's going to be displayed Flex with a width of full and then these two boxes are actually going to have the same these two divs surrounding the inputs let's go ahead and just again I'm going to hold down the option button save a little bit of time and What needs these need to be is flex we're going to say Flex column width full anything above the large break point is going to be Max width 250 pixels there we go my two MP two there we go perfect now for our input that's looking pretty good so far there you go looking pretty good so next let's go ahead and Style again not the labels but our inputs um we're going to install the inputs as well so again holding down the option button let's give it a class name for our inputs let's say border rounded MD and you can do rounded SM for small medium or large it kind of changes the amount of the Shadow there so there you go perfect looking looking good you guys now next let's go ahead and Tackle this little search div right here so I'm going to give this class name as well we'll say Flex won't display Flex column margin yf2 padding Y2 and width full there we go look at that look at that perfect and then for our button that's all we need might see class name width full for larger devices there let's go ahead and look at that hey there we go perfect everything is displaying just beautifully on smaller devices and larger devices as well everything look at that awesome perfect so this is our date picker there awesome awesome there you go now you just need to hook up and back into this thing perfect okay so let's move on guys what I want to move on to next is going to be this Gallery here and again going to be mobile responsive as we shrink down to smaller smaller devices changes the direction so let's go ahead and do that one right now kind of go ahead and just close a few of these so we can get those out of the way so next inside of our components a another component and this one's just called gallery dot jsx so let's go ahead and get started with our Gallery raf-ce it's just going to be generating our functional component here so again let's start off by giving this an actual ID so we have something to scroll to within our nav bar okay so command B going to toggle that sidebar again now for our let's see for our let's start with an H2 here so we're gonna start with an H2 this is gallery so we'll say H2 gallery now we're going to need a div here then inside that we're gonna have another div and this is this jib is going to be basically um what our image is going to live inside so we'll say image I'm just going to give it an ALT there we go perfect and let's go ahead and let's go ahead and I'm going to go ahead and add in my image that I'm going to be using again it's another unsplash image there it is perfect now let's just hmm we can just copy this down I believe we're going to have one two three yeah we're having five of them yeah so four or five so let's go ahead and copy that down I'm just going to copy that div down right there so say two three four and five okay so let's go ahead and now style this thing so all the divs are gonna be the same and we're just going to change all this direction and how much of space that the image is taking up we're going to do all that with with our styling within Tailwind so okay let's go ahead and import it real quick so we can see what we're doing we'll say gallery import gallery from components Gallery there we go okay so there we have all of our images they're all the same images so let's go ahead and let's go ahead and fix that right now so I'm just going to copy over some of these and you guys if you want to use your own images that's cool too there we go okay and this third image pull that down as well again if you want to skip through this this is fine as well I may end up just fast forwarding through this part in the end as well okay so now we have all different images in here boom there we go so now we have all different images in here perfect let's go ahead and style these things up so for our our main div here with the IDF gallery whoops we're going to use the same we're going to use the same Max width on all of them just going to maintain our consistency so 1140 pixels margin Auto will say width full so width 100 percent P4 and again adding that to all sides but today to say p y we're gonna add 16. so I guess we could say just like PX4 py16 that's going to be all all the same there okay so they don't get stacked on top of one another when you add multiple uh in the same class name there so next let's hit our Gallery so class name we'll say text Center we want to sit right in the middle I want it to be this gray color uh we'll see text Gray 700 and again set not 7 700 again if you wanted to use custom values this would be you could enter in a hex code here or something like that but again we're just going to use the text uh gray 700 and then P4 to give it a little bit of a little bit of padding there perfect now for this div here we're going to use the um the grid layout so class name we're going to display as grid something we haven't done yet in this build so anything above the small break point we're going to say grid calls five and then we're going to say a gap of four so gap of one REM so that kind of spreads everything out there there we go so as you can see we get the larger screens we now have the five columns so next we need to add in a few more Styles and this is what we want on smaller devices we want to shrink down a little bit we just need to change those down there so gap of four perfect now for this div here I'm going to give it a class name and so anything above the small break point I want this specific div of this first image to span we'll say span three and then column I want it to span to and row span 2. so there you have it you guys look at that that's all you need to do everything else just kind of falls into place there I am going to add some styling to our images but that is it you guys everything else like I said falls into place so for our images let's go ahead and let's go ahead and I'm going to go ahead and add in some styling right here so again holding in our option whoops option button here ah there you go again I'm gonna say class name I want to say width full height full object cover just to maintain if these are different style images or different width Dimensions images they're all going to display as they should so there you have it you guys look at that again smash the like button hope you get this value out of this we don't have our oh yeah that we're already adding in our smooth scrolling that is awesome you guys awesome let's make sure our mobile nav is working as it should boom there you go all right smash that like button you guys hope you're liking this what we're going to build um after this component here which we're finished now let's finish up with our form there down at the bottom so let's go ahead and open up yet another component here and we're going to say we're going to call this form dot jsx go ahead and press enter now for our form or I guess we could call this Con let's call it contact call contact makes more sense there so for our contact not using any state or anything like that and let's go ahead and just import this down I'm going to copy it boom contact okay okay so for our contact here whoops um let's see here our contact let's go ahead and see we're getting this error here there we go perfect so for our contact down here yeah there it is you can see it so for our contacts let's go ahead and like I said we're not importing anything so let's go ahead and give this parent div an ID of contact that way we can use our smooth scrolling okay and within this we're going to have an H2 and it's going to say send us a message Yay there we go now under the H2 always have a little P tag we'll say we are we're standing by okay perfect now below this we're going to have a div and we're going to have an image in here and I'm going to go ahead and pull over the the source for our image here boom paste it in there all right fill that in so react doesn't give any complaints so now that we have our image in let's see if we can see it down there yeah perfect all right but we're going to go ahead and when we come back we'll go ahead and finish up the the sizing of that image okay so um yeah after the image let's go ahead and add our form so we're going to say form and this isn't it doesn't need an action it's not actually going to submit anywhere again so again if you want to connect it back into this that would be awesome input type of text perfect perfect let's give this a place placeholder I was hoping to be able to see so placeholder of first and I'm going to copy this down once more there we go and so first this one's going to be last okay now this one here is going to be type email and this one is going to be tell for telephone there we go and then we also need see let's do another one here for an address this one we don't even need a type we'll just leave type of text we'll say address okay and then we need a text area perfect so text area and we don't need the um we don't need the ID on it we don't need the name as we went over it's not it's not going to be submitting anywhere The Columns 30 rows 10 that's fine and then let's just add a button below this there we go and we'll say submit so there is there is other stuff you can kind of see the Tailwind applies some base style so that's why it's kind of looking funky but let's go ahead and style this thing and then move on to our our finish up with our footer so for our styling let's start out here at the top with our ID and this is just kind of the parent diff here so we'll give it a class name and we'll say again just to kind of keep things consistent we'll say Max width and we could have just added a a global a global variable or applied this to our could have made a component for our for our container many many different ways to do things this is kind of how I how I chose to do it so margin Auto with full and this is typically how I like to do it having y of 16 there we go perfect there we go so for our H2 let's give this a class name and what we want text Center text Gray and again since we're reusing these H2S they all seem to be our um kind of like headings I could just add some Global Styles and our index.css that way we wouldn't have to just keep redoing it over and over but that's what that's what I'm doing whoops so next we need to style this here so class name for the P tag we're say text Center text Gray 700 and we'll say py depending on the y-axis of two so we're going to give that a save and there it is send us some send us a message we're standing by perfect okay so next let's grab this div that is the the parent container to our image we'll say class name when this to display is grid anything above medium I'm going to say grid columns 2. okay there it is perfect side by side this is where our form is going to be over here on the right just like our our demo there we go all right so shrink that back down so that's all for our image or sorry for our for our container now let's go ahead and add some class here to our image here so I'm going to say class name and what we want this to display is width full anything above medium we'll say with full object cover ing two and Max height of using our brackets here for our custom values here we go all right so inside of our form now we have a div here so hey that's looking good already let's give this a class name and again this is the div inside of our form so it's going to style all of our our inputs here I'm going to say grid grid columns two okay so for these first two I want those to be on same line so we're going to say border M2 whoops forgot to add my class name class name so we'll say border margin to padding F2 there we go now for our email perfect that's looking good there let's go ahead and do our email next so class name for our email I'm going to say border margin two padding a two but we're also going to say or you know I think that's that's going to be good there and actually might be those on could just use those for all of them so let's do the telephone next paste that in Border margin two padding two now for our text input here so we'll see let's go ahead and do that we'll say border and we actually want this one to take up a little it's going to take up a little bit more so we'll say um com span let's say two padding two margin two okay there you go so is our address takes place across the entire screen here and then we have our text our text area so let's do that one next so for our class name on the text area we're going to give it a border we're going to say column span two there we go have that nice Tailwind intellisense there right working for us and then we're going to say again margin two padding two look at that awesome looking very very nice there we go have it okay so next let's install our buttons super quick so we already have the Baseline styles that um attached short button which and this is how I like to do it I like to add like the ones that I know I'm going to use then if I'm going to change any of the sizing I can just do that within the the button element itself on the page so we'll say com span but this way I don't have to add in the um this way I don't have to add in the colors on every single every single button so Marge on the X2 so background I think that's all we need so let's have a look there you go okay let's now open this up make sure it is responsive boom look at that you guys smash the like button if you feel like you're getting some value out of this and we're just getting so close to finishing up boom there you go everything is working beautifully there he goes the gallery and our form down here at the bottom so next let's add our little footer and we'll be done here so we'll say footer.jsx and now for our footer it's going to be super simple super super simple rfce it's got our functional component in here let's go ahead and import our footer there we go and we'll just add it right here there we go and I didn't even look at this we can actually just leave that as an empty fragment if we wanted to looks like I didn't use a few things um let's go and just clear those up the nav bar so it's saying we didn't use I got them we didn't have to use the use effect so and then the BS Square dots okay I still need to use them hey there we go perfect now for our footer let's go ahead and style that and it's gonna be real super simple just this little thing down here and um and that is gonna be it so let's go have a look here all right so for our footer here we have a parent div there we're gonna have another div in here and this is going to be we're going to use an icon in here the BS Square dots sometimes they'll let us Auto Import sometimes not nope that's okay so let's import BS chat Square dots from you probably already know react icons remember the little pretext we're using BS there we go okay so we have our icon I'm going to go ahead and give it a uh our size property as well so I'm gonna give it a size property of 30. there it is perfect and we're going to come back and style that here in just a minute so um just below that let's add an H1 and we'll just give it a little week away brand okay so let's style this thing so the parent container again I'm going to use that matte whoops the there we go Max width of these are brackets here 1140 pixels I hope you're starting to finish this stuff kind of as I'm typing it that way you don't have to follow along line for line is hopefully you're picking up Tailwind um easily as it was for me so yeah I really really love Tailwind you guys I hope you're liking it as well so right here we're going to say Flex items Center margin Auto and justify bye 50. there we go justify Center perfect there we go all right now for our little icon here let me give it a little styling as well and we just want it to be text we're going to use our our variable here so bar and we can open up and we're going to say primary dark or primary light either one's up to you we'll say primary dark I think that looks a little bit better then let's just give a little bit of spacing we'll say margin right two to bump it over there a little bit okay so now for our H1 give this class name we'll say text XL oops Excel font bold and make it that gray 700 color again so hey there you go perfect all right so let's check this thing out have our top bar we have our nav bar here that is mobile responsive with a smooth scrolling here boom have our hero with our text we have our nice cards here our Gallery with a little search form a little booking booking component there we have our Gallery here a form and a footer that concludes the build today and react.js styled with Tailwind CSS smash the like button you guys I hope you got some value out of this I hope you are enjoying Tailwind as much as I am and stay tuned for some more videos to come so much more fun React videos I have uh coming up for you guys so thanks for watching you guys smash the like button and I'll see you on the next one

Channel: Code Commerce

Views: 30,087

Keywords: react js, build a react website, tailwind css, react tailwind css project, react icons, smooth scroll tailwind css, grid tailwind css, flex tailwind css, react forms, tailwind css contact form, build a react js website

Id: UyYJjU4ZK0I

Length: 75min 45sec (4545 seconds)

Published: Thu Dec 01 2022