Build a Modern Landing Page With Tailwind CSS

all right what's going on everyone in this video we're going to be taking a look at tailwinds which is a utility first css framework so then we're going to be using tailwinds to create a modern landing page for a browser extension called bookmark now before we go ahead and create this page i first want to run you through the layout here so starting off at the top we have our header which is going to have our basic branding here on the left hand side and then we're going to have our navigation on the right next up we have our hero section which is going to have our header we're going to have a paragraph tag to describe what the extension is about and then we have our two call to action buttons right here and then we have our image on the right so to achieve this layout we're going to be using flexbox here all right now next up we have our features which we have our header once again and a paragraph tag to describe this section and then we have each one of our features here which the layout is going to be very similar to our hero section here so we're going to be using flexbox to lay out these features as well okay now the next section we have is going to be for downloading the extension now for this section we're going to be laying this out using the grid okay so within this video i'm going to show you how to incorporate flexbox using tailwinds and also the grid okay now the next section here we have is going to be for our faq now this is going to be completely static now what i mean by that is we're not going to actually be able to toggle these faq faq items here now i didn't want to incorporate any javascript into this video i wanted to mainly focus on building out a page using tailwind so if you do want to challenge yourself and incorporate a accordion menu style faq section into this project i do have a video that goes over how to make accordion menu using javascript and i'll go ahead and link that down below in the description here okay now the last section we have here is a stay up to date where you can go and enter your email and sign up for the contact list and then we have our footer here with our branding and our navigation links and then our two icons for social media now this application is also full of responses so if i go to inspect this here and we are taken to a mobile view you can see that everything is now stacking when we scroll down here through our application or our landing page here i should say now one other thing i do want to mention is that our navigation is going to collapse but we're actually not going to be displaying or creating a mobile navigation menu here within this video now just like i mentioned with my accordion menu video i do have a video that goes over how to create a mobile navigation menu using javascript once again and i'll leave that link down below in the description to check that out if you want to challenge yourself and incorporate that into this landing page here alright so that's what we're going to be building here so let's go ahead and get started now before we get started here i want to do a quick introduction to tailwinds for anybody that has not had the opportunity to work with this framework now if you've already had the opportunity to work with tailwinds and are familiar with it i'll go ahead and leave a timestamp down below in the description to go ahead and skip this section now first off what is tailwind so tailwinds is a utility first css framework packed with classes that can be composed to build any design directly in your markup meaning you never have to leave your html sheet in order to design or style your page okay now i do want to mention that you should have a great understanding of html and css prior to learning tailwinds or any other css framework for that matter because especially with tailwinds if you're not familiar with css and its core concepts the class structure or adding these classes to the html is going to be very meaningless and you're really not going to have an understanding of what is going on okay now next thing is tailwinds is very low level compared to other frameworks such as bootstrap and materialize now what do i mean by low level now what i mean is that bootstrap and materialize our component based css framework so they have all the components built out for you and you incorporate those into your you know your html and your page now when you make a bootstrap website or a materialized website you're going to have a very clear idea when you look at that site that it was made with bootstrap now when you use tailwinds it's going to be very hard to distinguish that it was made with tailwind because it's so low leveled and you're adding simple styles to your elements with the low level classes that tailwind creates okay so hopefully that makes sense and that's kind of a simple brief overview of what tailwinds actually is so what are we going to be covering here inside of this video now to cover everything that talents has to offer would be nearly impossible and that's not my objective with this video my objective is to give you the foundation in order to start creating pages using this framework so what we're going to be covering here is first off we're going to be installing tailwinds via npm now you can also use tailwinds via cdn but it comes with a lot of limitations now we're also going to be customizing our tailwinds framework here we're also going to be applying base styles to our classes and we're going to cover a lot of the utility classes that come along with this framework such as layouts for flexbox and grid we're going to be touching upon spacing classes typography backgrounds borders transitions animations and more so we're going to be covering a lot here and by the end of this video you should be able to head it on your own and create pages using this framework so since we're going to be installing tailwinds via npm you're going to want to make sure that you have nodejs installed on your computer so to look if you have it installed because you may have it on your computer not even know it open up a terminal if you're on mac or if you're on windows command prompt and type in node hyphen v here and if you return a value here where it says version 14.17.0 or whatever version is current right now at the time of watching this that means you have node.js installed on your computer now if you don't have anything when you type in this command right here what you want to do is head over to nodejs.org and download the latest feature here and then go through the installation steps to install it on your computer and then after that which you want to do just to ensure that you have it installed correctly go ahead and say node v again and ensure that you're getting return a version here so for this project i'm going to be using vs code and inside of vs code right now i have an empty folder called the modern landing page here so to begin what we want to do is head up to our tab and i want to click on terminal and we want to open up a new terminal here now the reason why we needed node is to run a command called npm we're going to say init hyphen y to create a new package.json here okay and you're going to see that appear right here which is where we're going to have all of our dependencies which is going to be tailwinds for this project here so what we want to do is if we head over to tailwindcss.com you can see that to get started we want to run the command npm install tailwind css so i can just click and copy this right here we can head back over to our terminal and i'm going to paste this in here and then this is going to install tailwinds into our dependencies here so that has completed and now you can see inside of our dependencies we have tailwind css and currently at the time recording this video it is on version 2.1.4 okay so what we want to do next is we're going to head over to tailwinds and we're going to go to the documentation for installing here so you can see getting started and we have installation right here now the first thing we want to go ahead and do is we need to create a css file if you don't have one which we don't and we need to use the at tailwind directive here to inject tailwinds base components and utility styles into our project here so let's start off by copying these three right here and we're going to head over to our project and we're going to create a new folder and we're going to call this src and we're going to have a new file of style.css here and we're going to paste these in now we want to have a folder for our output so i'm going to create a new folder and we're going to call this public okay now inside of here we want to create our index.html and we're going to have our style.css here now what we need to do to actually generate all of the styles here from tailwinds is we need to run a build command now where we're going to do this is inside of our package.json here so currently we have this scripts right here which we have a test one now what we're going to do is we're going to remove this test value here and we're going to create a new script called build colon tail winds okay now inside of here what we want to do is we're going to say tailwind build and we want to build from our source file here and style.css so we're going to say src and we're going to say slash style dot css here and then we want to output this to our public and our style.css here so how we can do that is say slash or dash o and then we're going to go public slash style dot css now what we can do here is inside of our terminal we can say npm run and we're going to say build colon tailwinds here now what should happen is let's see here oh did we not save this we didn't save it now let's try that so npm run bill talons here and as you can see right now it's going to build our style sheet here and it has finished so now if we head over to this public folder in our style sheet you should see all the stylings that we have from tailwinds here so we have a simple reset here which is going to be like the base and then if we go back here we should scroll down a little bit more and start to see all the styling and utility classes that were imported here so let's see here and if i keep crawling down you'll see a whole bunch of these so we have like space y of you know zero divided by point five and if we keep going down we should see a lot uh let's see here we start having our i think i've seen some background ones in here but i i think you guys get the idea so what we did here with that build command is we got all the base styling for all the utility classes from tailwind so that we can use them inside of our markup now so let's begin here by creating our boilerplate with emmett so to do that i'm going to say exclamation point and tab to go ahead and generate our boilerplate here and let's give this a title of book mark landing page here and then let's link up our style sheet here that we went ahead and generated from our src here so we're going to be using this style sheet inside of our public folder so we'll say link and we'll do dot slash and we'll say style.css here now let's go ahead and begin with our markup and the first thing we want to go ahead and create here is going to be this navigation or our header here and let me go ahead and close that out okay so let's go ahead and open up our body here and keep things clean and divide each section up i'm going to be using comments here and i'm going to say header now let's go ahead and start off with our header tag here now inside of our header tag what we're going to be using is another tag of nav and here's where we're going to be using our first class so we want to use a class of i can spell here containers so this is going to keep our compo are sorry our elements inside of this nav tag confined to a certain width here so if we head over to our documentation here you can see that on the layout section here we have the container so this is going to be for fixing an element's width to a current breakpoint so here is all the breakpoints so we have at small the max with the 640 768 is the uh next break point and you can see that it kind of correlates to the break point what the max what is going to be to keep your elements confined to each one of these break points here now the one issue with the container class here is it's not going to automatically center the elements into the middle of the page so if we were to let's go ahead and say inside of our container here we're going to have an h1 which we're not we'll just say testing here so to view our changes or to view this html file i'm going to be using a extension called live servers so let's go ahead and open this with live server here and as you can see we have a container class around here and it is working but it's not centered so if i click on this right now you can see we have this and the max width is set to 768 but it is not centered into the page so there are two different options we can go ahead and do to get this centered into the page so first off we could pass in another utility class of margin on the left and right of auto so you can see that right here all right so if we pass that class onto here we say mx and we do auto and the cool thing i believe is another extension i'm using is html and css support which is the reason why you're going to see these classes as i'm typing them out here so that's pretty cool and i would recommend using that extension for talons as well so if we save this and head over now you can see that it's going to be centered into the page but i don't really like that and i think there's a better way to go ahead and do this and that's going to be documenting here inside of the docs so if i scroll down you can see we have this customizing section so what we want to do here is have our container centered by default and we can do that with customizing our project inside of a file called tailwind config dot js so that's the method i'm going to take here to center our container inside of our landing page here so let me go ahead and remove this and let's begin to set up the ability to customize our tailwinds project here now to create our configuration file as you can see in the documentation we have to run this command of npx tailwind css and knit into our terminal and what this is going to do is create a minimal tailwind.config.js file at the root of our project here which would look something like this so let's go ahead and copy this and let's head over to our project here and let's open back up our terminal and it will open up a new one which is fine so let's go ahead and say npx tailwinds css and init that and we should see that configuration file be generated right here all right so what we want to do is inside of here we have this object of theme and we don't want to extend anything right now so i'm going to go ahead and leave that as empty but what i do want to do is inside of this theme object i'm going to create a new object of container here so if we head back to our documentation here on the container you can see that what we need to do is we have our container object here now and we need to pass the value of center to true here okay so now if i say container and i put center here if i can paste this it's not working it will just say center and we'll set this equal to true now if we head back over here and we take a look at our project you can see that it's not centered now each time that we make a change here whether it be in the tailwind config.js or the source style sheet here we need to rerun our build command that we have inside of our package.json here so if i go back to our first terminal here let's just go ahead and click on that and if we run our npm run build of tailwinds here you should see now that once it's finished building here we should be able to head back over to our page here and you can see that now our container is centered by default and we won't have to go ahead and put that additional utility class of mx auto now one other class or one other thing i want to do here is if you head down there is no horizontal padding by default either on the container so in order for us to not have to use an additional utility class for padding we can add a padding value to our container as well now what i want to do for this is we're not going to have it say to padding we want to go ahead and give it a padding value here and we're going to say quotes one ramp here which is going to add 16 pixels of padding on each side of the container so once again we're going to have to rerun our build command here of tailwinds and once this is finished building we should see that on our container class now if we head back over here and we inspect this you can see we're going to have that additional padding that we added to the left and right of one rem here now there are a few additional customizations i wanted to make to our project here and the first one's going to come on our container once again now currently our max width on the container is set to the current break point value that we have here defined by tailwind so the max width that we want for our landing page here is going to be 1124 and as you can see here on the xl screen on the xl breakpoint and 2xl the max width is just way too large so how we're going to fix this is we're going to head back over to our tailwinds config here and we're going to create a new object called screens here okay now what we want to do is you want to target those breakpoints so we want to go ahead and set the max width on a large screen so currently if we go back to the documentation here on large the max width is set to 1024. what we want to do here is on large you want to set this to 11 24 pixels and then we want to target our xl and we're going to do the same thing we're going to say 11 24 pixels here and then to target 2xl because it has a number we have to wrap this in quotes we're going to say 2xl here and we're going to put a colon and we'll say 1124 pixels here now we need to do is head up to our terminal and we're going to delete this delete that one and then we're going to re run actually that's the wrong one too let's go back to our first one here and we're going to rebuild our uh css here and now once this is finished you should see once we go over to our application here or keepcon application our landing page if i refresh this you can see that the max width is going to be no larger than 1124. so if i inspect this and we make the screen a little bit larger you can see that now let me see here that the container is getting set to a max width of 1124 which is going to align with what we have here in our finished demo landing page so we're going to be using a custom font here from google inside of our landing page here by the name of poppins so i've already went ahead and pre-selected all the font weights that we're going to be needing here for this landing page and we're going to opt to use the import directive here so let's go ahead and copy this and let's head back over to our project folder here and inside of our source style sheet here we're going to paste that import directive in just below our tailwinds directives of base components and utilities so let's save that and now what we need to do is head back over to our tail one config and we're going to define a new object here inside of our theme of font family here and what we want to do is we're going to give this a name of poppins and we want to set this equal to an array now inside of this array we're going to pass the value of poppins and then as a fallback we're going to say sans serif here okay so then we need to pass a comma right there to avoid that error and now we have access to use pop-ins inside of our project here so let's go ahead and actually run this and build so then what we can do to actually use this file because with this implemented like this we still aren't actually using it inside of our project so even though i built that out if i refresh this you can see that it's still going to be using the default font that taiwan is using which i believe is just sans uh ui sans serif okay so if we head back over to our project here and on the body we can go ahead and add a class here of font and then the name that we gave gave it inside of our tail and config which was poppins right here so if we copy that paste it and then we head back over here as you can see now we are going to be using poppins as our font family inside of our landing page here now lastly we're going to be creating some custom color classes that we're going to be using throughout our landing page here now by default tailwinds comes with a pretty large palette of color class that you can use inside of your project but i want to show you how you can create your own custom colors and use those inside of your tailwinds project here so if we scroll down through the documentation here there are a few ways that you can go ahead and do this now the way we're going to be doing here in this video is i'm going to extend the actual color palette and i don't want to override it so if we scroll down here you can see the section for extending the default so we don't want to override all the colors that tail once has to offer we want to extend those and add some new ones so how we do that is through this method right here we have this extend object on our module exports or inside of our theme i should say and then we need to pass the colors object and all the color classes and color values that we want inside of our project here so let's go ahead and begin to implement that so inside of this extend right here we're going to pass the colors now i'm going to copy and paste in the colors that we're going to be using for this landing page here so we have five we have bookmark purple bookmark red bookmark blue bookmark gray and bookmark white now i named them bookmark you can name anything you want just to clarify that these are the custom colors that we're going to be implementing here so what we need to do is i can save this and then we need to build our css again and then once this is built out we can actually use these inside of our markup here now how we can use a custom color on a text or if we want to change the text color i should say so we need to pass as h1 to class and we need to say text right here so once you define text you then want to define the color that you want this text to be so in our case we named one of our values book mark and we gave it a value of purple here okay so we want this text to be the bookmark purple that we just went ahead and created so now if i head back over to our landing page here you should see now that we have this class of text bookmark purple and our text is that color of the bookmark purple that we just went ahead and defined inside of our tailwinds config okay so with our customization all complete let's begin working on our header here so what i want to do is remove this h1 here as we don't need it it was just for testing and let's start with actually styling up our nav tag here so we have the container class on here which are going to keep now what we want to do is we want to set this nav tag to display flex and how we can do that is with the class name of flex here okay now if i head back over to our documentation here if we go to the let's see the layout section here and go to display you can see that they have a whole list of options that you can use to display your elements so we're going to be using flex here now on top of flex you want to align all the items to the center now how we can do that with tailwinds is we can pass it the class name of item center which is going to be equal to the property here of align items to the center all right so we'll go ahead and add items and you can see here that it's going to list some of those classes out here for us so we want to say item center now on top of this what we want to do is we want to add some padding to the top and bottom so we can do that with the class name of py and then we select the number that we want so i'm going to say 4 in this case so to show you where they have a list of all the options here we can go to spacing and padding you can see here they have p 0 and that's going to add padding to all sides so you can see padding of the value 4 is going to be one rem and if you just use p it's going to add it to all sides but if you add px i believe you scroll down here a little bit you'll see that py is going to be for top and bottom and then p x is going to be for the left and right all right and the same thing goes for margins so for margin they have just m and the number which is going to set margin to all sides and they also have margin x i believe let's see here we scroll down they have margin y and then margin x so the same thing as padding okay so it makes sense when you think about it so it's margin on the y-axis and then margin on the x-axis so the classes that they use here are pretty explicit and they tell you pretty much what you're going to be doing to that element all right so we're going to add py4 which is one rim now we also want to add a margin top of 4 here to push it away from the top all right now what we also want to do is once we get past a certain break point i want to apply a different class here so in this case once we get past the small break point which i believe is around 628 pixels i want to increase this margin top here now how we can add classes using the breakpoint media queries is we need to target that breakpoint so in our case small is sm and then we're going to put a colon and then we want to put the class that we want to apply so in my case i'm going to add a margin top and we're going to increase this to 12 here okay so inside of our nav tag just to kind of show you how this is working when we get responsive i'm going to add this h1 tag back here and if we go back over to our landing page here you should see that now we will have i go to here our our nav it's gonna be margin top 12 which is three rem but if i shrink this down to a smaller viewport you should see at around 600 it should go up to i believe we set it to one rem with the value of mt4 okay so that's how that works and how you can add simple media query classes to your actual elements here all right so let's go ahead and remove this now what we want to do here is we're going to add a ul here for our sorry we're going to first start off with a div for our branding image so this is set up to be a flex container and by default flex is always going to be in a flex row so we're going to be side by side here so what we want to do is we're going to add a div and we're going to give it the class of py and 1 for padding on the top and bottom of one and then i added this image folder here which you can get from the finished repository that's going to have all the images that we're going to need here for this landing page so what we're going to do is we're going to add an image tag here and for the src we're going to do dot slash and we're going to go to images and we're going to want the logo bookmark svg here okay and that's going to be it for this image right here now the next thing we want to go ahead and create is going to be our ul for our navigation items here so let's go ahead and give this a class now what we're going to do here is we want to hide the ul on smaller screens so we're going to display the hamburger menu instead so what we want to do is by default we want to have this ul be hidden okay so we're going to do that with the class of hidden which is going to set it to display none then when we get to a small screen very similar to how we did it with our nav tag right here we're going to set this to display flex okay now to make this take up as much space as possible or the entire space and allow room for this image right here we want to pass it the class of flex one so if we head back over to our documentation i'm going to try to show you where i'm finding all these as i go along to kind of explain what each one of these classes are doing so if we head back over to our documentation here and we go to i believe just flex and we set it to flex 1 what it's setting it to is flex one one zero percent and if you scroll through the documentation here you can see it says use flex one to allow an item or a flex item to grow and shrink as needed ignoring its initial size which is what we're doing here okay so hopefully that makes sense now we want to justify all the content here inside of this ul to the right hand side so to do that we can use a similar class to what we did here with items uh this actually should be item center not start here so let's say item center here that should not be started so you can use a very similar class to our item center here to push the content to the right hand side so we don't want to use align items you want to justify the content to the end so we're going to use a class called justify end here and then we also want to align the items to the center very similar to how we did in our nav element here so we're going to say items and we'll say center here okay now there's a property on flexbox that we can use to have space between our flex items which is going to be gap here so what i want to do is set the gap to 12 and i'll go ahead and reference this in our documentation here you can see that we have this gap right here and we're going to be using gap 12 which i believe is equivalent to three rem so we're going to have three rem worth of space in between each one of our flex items inside of our ul here okay so let's go ahead and add that and then what we want to do here is for all the text inside of this ul we want to give it the color of our custom configuration color here of bookmark blue okay so to do that as we reference earlier we go ahead and say text and then we define the color or the value of the class which was bookmark blue so let's type in book mark and you can see blue is populated right here okay now for all the ul items here we want them to be uppercase so to have that happen we need to pass the class of uppercase here which is going to set all the text to text transformation uppercase or i think it's capitalized or actually sorry it's uppercase i'm getting myself confused there okay and then the last thing is we want to target the font size in here now we haven't talked about this yet and to do this let's head down to our documentation here and for font size we're going to use a very similar class as we did for our font color we're going to first reference the text and then we want to add a dash and then we have all these values here of xs so we have small we have base large xl 2xl and it continues on all the way through 9xl now for this navigation we're going to pass the value of text extra small which is going to be a font size of 0.75 rem here okay so we'll say text and we'll say xs here all right and that's going to be our styling for our ul here so let's actually add some li l i items here or li i can't speak so what we'll do here is we'll say features now when we hover over these li so i have one here right now so if i go back over to our landing page here you shouldn't see that because we're on small we're hiding it but as we get to a larger screen you can see that now we're going to see that allied l i item geez i cannot speak and say that today now when we hover over this you want to have a cursor pointer which right now we don't have so to add that what we can say here is we can add a class to our li and we can say cursor dash pointer and if we save that and head over here now you'll see that we have a cursor pointer when we hover over our alloy item here all right so let's go ahead and add the rest of these here and we're going to have one that says pricing and then we're going to have one that says contact here okay and as you can see when we save those we're gonna have this nice gap of three rem between each one of our items here and we can hover over these with a cursor of pointer now the last thing we need to create here is gonna be our button here on our navigation here so what we're going to do is we need to come inside of this ul and instead of creating an li we're going to create a button tag here okay and we're going to pass us the value type of button here and inside of here we're going to have it say login now what we want to do is we're going to pass us a few class values here okay now to change so we've talked about changing the text color with the uh with the class of text and then passing it xs or with the text color i should say that's for the font size so we had text and then we passed the value of the color class that we created now to change the background color what we need to do is we're going to pass the value of bg here and then we're going to pass our background color so in this case we're going to be using bookmark red here for the background and we want to make this text white so we're going to say text and we're going to say white here now don't get this confused with our bookmark white this is actually the tailwind's color default of white which is simply going to be white okay then what we want to do here is you want to round the corners of our button and to do that if we head back over to our documentation if we go to let's see where is this at let me scroll through here it might be down here a little bit um i believe it's border radius here and you can see they have all these classes for adding border radius so what we want to do is we're going to be using this rounded md which is going to have a border radius of 0.375 rim which is equivalent to i think about 4 or 5 pixels because i believe 5 would be 8. so that sounds about right all right so let's add that class to here so we're going to say rounded md and then we want to add some padding to the left and right and the top and bottom so we haven't done any to the left and right i don't believe so to do that we're going to say px and then we want to say 7 here and then we're going to add some padding to the top and bottom which is going to be three okay now if we head back over to our landing page here you should see we now have this button okay and then we need to also pass it the value of uppercase because it's not going to by default it's not going to look at this value on our ul and apply it so we need to go ahead and say that directly here so if we save that and we come over here now you should see that it is capitalized and that is looking great now the last thing we need to add is when we get down to a smaller screen we want to we're hiding this but we want to show our hamburger menu here now how we're going to be showing our hamburger menu is going to be through a font li or sorry it's going to be through an icon library of font awesome so in order to use that we need to go ahead and actually import that here into our project so to use this library i'm here on cdnjs.com and i search that font awesome i'll leave the link down below in the description to this exact page right here now what we're going to do is we're going to copy the link tag here and we're going to head back over to our project and just above our style sheet here i'm going to copy and paste that link tag in and now we'll have access to use this inside of our project here so just below our nav here what i want to do is we're going to create a new div and this is going to have the class of flex here now as you recall what we did here is we are hiding this by default and once we get to a small screen we're displaying this as flicks so what we need to do is reverse this so by default we want to display this div which is going to contain our icon s flex and then when we get to small we want to display this as none so we're going to pass the class of hidden here okay now we also want to pass this the class of flex 1 very similar to how he did our ul here and to get this icon to the right hand side we need to pass it the class of justify end as well now to get the actual icon here let's head back to our browser and i have font awesome pulled up here in another tab and i searched up bars so we're going to be copying this html tag here which is an i class all right and then what we want to do is inside of this div we want to paste this in here now currently if we take a look at this it's going to be very small now what we want to do is we want to pass it a text font size class so we're going to be saying text here inside of this i class and we're going to be passing it to excel here okay and that's going to increase the font size for us here so if we head back over to our landing page here you can see that looks a lot better and it is more proportionate to our actual navigation here so that is going to do it for our header here or our navigation so as we increase the font size here our navigation is going to show and it's going to stay fixed at a max width of 1124 and if we scroll down here to make it responsive down to mobile size you'll see that our navigation is going to disappear and then our hamburger icon will be be displayed here instead of that now moving along here now that we have our first section out of the way i'm going to start to speed some things up just a little bit so most of the classes that we use within our header section here we're going to be using throughout our landing page here but just in different ways so if you find yourself lost or kind of confused just reference the documentation they are great and to be honest i believe in my opinion that the class naming convention really goes ahead and tells you exactly what you're doing or applying to that element here all right so let's go ahead and collapse this header tag here and let's go ahead and do a few line breaks below our header and add our comment for our hero section here so the first thing i want to do is i'm going to add a new section tag here and i'm going to give this a class of relative and what this is going to do is it's going to position the section tag to be relative all right so pretty easy stuff now what i want to do inside of this section tag here is create a new div to contain our hero section so for that reason i want to apply the container class now on top of this i want to display our container here as flex and we want to display this as a flex column reverse so by default if you are familiar and have worked with flexbox you'll know that when you display something as flexed it is automatically by default set into a row now on mobile we want these things to stack so we need to define this container as a flex column now the reason why we're putting this reverse on here is because the order i'm going to create it in is going to be the content we're going to have then the image so on mobile we want the image to be first and then the content to come second and in the current order we're going to do it in with the html that's not how it would appear on the actual screen so you can see here if we scroll over to our landing page our finished one you can see that the markup here is on the left and the image is on the right but when we inspect this here what happens is that the image goes on top and the content goes on the bottom and that is because we are using flex column reverse which is reversing the order in which the um you know the styling is reading the markup here so hopefully that makes sense what we're doing here so on top of this what we want to do is add a media query change here and we want to change on large screens we want to convert this div here to a flex row now we also want to put the items to the center we want to add a gap between the children here of 12 so we're going to say gap dash 12 and then we're going to give it a margin on the top we're going to say mt14 and then we're going to make a media query change here on large screens and say mt and then we'll do 28 and that's going to do it for our container here now inside of this div we're going to have two flex children of this container so one's going to be the content on the left hand side and then the right hand side when it's a flex row would be that image all right so what i'm going to do here is comment this out so it's very explicit what we're doing here when we come back to read our markup later on and i'm going to give us a comment of content here okay so we're going to create a div and we're going to give it the class of flex and then what we want to do is have it give it a flex or sorry a class of flex 1 then we want this to be a flex column but we don't want to reverse it so we're just going to say flex cal here to have it go in the correct order from top to bottom and then we want to align the items to the center here now on large screens we don't want our items to be to the center we want them to be on the left hand side so we need to have it say align item start now that class we haven't used yet but it's the same structure here we're going to say items but instead of saying center we'll say start here okay and now inside of this content div what we want to do is we're going to pass it in h2 and for this class on here what we're going to say is we're going to give it a class of text book mark and we're going to go blue okay and then for the text size we're going to have it start at 3 xl here and then when we get to medium we're going to give it we're going to pass the media query we're going to say text 4 and then one more change on large we're going to have it be text dash 5 oops 5 xl here okay and then we want to have the text of h2 be in the center when it's on mobile here so we can achieve that by saying text and then passing at the value of center now on large screens we don't want this we want it once again being on the left hand side so we're going to pass the text dash left and then the final class here we want to push this h2 away from our paragraph tag which we're going to create so for that reason we're going to give it a margin bottom and we're going to say dash 6 here now for the content inside of this h2 we're going to pass when i copy and paste it in here it's going to say a simple bookmark manager okay and that's going to do it for our h2 now for our paragraph tag here we're going to pass it the class of text book mark here and we're going to say gray then what we want to do is give it a text text size of large so we're going to say text large or lg we want to align this text to the center so we're going to do it very similar to how we did it in our h2 we'll say text center and then we want to say on large screens text dash left here okay and then we're going to push it away from our buttons that we're going to create with the margin our mb-6 here and for the content i'm going to go ahead and copy and paste this in here now the final section of our content here we're going to go ahead and create a div and we're going to pass the class of flex here now we want to justify this content to the center so we can pass it the class of justify and say center here and then what we want to do is if you're familiar with flexbox and i've used it a few times here on the channel when the flex container runs out of room to display the elements inside of the div you can pass it a property of flex wrap and set it to wrap okay now to achieve that here in tailwinds we need to pass the flex wrap class here and then for our children inside of here i want to give it a gap of 6 which i believe is like 16 to 20 pixels worth of space in between our items here now if i didn't mention this before which i think i did this is going to be the div for our buttons here now one thing i want to address here is if we go back to our finished application here our coupon application our finished landing page you can see that all the buttons within our landing page here are mainly the same style so we have this purple button and then we have this white button now the white button we only use one time which is here in the hero section but this purple button right here we use one two let's see three four five six seven eight so we use it eight times and we'd have to write out the same exact styles on our market for that now there is an easier way around this to avoid doing all that if you're going to be adding the same styles to a certain element and you can achieve that with what they call a base style within tailwind so what you can do is inside of your source style sheet you can apply or give it you can create a class and then use the uh the apply directive here and apply all the tailwinds classes to that class and then use that single class to style up your element which we're gonna go ahead and do alright so let's head over to our source style sheet and begin to implement the ability to style up our buttons with simply one or two classes instead of seven or eight now creating a base style is just like creating any class you would in a traditional css style sheet here so i'm going to call this class btn now instead of actually applying like you know background color here and passing it a color you could do that but that kind of defeats the purpose of really using tailwinds here so what we're going to do is actually use the at apply directive here and use all the classes that tailwinds provides us here within this selector and then we're going to apply this class name to our buttons inside of our markup sheet here all right so what we want to do is we want to apply a shadow here to our button so we're going to say shadow csha shadow md here then we want to apply it apply some padding to the top and bottom so to do that remember we do a py and we pass it a valley which we're going to be doing three now we want to do some padding to the left and right of our button so we're going to say px6 now we also want to round the corners of our button here we're going to pass it the class of rounded md now what we also want to do is pass this button a transition uh property or a class here now we haven't talked about this yet so let me head over to the actual documentation and show you that where this is at i believe it should be down let's see here transition property so what you can do is to set a transition here and it's going to apply all these properties by default so what we want to also do is the default duration is 150 milliseconds and i want to have that be a little longer now we can go ahead and alter that with a transition duration property here we can just say whatever duration we want and you can see they have all these values right here okay so let's head back over to our style sheet here and i'm going to add the class of transition here okay now don't worry about these errors right here you're getting it's not going to affect anything it's just the way vs code is handling this and then what we want to do here is i'm going to pass the duration class here and we're going to say 300 i believe it's how you spell that okay so that is going to be our button class now we have two different button colors now we could just go ahead and apply the text color or sorry the background color to the button we want to uh style up but i want to go ahead and create some other classes here for our btn purple and then i also want to create one for btn white here okay so inside of here what i want to do is we're going to do another add apply and we're going to say bg and we're going to do book mark purple for our purple color and then we also want the text to be white in there so we're going to say text dash whites okay and then for our btn white class what we're going to do is we're going to say add apply we're going to do bg book mark and we're going to say our actually i think it was just white so bg bookmark white here all right and that's going to do it for our classes we're going to create here for our buttons so as you recall whenever we make changes to our global uh or our source style sheet we need to go ahead and run our npm run build command so let's go ahead and do that let's go to our first one here and let's go ahead and build this out so with our build complete we can now use those classes inside of our markup here so let's open up this div that we created earlier and create our two button elements here and we're going to give these a type of button and then let's duplicate this down once more okay and then for the first one here all we're going to need to do is pass the two classes that we created so the first one is going to be btn and then we have our btn purple here and inside of here we're going to say let's do get it on chrome and then for the second button here we're going to pass a btn as well but we also want to pass it btn dash white and we're going to have this one say get it on fire fox here okay so now if we head over to view those we should now see we have these two buttons here now i know this goes outside of the realm of never leaving your style sheet but in my opinion when you're gonna be reusing styles like this especially on a button it just makes sense to go ahead and add a base style now you don't have to do this you could have definitely went ahead and just apply these classes here as we have inside of these directly on our markup but i wanted to show you a different way to go ahead and perhaps make it a little bit easier on yourself especially when you're going to be reusing a class as much as we are inside of this landing page here now when we hover over our buttons here we want to add a hover effect so what i'm going to do is show you how to add a hover effect using tailwinds here so in the documentation to add a hover effect to a button or you know your element it's actually very simple so all we need to do is add the hover prefix to the element that we want to add a hover effect to as you can see down here they had hover colon and then the actual class they wanted to apply on hover of that element here okay so if we head back over to our html here let's go ahead and add that so we're going to say hover and what we want to do here is change the background color to bbg and we're going to say book mark that's spelled wrong and we're going to change it to white here and then we also want to add another hover here and we're going to say text and we're going to do black so what we're doing here is i can't spell that let's see there we go so what we're going to be doing here is we're going to literally be switching the buttons on hover so when you hover over the purple button it's going to turn into the white button and vice verses so on this button here we're going to say hover we're going to change to bg to book mark and we're going to say let's do purple here and then we want to say hover and we want to do text and change that to white so now we hover over our buttons here on our site you should see now this one's going to change to the button on the right and then the one on the right is going to change the one on the left on hover now we're all set with our content div here now the second child that we want to create for this div or the container is going to be for our image so let's go ahead and create a new comment here and say image and then we want to create a new div which we're going to give it the class of flex to start here now we want to justify the content within this div to the center so we're going to say justify center here we want to have this child div take up equal amounts of space between the two here so if we pass flex one to both of these that means they're both going to take up equal amounts of space inside of the container okay now we want to give this a margin bottom of 10 on mobile we're going to target it on a medium screen here and we're going to say mb and we're going to give that a little bit larger of 16 and then on the large here we want to go ahead and give it a margin bottom of zero so we're going to say mb dash 0. now one other class that we haven't used is we're going to give this image a z index of 10. now the reason why is because this right here that you're seeing on the finished version of the landing page is actually not a part of the image we're going to be setting this absolute to this div right here okay so in order to have this image over the top of this we need to provide a z index higher than zero so that it goes over the top of this uh rounded rectangle right here okay so to give it a z index within tailwinds we say z dash and we have all these options here of 10 20 30 40 and 50 and we're gonna pass it 10 and that's going to give it a z index of 10. now inside of this div we want to have our image here so we're going to say the src is going to be dot slash images and we're going to use this hero background.png now a couple classes we're going to provide here are going to be for the width and height okay so in order to avoid any confusion here since we have not yet used this let's head over to the documentation and kind of show you how we define width and height within tailwinds here so as you can see you can define width with w6 here and that's going to mainly if you set them with numbers it's mainly going to set it to a specific width in regards to rem now what they have if you scroll down here a little bit more is they have these fractional units here with you know w dash one divided by two which is fifty percent and then it kind of you know breaks down into fractions so you can see that two thirds will be 66 they have one fourth for 25 so they do kind of like quarters then they have six which you can see here they do uh one through six they do one through five so they have a pretty good way of breaking it down to finding exactly what you need and it works the same way for height as well they're all the same kind of format here so that's how we're going to be customizing the width and height is by using these fractional width values right here or these width classes okay so on our image here we're going to start off with a width so we're going to say w 5 divided by 6 and we're also going to say height dash 5 divided by 6 here now when we get the small screens here we're going to say with and we're going to change it to 3 4. so we're going to say 3 divided by 4 and we're going to go ahead and say the same thing we're going to do small and we're going to say height dash 3 divided by 4. and then when we get to medium we want them to be full height and width so we're going to say w full and then we're going to do medium again and say height full okay and that's going to be our image here so if we save that we head over to our landing page here you should see now they're side by side and things look a little bit more in line as they are here on our demo now the last thing we need to create here on this hero section is going to be this rounder rectangle that we're going to position absolute to our container div here now where we're going to create this element is outside of our container here so let's go ahead and collapse this and let's go ahead and create a new comment here for let's see rounded we'll say rounded rectangle here okay and what we want to do is we're going to create a new div here all right and we're going to apply it quite a few classes here so hopefully this isn't too confusing what we're going to be doing so first off we do not want to show this on smaller screens and we know exactly how to do that we can pass it the class of hidden to display none now once we get to medium screens here we want to allow this to be visible so we're going to pass it the class of block so block is going to set this div to display block all right now one class we also want to pass that we haven't used is going to be overflow and we're going to say dash hidden which let's see here this is going to hide any overflow that we have from this rectangle off the page so you don't see it alright now we want to give this rectangle a background color of book mark and we're going to say dash purple here and we want to go ahead and provide it a border radius on the left hand side of full so it's fully 50 rounded so how we can do that is with a class of rounded which we already used before so before we use rounded md but this time you want to target the left hand side and how you do that is with dash l and then we can pass the clat or dash full so round it dash l dash full is going to round the left hand side entirely of this div right here okay now if you recall we set this section to be position relative so what we want to do is you want to position this around a rectangle absolutely to that so we're going to say absolute here absolute all right now if we save this and take a look you should see that we don't have anything now the reason is because we haven't defined this rectangle with a specific height and width so what we're going to do is we're going to pass it a height value of dot 80 okay and then what we want to do is we're going to pass it a width value of 2 dash divided by 4 here which is going to be 50 percent with okay then if we save that you should now see that we're going to have this image but it is in the correct or it's going to be in the absolutely wrong place you want it to be over here so we need to do some positioning to this so what we want to say here is we're going to say top and we're going to pass it the value of 32 here okay now where i'm getting these numbers from since we haven't really touched upon the positioning here is if we head over to our let's see here our documentation let me see if i can find it here so we have under the layout top right bottom and left and they have all these values right here okay so when you pass it the top 32 if we scroll down here let's see there's a lot to these this will give you exact number of what we're actually setting it to so top 32 is going to be eight rem which is probably around like 96 pixels okay now what we want to do is we want to set the right to zero because currently it is sitting on the left hand side if you pass it right of zero it's going to push it all the way over to the right hand side here so let's go ahead and say here we'll say right dash zero okay so if we do that that's going to style it up for a medium break point view so right now it looks like this but if we were to inspect it here it'll look a lot better once you get down to a smaller screen and i guess it still doesn't look great we might have done something wrong here so it appears and i'm pretty sure maybe many of you caught this i spelled relative wrong here for the class name as i spell it it's relative like that and that would explain why it is not positioning correctly as to how we have our code here right now so now if we head over to our landing page you can see that it looks a lot better but as we get up to a bigger screen size we still need to do some adjustments there but on a smaller screen like medium you can see that it is positioned a lot better and then once we get down to a smaller screen size i believe at medium it is going to be hidden alright so let's go ahead and finish up the styling here so what we want to do is target the uh div here on a lar when it gets to the lg breakpoint so we're going to say lg and to get a negative position on either calling top right bottom left or right we can pass it the minus sign then say bottom here and we can pass the value that we want so we're going to pass it a bottom value of negative 28 okay and then what we want to do here is we're going to say lg and we're going to go ahead and say the same thing for right we want to pass it a negative value here and we're going to say right dash 36 oops that's 26 we need to say 36 and we'll change that to 36 here so now if we go inspect this here on a larger screen you should see that it looks a lot better and it is positioned how it should be alright so that's going to go ahead and do it for our hero section here now next up here we're going to be working on our features section so let's head back over to our markup here and to save some space i like to collapse these things as a personal preference so let's do a line break here and we'll do a comment for features all right and we'll go ahead and create a new section tag here and we're going to pass it a few class values so as you can tell here we're going to be doing some alternating colors for our background here so this is where we're going to be using that custom color we have for bookmark white to alternate between a white background here on certain sections and this sort of lighter shade of white here on some of the sections within our landing page here all right so what we're going to do here is we want to pass this the class of bg and we're going to say book mark and we're going to do white and we also want to give it a padding on the top and bottom of 20. so we're going to say py-20 we're going to do a margin on the top of 20 and then on let's see here large screens what we want to do is a mt-60 like that okay now inside of this section we're going to be having a few different things so we're gonna be having our heading and then we're gonna have three separate different features okay so i'm gonna go ahead and keep this organized and we're gonna have another comment here to let us know this is our heading markup and then we want to do a div here and we're going to have let's see we'll just do div and we'll open up our classes here so the first thing we want to do is we're not using a container as you can see around anything here so far we're going to be setting a max width on this heading div with some of the tailwinds with classes all right so what we want to do is we want to target on a small screen here we want to have it have a width of 3 divided by 4 which is about 75 and then when we get to large screens here we want to give it a width of 5 divided by 12 which is just under 50 it's like 45 or 44 or something like that okay and then to position this in the middle we can pass it a class of margin x and then say auto okay and then we want to give it a padding on the left and right of two here now inside of this div we're going to have an h1 and let's go ahead and put a line break there now for this header tag what we want to do is we're going to pass a class here of text dash 3 xl and then we're gonna have text be in the center here and then we're gonna give it the color so we're gonna say text bookmark blue and we're gonna have the features uh inside of this h1 as the actual content okay now for our paragraph tag here we want to align this to the center as well so we'll say text center but we have to do that inside of a class so we'll say text center here and then we want to use the light gray text so we're going to say text book mark and we'll say gray and to give it some separation from our heading we're going to say empty and do 4 and now for this content i'm just going to copy and paste this in like that and if we head over to take a look at this you should see that now we have this right here so what we're doing is on medium and large screens we're going to restrict the width but once you get below that small viewport it's just going to be a full 100 of the available space that we have okay and that's why we added that padding around it to push it away from the left and right when we are on the smaller screens and we leave it on throughout the whole uh actual uh div here just because it doesn't make too much of a difference all right so that is that now we need to start working on our features here so for the most part the features are going to be very similar to our hero section here in terms of the markup and positioning this uh rectangle here um within this uh actual feature div here all right so let's go ahead and begin to work on those so what we want to do is below our heading div here i'm going to create another comment to you know keep things organized we're going to say feature number one okay and then what we're going to do here is we're going to have a div and we want to pass a few classes here and we're going to say relative again so i think i spelled this already wrong so let's not do that again and i did it again so relative and we want to give this a margin top and we're going to say mt-20 and then on large screens we're going to say mt-24s a little bit larger of a separation on larger screens here now inside here we want to pass another div and we're going to give this the class of container we're going to say flex we'll do flex cal and then on large screens we're going to go to a flex row we're going to say items center justify just ify there and say center and then we want to give it a gap on the x which is going to be on the left and right of 24. we don't want to do a gap 24 because it's going to go on the horizontal and vertical axis so we can go ahead and pass the x value here in between the number and the gap value here to only have it on the left and right or between the two uh vertically i suppose or whatever way you want to go ahead and picture that all right so for the most part this is going to be the same exact class structure that we had inside of our hero section here so i'm going to kind of take this a little bit more quicker throughout these features here okay so we have next up we're going to have our image and we're going to do a div here and we're going to give this a class of flex we're going to say flex 1 we want to justify this to the center we're going to give it a z index here of 10 margin bottom of 10 and then also on large screens here we're going to say margin bottom and we're going to set that to zero now inside of here we're just going to have our image tag so we'll say image like that and we're going to look for our image here of features tab number one okay now for the classes what we want to apply are going to be the same exact classes that we gave our hero section here of our image so we want the width 5 6 and we want the height 5 6 then we're going to do small we're going to say 3 4 and then once we get to medium we're going to do full so i'm just going to save some time here and copy those classes in like that and that should save and that's going to do it for our image here now next up we have our actual content here so what we're going to say here is we're going to pass another div and we're going to do let's see class flex let's see flex and flex 1 we're going to say flex cal here we want to align the items to the center and then on large screens you want to say items dash start here all right now inside of this we're going to have an h1 and we're going to have this have a class of text 3xl we're going to do text book mark blue and then we want to pass the first feature heading here which is going to be bookmark in one click so we'll paste that in there like that then next up we're going to have our paragraph tag here which is going to have a class of text book mark gray we're going to have it have a margin on the top and bottom so we're going to say my4 we want the text to be center here now once we get to a large screen we want to revert this back and say text to the left and then we want to target the width and height for this very similar to how we did inside of our uh where we do it inside of this heading div right here so what we're going to do is on small screens you want the width to be let's see 3 divided by four and then once we get to a large screen here we want the width to be full so we can say w dash full okay and now for the content here we're going to paste this in and we'll do that now the next thing we're going to do is we need to import or we need to do our button here now like i mentioned earlier the buttons are going to be the same exact throughout most of the application here or keep calling application most of the landing page here so what i'm going to do is because we've already created this markup we're going to come down to our button tag right here and we actually want to get this one that says get it on chrome and we're going to collapse this again and let's just come down below our paragraph tag here and paste that in so you can see here we have our btn btn purple and then we have our hover effect here to change it on hover now what we want to do here is just change out the content to save more info okay so now if we head over to take a peek and see how things are looking you should see that we have this view right here now the last thing that we're missing is going to be this rounded rectangle which is going to be the exact same styling as we did here on the hero section but we just need to adjust a few of the positioning values here okay so to save some time again here and we can just go inside of this hero section and we can grab this code for our rounded rectangle and we can collapse this and right below this div with a container we're going to paste in this rounded rectangle here now what we want to go ahead and do here is we're going to keep the hidden and we want to change the break point here from medium to large and then we have the uh the background color purple is going to stay now instead of it having a rounded left we want to change it to the rounded right here okay and then we're going to keep the height at 80 position absolute width 2 4 and we can get rid of this top and right values here because we're only going to have a display on large so we don't need to worry about actually targeting these on the media query so we can save that but what we want to do is change some of the values in here so instead of saying negative 28 we're going to do 24 and then instead of saying right 36 we're going to change this to left okay so now if we head over and take a look you should see that we're going to have this view right here and if we go to a bigger screen you're going to have it look like this and then if we inspect this here we can see that once we get below a large screen those are going to disappear this is going to collapse and then we're going to have it convert to a mobile view and it's going to start stacking here so now for the rest of the features here it's going to be the same exact styling and markup we're just going to need to flip-flop them in terms of the order because we're going to have them alternating from the image on the left to the image on the right every other feature here now for our additional features here it's actually going to be very easy we're just going to be copying and pasting in the code we have for feature one in for feature two and three here so let's go ahead and duplicate this and let's scroll down here and we're gonna change this to feature two now a few things that we need to change here first off is on large screens i want to change the margin top to a value here which i believe was going to be 52 so we're going to say empty and 52. now if we save this and we go take a look at things you'll see that number one everything looks good but we need to change out the content and the image here but we also want to alternate the view of the image and the content we want to flip-flop them so one easy way to go ahead and do this is on our large media query here we want to define it to be a flex row all we need to do is say flex row reverse to reverse the order so it reads content then image so if we save that you'll see let me see did we not save it if we save that you'll see that their flip flop now the one issue here is that our rectangle here needs to be positioned to the right hand side so let's go ahead and fix that really quick so instead of saying uh the left 36 we're going to change it to right and if we do that you'll see that now we're on the right hand side but the one issue is that we are rounding the wrong side as well so we can change this from rounded right to rounded left and there we go now what we need to do here is we want to change out the image and the contents so let's head back up to our image here and we're going to say number two here for features tab number two that's the image and then the content in here is going to be intelligent search so i'm going to copy in and paste this here all right and then for the paragraph text here let me just copy and paste this in as well it's going to say our powerful search feature will help you find safe sites in no time at all no need to trawl through all of your bookmarks here i wonder if that's supposed to be crawl i don't know i copied and pasted that from the comp so that would make more sense about crawl maybe we'll say crawl all right so there we go if we take a look now we should see that we have our different image here and we have our intelligent search here now for our third feature here we're going to want to copy the first one again because we don't want to flip flop it here so let's just copy and paste this here and let's go right below feature two and we're gonna paste in our new feature of three so we'll put feature three here and like we did change our margin top here in feature two we wanna change feature three to fifty two we're going to keep it as it is because we want the initial ordering of image the content and then what we need to do is change out the image here so it's going to be 3 and then for the content here it's going to say or for the heading it's going to be share your bookmark so we're going to change this and then for the text let me copy and paste this in as well it's going to be easily share bookmarks and collection with others create a shareable link that you can send to you can send it a share of a click of a button or i butchered that but you get the point now we can keep all this the same here too so if we take a look that should go ahead and complete our features here so these are pretty similar in the formatting here so hopefully you guys aren't too confused about that so if we take a look you should see we have our bookmark in one click we have our hover effect on the button our television search and then we have share your bookmarks here okay then so next up here we're going to be working on our download section which is going to have our cards and for this section we're going to be using the grids so let's head back over to vs code and get started so just below our features section here let's create a new comment and we're going to say download here now let's go ahead and create our section tag so we'll say section and we're going to pass this a class of padding on the top and bottom of 20 so we're going to say py20 or it's not really 20 but we're going to pass a class a py20 and we're going to do margin top and we're going to set that to 20 as well now for the heading here it's going to be the same markup we had for our feature section here so what i'm going to do to save some time here and reduce the redundancy of typing this all out again i'm just going to copy and paste this section here and we're going to change out the contents so we'll change out the heading here to download the extensions and then i'll grab the description for this section and paste it in here as well okay so that is going to be our heading here so pretty simple most of the headings are going to be the same throughout the rest of the project as we have here for uh download the extension and our frequently asked questions so they're all going to be very similar all right so now what we want to do is actually create our container for our cards here so right below our heading i'm going to create a new comment here and we're going to say cards okay and we're going to create a new div and we're going to pass this div the class of container to contain everything now we haven't yet introduced how to actually create a grid or i should say define a grid here and tail and so let's head over to the documentation here and if we go to layout here and display all we need to do is scroll down here and you can see that we need to pass it the class of grid which makes sense so if we do that we're going to put on that container or that element display grid so let's go ahead and do that now what we want to do here is we need to define how many columns we want for this grid so let's head back the documentation here and we can see here on flexbox and grid we have all this options right here where we want to go is to the grid template columns here so the class structure is pretty easy to understand so grid cows one you're going to have one column you have grid calls two you're gonna have two three and so on so it's pretty explicit what we're going to be doing here so what we want to do is we're going to do some media query things here for this grid so when we first start off we're going to be looking at it as a mobile first approach here so we're going to say grid we're going to say calls and we're gonna do one then when we get to medium screens here we're gonna say grid we're gonna do cowls and then two and then once we get to large screens we're gonna say grid cowls and we're gonna do three all right so some pretty easy stuff to understand here once we get to a larger screen we're going to allow for more columns and then on the largest screen we're going to allow for our default view which is going to be our three cards here now we also used a property on our flexbox container a few times here so i'm not really sure where that was at i might have been on the feature here where we passed at a gap between the children now we can do the same thing here for our cards so what i want to do is i want to pass a gap and we're going to say 16 here all right and then what we want to do is i want to set a max width for this container now you recall if we go over to the width settings here let's go ahead and find it what we want to do i believe it's going to be the max width so you can see here that we can set the max width to the certain rem sizes here but we can also set them to the actual uh what you want to call this the break points that we have within tailwinds here so what i want to do for this is i want to limit this to be a max width of 1024 pixels so a little smaller than our initial container all right so what i'm going to do here is i'm going to i'm going to copy that class and then we're going to paste it on here okay so simply what our container is going to do is still apply that padding and the max width but we're going to be reducing it just a little bit more with this class right here so hopefully that doesn't or isn't too confusing and then what i also want to do for this grid is i want to put a margin top and we're going to say mt and pass a value of 16 here and that's going to be initially our grid container here so now we need to do is actually create our grid items here so just as we did our features here i'm going to create the styling and the markup here for one card and then they're all going to be the same except we're going to swap out the content here so let's go ahead and put a comment here and we're going to say card one here now for the markup we're going to have a div and we're going to go ahead and create that and we're going to pass it a few classes here so first off we want to have each card display as flex now initially this is going to be a flex world we want these to stack so we're going to say flex cal here and we want to round these cards with a border radius we're going to say rounded md and then we want to give this a shadow so we're going to say shadow md and then we are going to add some margin here but i want to show you how these cards are going to initially look without the margin because we're going to give them a staggered effect like this right here where they're going to kind of be descending to the bottom right here where they're going to kind of get lower and lower as you go down okay but i'll show you how we'll do that in just a moment here okay so now inside of here what we want to do is we're going to have a another div and this is going to have the class of p6 for padding 6 and then what we also want to do is this is going to be a flex and we're going to say flex column here as well and we want to position all the items to the center so we're going to give it a class value of item center here now we're going to have our image here because we're going to have the logo here then we're going to have our heading for the browser we're going to and then actually i realized that i never changed these so those should also be changed here to the proper actual browser and then we're going to have this minimum version text right here that will have this nice border to separate this from the button and then we'll have our button alright so that's going to be the layout so let's go ahead and get our image in here so we're going to say images and then we want the logo chrome okay and then we don't need to pass any classes to our image here what we want to do next is we're going to have an h3 and we're going to give this oops as a high spell class so we're going to say class we're going to do margin top we're going to pass a value of 5 margin bottom we're going to pass at a value of 2. then we want to give it the text color and we're going to say book mark and we're going to go blue and then we want this to be text lg here and we're going to say add to chrome all right and then lastly here we want to do is pass our paragraph tag which is going to have the class of margin bottom 2. we're going to give this a light gray text we're going to say text book mark gray and then we want this to be font light so i'm not sure if we talked about this class right here so these are going to actually affect the font weight so if we head over here and we go down to the typography section here you're going to see that we have a font weight option right here now this is going to determine what font weight you have so we're going to be using font and light which is going to be a font weight of 300 okay so that's where we're going to get that from here's where you can find all the different classes for the different uh styles of font weight here okay now what we want to do is next up we want to have our border so we're gonna pass it a hr here and we wanna give this a class so let's see here we're gonna give this a border so we haven't talked about borders either so let me show you where we're gonna find that and we can go i believe to borders here and we want to i believe start in the border style let's see here where would you find the borders of border with so here we go so first off you need to define a border with so you can do all these different properties here you can pass border which will be all the way around but then you can also pass border to the top right bottom and left so what we're going to do here is we're going to do a border bottom and we're going to pass it the value of just border b and that should be one i believe if i'm not mistaken let's see uh yeah see that's right here so that's gonna go ahead and give it the border bottom width of one pixel all right so we're gonna say border b and then what we want to do here is we want to give this a color so we can pass it the border prop class here and we can give it the actual color so we're going to say book mark and we're going to go white like that okay now the last thing we need to go ahead and do is going to be our button here which we've already went ahead and created so i'm going to go ahead and go to our feature and we're going to copy this button right here okay so let's go ahead and grab that and then what we want to do here is we're going to put it inside a div we're going to pass it the class of flex and we're going to give it a padding around all sides and we're going to say p6 here okay now what we want to do is we're going to pass in our btn btn purple and then we have our hover and our hover properties here and then we want to change the text here to add and install extension okay now one additional class that i want to provide this is flex one because currently we have this div as flex and we want this button to take all the space up we have so if i currently go over to this right now on our landing page you'll see that the button is not taking up the full width of the card here so to do this we need to go ahead and pass it we'll say flex 1 and that should go ahead and make it take up the entire space and it looks like we forgot to put in the minimum version copy right here and there we go all right so that should go ahead and do it for our card layout so what i'm going to go and do is copy and paste the rest of these down here so let's go ahead and do this and we'll go one and two and if we save that you should see now that we have three cards you just need to go ahead and change out the content and the images here so let's go ahead and do that so let's see here we have our card one and then i want to put these comments in between so we know where they're at so let's say card two like that and then card three like that so let's go ahead and change out these images here so we'll just go ahead and remove this and we'll say firefox and we'll go add to firefox like that and then we'll keep everything else the same here and then let's go ahead and collapse this and then we'll come down to our other image here and let's go ahead and find this one and we're going to say opera so we'll copy the name here and we'll paste that in there add to opera and that should go ahead and do it so now we should have all three cards displaying each one of the browsers to add now as i mentioned we want to get this staggered look right here so how can we do that well it's pretty easy to achieve and all we're going to need to do is pass it some margin values here okay so what we're going to do is on the first card here we only want to target this on large because we're going to stack and we already have this gap property here which is going to separate them so we don't need to pass this margin value on any other size besides large so on large we're going to pass it on the first one we're going to say margin bottom and we're going to give it the value of 16 here so what that's going to do is it's going to push this down so you can see here we have all this extra space here so clearly right now they did not do anything now what we want to do is on our card 2 we're going to target large and we're going to say margin top and we're going to say 8 and then on large again we want to target the margin bottom and we're going to say 8 here and i just realized we probably could have passed this to margin y and change that to 8 and got rid of that with one okay so did a little bit of refactoring there and as you can see now this one got pushed down a little bit and this one still needs to be adjustable you can see we're going to have this staggered look right here by simply just using the margin values here okay now all we need to do for the last one here is pass it a media query of large and we're going to say margin top and do 16 here and that should go ahead and give us the staggered a look as they are descending down to the right here all right so that is going to do it for our cards and if we go and inspect it here let me show you how this is going to collapse so once we get down to a certain view you can see that now they're going to be in this two column set up here and if we get down a little smaller they should respond to a one column uh stack here so that it is responsive and looks good on mobile all right then so the next section here we're going to be working on is going to be our frequently asked questions so let's head back over to vs code and right below our section tag for download let's do a few line breaks here and we'll say faq okay and then let's go ahead and open up our section tag here and we'll put that into the middle of the screen now we want to pass some classes to the section tag here so we want to change the background color to our customized color of bookmark white so we're going to say bg and we'll say bookmark and we'll do white here and we also want to add a padding to the top and bottom and we're going to say py and give that the value of 20. all right so as i mentioned we're going to be having a the headers here for all these are going to be the same so i want to wrap the entire faq first off in a container class and then we're going to have our header here so what i'm going to do is just copy and paste this heading we have from our download and we're going to paste it inside of this container now obviously we want to change out the titles here so we're going to say frequently asked questions here and then let's copy and paste in this content for our paragraph tag here okay and that's going to be our heading now just outside of this heading or below it we want to create our faq items here so we're going to say faq and we'll do items as a comment here just to kind of separate some things so we're going to be displaying these faq items using flexbox so we're going to create a div here and we're going to give the class a flex now we want to have this in a column so we're going to say flex column and we also want to alter the width of the actual faq items here so we're going to go ahead and say sm and we're going to say 3 oops we want to do w dash 3 that are divided by four and then when we get to large here which this is about 75 percent and then when we get to large here we're going to say with and we're going to do 5 divided by 12. okay so very similar styling to um our heading here okay and then we want to give this a margin top of 12 and then we want to center this by saying mx auto here all right now let's actually get into creating each one of our flex items here or our faq items so it's pretty easy so let's go ahead and create a div here and we're going to give this a class of flex now we want to have the items in the center so we're going to say items and we'll say center and we want to give it a border on the bottom here so if we go over to our actual demo here you can see we have this border on the bottom here so we'll say border b which will give it a border on the bottom of one and to give it some separation we're going to go ahead and pass it a padding on the top and bottom of four okay now inside of here we're going to have a span and we want to give this the class of flex one okay and then we're gonna have our first question here which is gonna be what is a bookmark all right and then we're going to be using font awesome to actually get our chevron icon in right here so i already have this pulled up on font awesome so i'm just going to copy this html here that they provide us and we're going to paste it inside of our flex item container here now if we take a look at this it should look pretty good so far if we come down here you can see we have our item here which all of them will be the same now we want to change the color of the chevron hero okay so what we can do is since this is going to be considered a actual font we need to pass it a text color so we're going to say here we'll do a space we're going to do text bookmark and we're going to say purple and that'll go ahead and actually change the color of the chevron here and i realized i spelled book wrong okay now those are going to be our flex items here so all i'm going to do is copy this down three more times so one two three and then we're going to just change out the question here so the next one is going to be how can i request a new browser so we'll go ahead and get rid of this put that in there and then we will put this right here all right and then we have our last one here which we'll put right in there okay so this section is just about done so what we want to also do is provide it a button here so let's go ahead and grab our button from one of our cards here it's going to be the same setup so we'll go ahead and grab this okay and then let's paste it inside of our faq container here so i'll put that like that now a few things we're going to have to change here so we're still going to provide actually we don't want to provide a flex 1 anymore what we do want to do is provided the class of flex here and we want to align this button to the center so previously on the card we wanted to take up the full amount of space so if i save this right now and we go over you can see the buttons taking up the full amount of space which we don't want we only want it to be in the center and we want it to take up only the space that it needs so we can pass at the class of self see here cell center here which is going to justify the actual button here to the center and you can see that it's only going to take up the space that it needs and we want to remove this content and change out or change it out to more info like that okay now what we also want to do to push it away from our items here is give it a margin on the top so we'll go ahead and say here mt12 and that should go ahead and push it away from the top and that is going to do it for our faq here so if i go ahead and inspect this and check it on mobile to make sure it's all working correctly we should be able to see that it should still look good on mobile it's not really going to stack because it's already stacked here but you can see it's going to take out more space and then once we get down to a smaller view it's going to take up the full amount of space available and that's because of the width that we define and you can see here when we get down to a smaller screen such as mobile for phone it still looks good okay then so next up here we have our stay up to date or our contact section so let's head over to vs code and we'll do a few line breaks to separate ourselves away from our faq section here and we'll add a new comment for contact us here alright so let's start off with our section tag here now we want to give this a background color of our custom bookmarked purple so we'll say bg here and we're going to say book mark and we'll do purple and for this whole entire section here we want the text to be white so instead of actually defining that text color on each one of these elements here we can just go ahead and pass it here on the entire section wrap so we'll say text white and then we also want to give some padding on the top and bottom so we're going to say py and we're going to give it a value or a class of 20. okay now inside of here let me go ahead and actually go on the right spot we want to have a div with a class of container to wrap our entire contact section and then i'm going to have a div in here for all the content now i want to pass a few classes on here which we want to constrict or reduce the width of our actual section here as you can see it's a lot smaller than the normal max width allowed so what we're going to do on this class right here is we're going to pass it the small break point and at this break point we wanted to take up the width which is going to be 3 4 or 75 percent of the available uh space so we're going to say w 3 divided by 4. okay and then on large screens what you want to do is you want to take out 50 so we're gonna say w and we'll do two divided by four okay so that way it'll take up fifty percent and then we wanna say mx auto to center everything into the middle all right and then we're gonna have our p tag here which this is gonna be for that little bit of a branding we and not branding that little bit of a stat right here saying 35 000 i've already joined so for this class or for this paragraph tag we're going to pass in a few classes so first off we want to make this a little bit lighter of a font so we're going to pass the class of font light we want this to be uppercase so we're going to say uppercase like that we want to align the text to the center so we'll say text center and we want a margin bottom to separate it from our other additional elements we're going to have by or we're going to give it a value of 8 here okay and then let me just go ahead and copy and paste in this content here all right now below this what we want to do is give it an h1 and we're going to give this a class of 3rc text and we're going to say 3xl and we only want to align the text to the center and that's going to be it here and we want to copy in this content here as well which is going to say stay up to date with what we're doing all right now the next portion we want is actually going to be for our input and our button so for this we're going to want to create another div and display it as flex so we can get the input and the button in a side by side or in a row so we'll say it we'll create a div here and we're going to pass in a class and we're going to say flex and then what we're going to do here is we want to target it first on mobile so we want them to stack so we're going to say flex column and then once it reaches a small screen there's enough room for us to define this as a flex row to have them side by side we want to pass a gap here and we're going to say dash 6 to give some space in between our two elements and then a margin top we're going to give it the value of 8 here to push it away from our header all right now inside of here we're going to have our input first so we'll go down to our input here and we're going to give it the type of text and then we're going to give it a placeholder here so we'll say placeholder enter your email address like that and then we want to pass it a few classes here so let me show you right now what happens by default on an input you guys are probably familiar with this if you've you know dealt with inputs they have this really nasty outline that when you click on it it'll look like that so i do not prefer that i don't think anybody that styles inputs prefers those nasty outlines here so let me show you how we can actually target a focus state within tailwinds here so it's going to look very similar to how we do with hover so we're going to say focus here and our colon now the property that we want to target here or we want to say is on focus we don't want there to be any outline so we'll pass the class of outline and say outline dash none and that'll go ahead and remove that really dirty nasty uh let's see did that not save probably didn't save it focus oh we spelled the wrong outline none okay and now if we come back down here we should see when we get into this here we don't have that nasty outline anymore okay so a few other classes we need to go ahead and add here so this is going to be displayed as flex so we want to say the class of flex 1 here and then or sorry the container is displayed as flex so we want this to take up the the most amount of space possible so we're going to pass it flex 1 and then what we also want to do is give it a padding on the left and right and we're going to say dash 2. we want to do a padding on the top and bottom and we're going to say 3 and then we also want to round this so we're going to say rounded and we're going to say md and then you can tell when we typed in there the first time we weren't able to see the text because by default we said text white so we need to explicitly say text black here as the color okay so if we save that head over here you can see now we have a much better style input which when i type in here you're able to see the actual text all right so that looks good now what we need to do is we need to actually get our button here so let's go to one of our cards here actually i'm going to go back up to the one in the hero section here which is going to be the one we're going to want to target here so we're going to say btn purple and we'll grab that one and let's put that right below this input here now we don't want to use this btn purple clasp because that's going to change the color to purple for this one we want to use the color of red here so we didn't create a base style for that and i don't think it's really necessary the only reason i wanted to create those base styles was to show you how you can you know make things a little bit easier for yourself so what we can do is just say bg and we're going to say bookmark red now when we hover over this or well what was that if we hover over this you can see that on our initial thing we're not doing anything and i didn't add a hover effect to this one but we can okay and we can just change it to this hover effect when you change it to white and then it'll convert to black now if we look over this on our screen right now i don't think i saved it so if we save that it should look a lot better so get it on chrome we don't want to say get on chrome you want to say contact us here contact us like that and that should look all good i'm happy with that hover effect so it's just a simple change it to white and change the text to black and we're still going to have that transition because we have the btn class on here but we're just going to go ahead and explicitly say we want the background color to be red here all right so now if you hover over this you can see that it's going to convert to white with black text and then we if we hover over our hover back off of it it's going to go back to red with the white text here so that is going to do it for our contact section here now to wrap up our landing page here the last thing we have is going to be our footer down here all right so let's go ahead and work on that so let's do a few line breaks here and we'll say footer like that and we're going to use the footer tag here and we'll say like that and a few classes we want to pass here are going to be so the background we're going to be using our custom color of blue so we're going to say bg book mark and we'll do blue and we want to pass it a patty on the top and bottom and we're going to say eights okay now inside of here we're going to have our container to wrap everything so we'll say div and we'll give it a class container and we're also going to pass a few other classes along with this so we want to display this container as flex and we're going to do a mobile first approach as we have throughout this whole landing page so we want to start off by saying flex column and once we get to a medium break point we're going to convert it to a flex row here and then we also want to have all the items aligned to the center so we're going to say item center okay and that's going to do it for our actual classes there on the div now we're going to have two flex items here we're going to have the left hand side and we're going to have the right so as you can see we're going to have our logo and our navigation items here on the left and then we're going to have our icons on the right so let's start off with the left hand side so we're going to create a div here and we're going to give our to find some classes so we're going to say flex so we'll do we'll give the class a flex there we want this to take up the entire space possible and leave room only for the items on the right hand side so it's going to take up all the impossible minus the room required for the actual icons all right and we want to add a property of flex wrap here so in the event that it runs out of space it'll wrap onto the next line here then we want to align all the items to the center so we'll say item center we also want to justify them to the center so we'll say justify center here now we don't want them to justify to the center on larger viewports so as you can see here once we get to the medium break point we're going to convert this to a flex row so what we want to do here is when we get to medium we want to say justify see justify and we'll say start to justify them back on the left hand side and then lastly here i want to pass the gap class and we're going to say 12. now inside of here let's go ahead and get our image so we'll say dot images here and we're going to use the image of logo bookmark white and then we're going to have our ul now what we can do here is i believe the ul for our footer is going to be exactly the same as it is in our headers so let's open up this tag right here and you know what we'll just grab the actual li items here we don't want to copy the ul as there are some different class structures on there that we're not going to be using so we'll say ul here and then some classes we want to add to this are going to be flex we're going to say text white and we're going to say uppercase here and gap 12 and also text is going to be extra small okay and then we have our li l i items here i can for some reason not say that okay and that's going to do it for the actual navigation part portion of our footer now next up here we want to grab our we want to set up our icons here so we're going to have another div this is going to have the class of flex to display our items here in this flex in a row we want to provide it a class of gap 10 to separate the items and then we're going to say margin top 12 because when this collapses into a mobile view we want to align or we want to provide some separation in between these two items here okay so we're going to say mt12 and then once we get to a medium screen here we're going to say mt and we'll pass that the value of zero now we're also going to have some lli items in here so i'm going to go ahead and duplicate that twice and we want to go to font awesome to get the facebook and twitter icons here so let's go to font awesome and we'll type in let's see twitter and we want this one right here so we'll grab that come back over here and we'll paste that inside of here and then the next one we want is going to be for facebook so we'll type in facebook here and then we're going to want so let's see we'll click search and we're going to want this one i believe right here is what we're using let me see we're using the square one actually so we'll grab well wrong tab three times we'll grab this one right here and we'll paste this one in like that okay now we also want to pass along some classes by default these icons will be the color black so we're gonna say text white here and then we want to give it text and we're going to say to excel okay and then we'll do the same thing here we'll say text white and then text to excel and that should go ahead and do it for our footer here so if we come back over to our landing page here you should see now that we have this view right here for our footers so let's go ahead and inspect it as i didn't show you the inspected version of or the collapse version of our contact section here so we'll show you both of those here as we get down things are going to start to collapse here and i believe at a medium break point we have both of these collapsing so you can see here that it collapsed and what's going to happen is this is going to run out of room but since we applied flex wrap it's going to wrap to the next line and there you go that went ahead and collapsed right there and you can see it's going to then collapse and then these are going to be on the bottom and it's going to be in a column view here all right so that is going to do it for our footer section and that actually is going to wrap it up for our entire landing page here so hopefully after watching this video you have the confidence to start using tailwinds inside of your own projects now as i mentioned earlier we only covered the surface of what talons has to offer as we could not cover everything inside of this video now if you want to continue learning more about talons i highly encourage you to go over to the documentation as it is very clear and concise and gives you step-by-step instructions to whatever you're trying to go ahead and implement with this framework all right so anyways hopefully you guys did enjoy if you guys did i would really appreciate you guys leaving a like down below and subscribing if you guys are new and i will see you guys in the next one take care

Channel: John Komarnicki

Views: 31,471

Rating: 4.9830151 out of 5

Keywords: tailwind, tailwindcss, tailwindscss, tailwinds, tailwind tutorial, modern landing page, modern landing page with tailwindcss, modern landing page tailwind, tailwind css tutorial, tailwind css, tailwind css landing page, tailwind css crash course

Id: 00gyCtIQp8E

Length: 110min 4sec (6604 seconds)

Published: Wed Jun 16 2021