Building a Landing Page with Tailwind CSS

okay here we are again so okay uh let me hear who we are again watching myself and listening to myself and weird stuff like that um yeah so going to do some work here today i'm trying to get my i got a new lens for my camera i moved my camera because i kind of moved my desk around a little bit so i'm trying to figure out exactly how to set this stuff up in the nicest way um so let me know if uh anything looks weird about it or anything cool okay so um i need to build out this landing page that steve designed for tailwind ui and uh i thought it'd be fun to kind of do it on stream there's some tricky parts probably some not so tricky parts and uh hopefully you know it'll be fun and we'll learn a couple things so let's uh jump over to kind of our environment here so i've got a tailwind ui sort of component scaffold set up for us to work on and yeah we're just going to try and build this out so the interesting thing about this in this case that there is a uh a bunch this is already kind of done in the sense that this hero is pretty close to one we already have this is brand new this is brand new this is brand new but like this blog section we already have this we already have in this we already have we'll have to customize them a little bit to match like some of the color tweaks and stuff steve has kind of applied to this example but i'm hoping we can build the whole thing like kind of quickly so i'll show you if we go to tone ui there's a hero at the bottom that's very similar to the one that we're about to build um you can see if we head over here um you know it's got the badge the title the text this one has like some companies down there but here we have a form this one has like a form over here and this is an illustration over there but otherwise super similar so i'm going to use that as a starting point and then on mobile it's actually the same too which is nice so you can see we've already got this like little pop over we'll have to add this button change like some colors looks like the spacing's a little bit different so maybe we'll mess around with that um but other than that it's like definitely going to be a good good starting point anyways so um i'm gonna grab it from within our actual code base because sometimes there is um like uh loops and stuff like that that we use to generate the code to make it a little bit more maintainable on our side and uh for things to work we we author things with alpine but have it converted to comments when we actually publish it because the alpine code that we write is very naive and not good but good enough for just like proof of concept um so i'm gonna go and start by just dumping that in here oh my mouse isn't working and we'll grab this data from up here and this data honestly i feel like we should be able to inline where are we referencing items oh in items so i'm just going to grab this in items we're using um post html for our templating which is kind of a cool project it's basically like post css but for html um so you can write all these plugins that kind of do fancy stuff and we have a bunch of our own but just like each tag for example is a post html plugin so with any luck we should see like something uh okay there's probably another in items somewhere let's in let's inline that too in items and items okay all right so there's our starting point i'm gonna pull this up in a new tab so we can kind of work on it like this and um we'll drop this down at the bottom and we'll start on the mobile version so we'll jump to 375 make sure that we can see this okay and uh yeah we'll kind of get this going so first thing is um getting this logo correct here so if you look that's probably called like workflow mark indigo 500 so i think i added a new one mark i think it's like this one maybe teal 500 to science 600 or teal 200 to cyan 400 teal i extracted all these from figma beforehand so that because i have to actually upload these to our production site for them to work in our environment which is something i'd like to improve but um yeah so we got that next thing is this deal here one thing i wish we could do in figma was um i wish for gradients i could like set the color stops and the gradients to match existing color styles from here so when i pull this open i can see the actual name because this is like really difficult to figure out what we're actually looking for now so what i'll often do is in this case is i'll just go here and i'll search for the color in like the tailwind docs which is hard because we don't have a lot of screen space 1 4b so we're going to go from teal 500 it looks like t0500 tl500 tl500 to cyan 600 to 500 to science 600 gl500 to science 600 gl 500 science 600 all right just get that somewhere so that um we don't forget it uh so let's find that we're hiring thing we're hiring so we'll just set this to be bg gradient 2r so what was it again tl500 to science 600 from tl500 to cyan 600 and that should get us that gradient so that's looking pretty good it also looks like steve's changed the background color completely here to be darker which i think actually looks nicer so there's probably like a bg gray 800 in here or something so let's make that a 900 we're hiring i think the background of the thing behind it has to go to black now so we should be getting closer yep and now let's do this copy so data to blah blah blah a better way to ship web apps so this is going to be another gradient this is 99f let's just copy that and copy that so we got tl 200 to cyan 400 tl 200 to cyan 400 gotta get that out of my brain so if we do bg clip text text transparent bg gradient 2r from teal 200 to cyan 400 that should give us like that gradient text ooh yikes made a mistake okay and how does steve have the line breaks going here looks like we can probably just um make this always block okay cool i use alfred for clipboard stuff all right so next up looks like steve's changed the spacing up here so we can probably adjust that too so let's just try and find where where that's defined i'm guessing it's here so he's got 16 but it should be 10. we'll just change it on this breakpoint and worry about the other breakpoint later okay and let's just use the exact text that he's got here just to make sure that it is the same and then we can do our input okay so after that we've got this section down here like the used by stuff that can go this i feel like we're just gonna have to rewrite and we'll just stick a form in here with a label and an input and a button okay so let's see this is a 48 pixel tall 48 pixels tall so that's probably what we got 12 pixels so there's no border on this um we'll have to decide what to do for a focus style but um yeah let's let's say like email email id email and uh what's the distance here 40 so this is a 10 okay so looking at the figma file what's the email address here the placeholder enter your email an sr only on this so that's there for accessibility purposes but not visible and for this i think we're going to do text based text gray 900 placeholder gray 500 um looks like 12 and 16 px4 py2 rounded md i'm guessing this has a border on it so i think we'll say like border zero and then for the focus style i'm not sure so i'll have to think about that i'm gonna set this to block with full and then this button is going to have a lot of same styles as the input so we're going to say block with full py2 px4 rounded md pg gradient 2 r looks like it's the same as the we're hiring so i'll just actually grab this and we'll say text white font size is 16 font medium what does that give us yeah that's something gap of 12 so mg3 and i feel like this doesn't look like the right height 40. is this 40 as well okay i got the padding wrong on these should be three okay all right that's better does steve have shadows on these no he does have a shadow on the button i'll add it i suppose won't be able to see it but he has it um on hover we'll just make it go a little bit darker so we'll say hover from teal 600 hover to science 700 maybe i should get yeah it's probably i wish it didn't have to be as extreme but is what it is okay so um we have this text here so we'll stick that at the bottom of the form maybe we'll wrap this in a link what do we got for font size on that okay so this is text sm text gray 300 this is medium and white okay and then for a gap there we've got 12 pixels that's empty three something kind of useful by the way in the latest version of the vs code plugin brad added pixel values next to the rem values so now if you're just like trying to find which one's 12 um you can just scroll through and see so the rams are there because it's kind of useful for building sites that where you can scale the size um but i think a lot of us probably still think in pixels so okay so the next is this image so i've got this image this is taken from this cool uh pixels lucid these lucid illustrations by this company pixels that makes like nice design assets and these are really cool they're free um and yeah we chatted with them to see if it would be okay if we included them for some of the stuff until when ui and they said that we could so we're gonna include some of these with like colors tweaked and stuff like that to kind of match the designs that we're using but they're kind of really nice general purpose sort of illustrations that look pretty hip so it's cool that we can get those in there so i think this is it so underneath here i mean we've got this whole section over here this whole form thing i think i'm just going to delete that but i'm going to put the image here and see what we get downwind ui.com img component images that dot svg and we'll just say like cloud infrastructure illustration okay so there's that steve's got a gap of 48 there so we'll do mg12 and it's like kind of cut off at the bottom by i don't know some amount so first maybe let's um see where this padding is coming from because we probably don't need it so there's like a pb16 here i think i'm just gonna like rip that off or maybe we can try like negative mb 32 and just like see do we get like because you might just want to make this based on the image you know like you might still technically want panning conceptually but you're just pulling the image off the screen so um let's leave it like this for now let's just kind of eyeball it looks like it's cutting off like in the middle of these like little rectangles here and we got pretty close there honestly so we can just roll with it all right i'm gonna have a little a little bit of coke zero here uh grape beverage all right so let's do this um pop over let's just see what we have currently so it's kind of pretty close honestly um i'll just find where that is here so let's just set our data here to true so that on refresh it's already open and i think we just have to change this workflow thing so workflow mark teal i think it's going to be this one to 500 science 600 cyan 600 okay um these all look fine i think again steve kind of bumped up the space between everything um also it looks like you made the text darker let's see maybe they're just like 900 already now the tricky thing is these have like a little padding on them so if you want to get this space right it looks like there's about 32 pixels between there so we have to look at this and think okay there's an extra how much padding on here 8 pixels so 32 minus 8 24. so we actually want the gap here to be 24. so is there actually no space between these right now oh there's a padding around this so pt6 maybe does that look right something i'll often do is just kind of like this sort of trick you know just kind of eyeball like does that seem like it's in the right spot seems like maybe it's a tiny bit low but pretty close might be something else going on um let's see let's measure with the old 44. yeah it's it's not quite right for one reason or another let's just eyeball it and then there's a button down here and it looks like steve got rid of the two-tone thing so we can get rid of that too maybe so what does he have here existing customer login so this will be text base font medium text gray 500. this will be text gray 900 maybe like hover underline or something just kind of okay and i guess we want text center on this okay and this has got 24 24. hmm it's making me trying to i don't know it's hard to know where to put some of the padding sometimes it doesn't matter you know that's the thing that makes it tough maybe we'll just do what do we have for horizontal padding here 20 on the edges px5 py6 and that will put this button in here let's find that star free trial button and we'll just copy it i'll make this a link this time though since can't really be a button because there's not really any form so that's probably going to be yeah aligned weirdly so it's almost like this needs nothing but that's kind of weird i feel like maybe this should have nothing to in that case and we should actually um move some padding to this thing pt5 what was it here pb6 let's get rid of this and then hopefully everything will be kind of tight together and we can just do this the old-fashioned way so 24 empty six and this is 32 but we have to account for that padding on this thing which is eight so 24 so should be the same okay so this should pretty much be correct now uh we we do have like a indigo there so maybe we'll swap that out with a teal i don't know yikes that's ugly cyan what color should i use for that hmm tough thing about doing gradients for everything is that when you do have to use a solid color it's really hard to know what the right solid color to use is since this goes to science 600 most of the time i'm leaning towards six hundred okay so let's set this back to closed by default uh julius says i have to center the illustration how is it not centered i mean it's not explicitly centered but it's bigger than the i guess there's no padding okay gotcha 16. okay so let's do like a um maybe we'll give this like an explicit width full just to make sure okay so that's pretty good all right thanks for that um all right so yeah i guess let's just move on to the next section okay so got our main i got our deal here so i'm gonna call this uh feature section with screenshots so do we have an h1 yes this will be like an h2 um h2 serverless p no server no problem p and let's clean up this formatting a little bit okay so here we've got text base font semi bold oh my goodness can't type what semibold tracking y der text cyan don't know oh six nine four i guess we can find that like this what ah it's reading from the wrong config that's okay it's because this is a really complex project with three different tailwind configs in it oops uh we'll go to tailwind css.com and find the colors usually we use color styles for this but somehow this one got slipped up oh six nine four a two whoa it's not even a real color tl 600 i'm gonna go with cyan 600 um yeah none of these have color styles so we'll have to just guess oh four seven four eight one yikes steve okay we'll just go with cyan 600 we'll kind of skew towards cyan for these things here we've got eight pixels between that this is text 3xl fonts extra bold sick uh okay whoops oh weird that the image is like overlapping because this has a relative on it there's a relative somewhere let's change this to be like 24. i guess the problem is like depending on the size this kind of gets messed up maybe we can just go with like 20 16 12. probably 16 is good and then we'll figure out that scaling stuff we might need to give it a max width or something okay um where's this bg gray 900 stuff coming from anyways deaf it's kind of not the best place to have this color whoa um but there's not really any good shared parent between these either uh let's just see does this go in the right spots i don't really want it extending all the way down um the tough thing is because like you want this to be in the main tag you want everything else after it to be in the main tag too that there's no like common parent between this and this that's unique to those so no matter what we have to have like um a bg grain 900 in some different spots but maybe i just need to do it like here and then move this up and then take this stuff and then similarly find the this one yeah that's kind of sucks move that up like that but now there's like you could do this oh weird what why'd that happen uh that's odd um yeah i need to put that here but even this feels like kind of hacky i really want these to be in the same element instead of just like you know there's a dark element here and like a dark element up here and even when you like look at the breakdown of um oh there's got a a spammer how do i uh give make someone a mod manage moderators okay god then don't make this straight forward moderators robin what is robin's username or can i just there we go that should work that was easier all right now robin can do that stuff um yeah so right now i'm trying to figure out like the best way the most sensible location for some of the stuff to be so like imagine this div doesn't even exist for simplicity we've got this div that's got like some padding on it at the top then we've got like a main section this has some padding on it like it's fine but it's also just like arbitrary um i don't know let's just live with it for now and uh see okay so add our uppercase text here and uh we're going to center everything this needs to have 64 at the top i'm expecting that there's going to have to be another thing here pt16 just because there's gonna need to be a container there's gonna be a background color it's you always need to have extra wrappers always because you're gonna do this px6 here probably or four so eight twenty i guess the next thing uh let's just do the paragraph styles here so this is text excel and looks like probably gray 500 and we'll just center all this stuff and what do we got for gap 20 okay this will be px4 and that's looking this is a sad situation is there a letter spacing on that no if this makes it not wrap i'm going to be sad oh yikes don't tell steve looks better anyways um okay so then we've got this screenshot down here oh it looks like this is on a gray background too not white okay so we got a screenshot which i think i called that something green project app screenshot seems fine green project app screen shot dots what is it it's probably a jpeg for file size okay concerns looks bad but uh that's okay so looks like we've got a little bit of a corner radius on there i'm guessing it's probably on this frame four pixel corner radius and then a uh shadow of some kind i don't know something like that probably okay and 48 pixels above it it's weird that that looks so like pixelated when it gets that small okay i move this over to the side i don't really need this as bad as i need the vertical space okay okay so we got that am i zoomed in here oh this is zoomed out knew something felt weird does this gap look weird to you eight letting nine uh it's cause the line height on this is weird so you have to eyeball it or is this working yeah let me just go with four pixels whatever yeah maybe not that's fine okay um sometimes it's nice to add like a little border around these images like a really subtle one but i don't know if steve has in this case he's got like a pretty aggressive shadow i'm gonna try and add one using the ring utilities all right let's do ring one ring black ring opacity five it's kind of my go-to just adds like a little extra you know it's just a little clean level line there to break it away from the background what if we prop this to an lg shadow excel was better okay all right so this section looks like it's the same as this section so we can kind of use that as a starting point i'm just going to duplicate this whole thing and we'll call this like feature section with grid i don't know deploy faster everything you need to to deploy your app okay and this is white so we'll change that to white and we're going to pull this image down a little bit looks like we want to cut it off at about heroicons that's about 40 pixels so we'll do like a negative empty 10 on the image hopefully that does what we want no negative margins man they are a mystery mb10 okay that seems good um change this text just so everything's as identical as possible looks like maybe it's already the same okay then we're going to build out these things these will be kind of fun okay so looks like we've got 48 so that's fine and here we're going to have a grid of stuff grid calls one 32 gap eight and we'll have an each in here so we don't have to duplicate this and this will be probably like icon title and i guess we'll just use like the same warm up some text for all of them so we'll just have those two so let's go to heroicons and find out what all these icons are called cloud cloud upload cloud upload push to deploy lock lock closed and then looks like refresh or something simple cues looks like we should capitalize that okay so um yeah here we're gonna have an item with a thing in it for the icon x heroicon type outline name item.icon we should see something happening yep okay and this is going to be gray 50 i'm sure got a corner radius of eight i'm padding what is that 24 and 32. um h3 and i'm not title this stuff let's kind of clean that up okay so that's obviously not looking done by any means but we're getting there so let's style this um icon so i'm going to do a spin around the icon spin is going to be flex inline flex item center justify center it is 48 24 so it's 12 on all sides p3 pg gradient to r from teal 500 to cyan 600 rounded md probably and then the svg itself is going to be h6w6 text white and then we'll get the title and the text done and then we'll figure out the spacing so this is actually needs a shadow too okay shadow lg okay so this title is text lg font medium text gray 900 tracking tights surprised steve did tracking on that text here we've got 19 19 i guess we'll call it 20. and what's the text regular gray 500 mt5 and the gap between here and here is 32. okay so now we just need to pull this up so one way to do that is i think put all this in here um so let's look this is supposed to be in the middle of that so we could say like pb8 just to make this simple mathematically and pull this up by 12 negative mt3 i'm stupid negative empty six and then the only thing that's a little bit funky is how um that's impacting the grid here i think we want to do like flow route on this maybe no float on this um let me think i'm trying to think of like the most resilient declarative way for this to be treated as the top of the of the element like a a simple hack is to just add 6 to this which probably won't work because i don't think we have gap 14 oh we do hmm that surprises me yeah we do have it so like that works um but i'm wondering like is this even right no like that's not right either so what's a clever way i swear there's a way with css to um kind of make like this be inside the box but maybe not now that i think about it i mean that's fine we can just um we can just like measure from here to here you know 72 basically and from here to here which is like 55 it's kind of a weird one um it's not that hard to do honestly we could uh could just do like a dot pt6 here move this up um huh why does that get pulled up let's break that for a second this should uh there we go does it work here float is like a confusing thing no it basically makes something it avoids collapsing margins it creates like a barrier between collapsing margin situations so i guess that works in this case so now if you look at each one of these right it is the right size but it's just kind of unfortunate that we had to do that like padding trick but it's fine um at least it keeps like i think we can go back to this being eight now and you know everything is kind of like based on the gaps around these icons which kind of feels better kind of depends what we do on the desktop layout actually no that still feels good yeah we'll just keep it like that okay let's look at the next section so i'm thinking about how this could work there's two ways that we could sort of build this testimonial thing i'm just trying to look at all the different options to try and understand the best path forward um basically what i'm trying to decide is should this be pulling out of the top or should there be kind of like a make-believe box back here and that's where the white is coming from like do we want to consider this gap here to be part of the parent section and this is just like being pulled up to overlap or does the parent section actually like end here you know like that's the padding that matches this padding and anything after that is really just part of this element i'm inclined to build it that way because it feels like easier to make it stackable [Music] um but there's some situations where it wouldn't work like if you if you had something in the background here that like had to bleed across both it could be complicated so the tough thing is if you try to do this with a negative margin to pull this out as the page stretches and the image gets wider the negative margin is going to be like a fixed amount where that might not be what you want but at the same time it looks like the image drastically changes like aspect ratios and stuff all over the place so i'm just trying to think like what's the best way to approach it like um i guess we can just try something you know no matter what we're gonna need to have um a new section for it so maybe we'll just like build the whole thing and worry about the overlap it's like the last kind of face of it either way i imagine there's like a div or like an image um i know that we have actually i think i have it open here there's another component that has the same picture in it right here we'll slam that in there and then we've got this punctuation thing i know we use those two on uh our other testimonials right here i'm just gonna grab that right there okay so so after the image section we're gonna have like the section with like the block quote and there's gonna be like an svg in there and uh what's the markup for a block quote these days so we went with block quote with a div with a blah with the footer so we'll do a block quote here with a div with the svg with a p with the footer and we'll rough in the content there this is like judith black ceo pure insights here we got some lorem ipsum okay so i mean this should look bad but it'll be something this we want to have that gradient on it bg gradient to r from let's just guess that that's teal 500 to science 600. okay okay so the image i'm trying to decide like do we want to give it a fixed height or do we want to give it an aspect ratio i suspect an aspect ratio is probably better 204 divided by 344 it's basically like a 6x10 aspect ratio so we'll do aspect width 10 aspect h6 with any luck that gives us class equals object cover oh i was gonna say should work okay and we got shadow xl rounded xl and probably overflow hidden okay so the gradient stuff is obviously not taken care of here but you could just move this up here for now all right send this block quote has a 52 which is kind of a weird one we'll call it a 12 i guess i'm guessing the svg actually has this we're going to want to figure out so this svg we have it as a square here and steve's got it as 43 pixels wide which i'm guessing yeah we probably want to go h12 w12 yeah i mean like that's probably right and what does he have it has white 25 percent text white opacity 25 and inside this section we're going to have px4 whoa and all right you know how much easier this is not streaming where i can just fit everything on my monitor i buy a 32 inch 6k monitor so i can be productive and then i uh do these live streams where i have to make everything look good in a youtube window or i can't even use it unbelievable oops okay yeah it looks close and then for this footer looks like we've got 24 pixel gap and this looks like it's text white but probably some other stuff going on text base font medium text weight text based font medium text cyan 100 okay then we've got a gap of 67. so i guess we'll find this maybe and pb16 on that okay um and then for this image one we'll do like the same thing px4 then we just have to decide how to like pull that up so we can always do like negative empty 12 or whatever you know and pull it up 16. 24 the problem with this is um as it gets wider you'll see the it's only going to stay overlapped by like the exact same amount which i don't know maybe that's fine it just feels like weird that as you get smaller it's like gets to a point where you know it's not even overlapping which is fine in a way but just kind of feels weird to me because it feels like it's it's not modeled properly you know i mean like that shouldn't happen if it was modeled properly um so i don't know let's let's roll with it for a second if we find this and we do like this is my all my trick by the way for all this stuff i'll do like that exact margin with the exact padding so now they're going to be touching and now any number that i increase this by is going to give me like this gap so if i need 64 then i need to add 16 to that basically so this should give me the same thing as the figma file so this works um but yeah it's just a little bit just feels a little bit wrong that that stays like that so how about i show you like another approach so we can kind of compare so another is to make this just pb16 right get rid of the negative margin on the top of this wrap this in another div give this a class of relative make it absolute inset x zero top zero h one half bg white container here and now you'll see that that always stays exactly halfway in the image so no matter how small we get the gradient is always cutting off exactly half of the image and that feels like more bulletproof but i'm not sure that that's what steve necessarily wants either and again it gets weird because the fact that you're you're cheating a little bit you know like you have there's an element here and i could make that not white and i mean that's kind of helpful for like understanding what's happening you know like you can see i have like a a div there the tricky thing is that's a fully opaque container meant to cover up this gradient and if it's not there like if i set it to opacity zero it reveals the gradient behind it it doesn't reveal some continuity from up here if that makes sense um it's fine for now but it does make me a little nervous like um if you had like some illustration behind this that like bled out and overlapped both of these sections you'd have a hard time kind of positioning it properly but yeah this is probably the more bulletproof solution so yeah we'll roll with it this way for now okay so then after this it's like stuff that we've already built um for tailwind ui so i'm hoping we can slam some of that stuff in with minimal changes and um that'll sort of demonstrate that downwind dries a useful tool uh what does steve got for this so he got rid of something here you'll see in this one there's like a little half overlap thing there he made some tweaks but we can use this as a starting point for sure which is kind of how telling us meant to be used so we'll take this three column cards thing um yikes we'll find this testimonial section blog section grab the data that we're using and up here we'll set like blog items um okay hopefully that'll compile okay so we've got our blog stuff down here and uh for uh purchasing power parity stuff on tailwind ui if you email us we can definitely hook you up okay so i guess i'm just gonna probably the styling for this stuff i think that's actually pretty much what we want learn it's kind of tough to know like when to make this the h like heading versus this in this case it feels like this one is because it really is like labeling it and this is kind of just like i don't know but it's also kind of weird because semantically you would want this p tag to be under the h2 so that you kind of know it's related but this is why our buddy david lure is on the team and he can help me out with these sorts of things nice having an accessibility expert on staff big time okay so we're just going to find anything that says indigo in here which is hopefully not too much change it to cyan and look at these gaps 24 oh interesting okay yeah we had a little bit too tight of a gap by default there like otherwise that's pretty much right the only thing is there's this like big background overlay thing that we don't need anymore so we just got to find where that is i think it's this yep and what color background does this got okay okay so that's probably good maybe this gap is different 52. steve buddy what have you done me and him could just review it at the end and figure out what we got okay so then we got this call to action section which again is already intel and do i think call to cta sections down here the split with image one split with image v2 so after the blog section so this will be kind of interesting to get this gradient working so i can show you how that would be done so it looks like steve is uh zooming this image in a little bit more here which we may mimic or may not i think it kind of depends how the desktop one works desktop one's kind of zoomed in too maybe not though we'll play with the unsplash parameters a little bit and try and get something cool going on so if you look at this he's got a gradient on it it looks like it's one for b to o nine one one four b two o nine one one four b two o nine one one four b tl five hundred 089 tl 500 to science 600 so you'll see here um when we did the original one two five hundred sine six over 2 500 science 600 the um what is the use case for telling css to build websites without wasting your time writing css and naming things because yeah it's a pain to name stuff like what would you call this section or what would you call this class you know it's so slow all right so um you'll notice here with this figma image or with this on splash image we actually are encoding a mix blend mode sort of cool thing into the image itself so see how this image is all like indigoi and stuff that's because in the query parameters we're actually adding like a blend with a set desaturation and like a multiply so if i cut this out you can see there's the original image um but we can blend it with whatever we want like say we want to blend it with like some horrifying green oh wait blue green would be this right you can kind of do crazy stuff but you can't blend it with a gradient which is uh not going to work for us so instead what we're going to do is we're going to not going to blend it with anything we are going to desaturate it but we're going to add a div on top bg gradient 2 r from teo 500 to science 600 and we're going to make it absolute inset zero and we're going to say aria hidden true so david doesn't kill me and we're going to make this relative and then we're also going to make this um what do we got for the opacity on the gradient is like fine so we just need to do like a multiply on it right so tailwind doesn't have like mix blend mode utilities but that's who cares like we could add them but i'm totally comfortable just doing this and then we're done okay so what's the content looks like the same looks like steve darkened this background though so we'll do that 900. and then what is these text colors just make sure uh no we don't know i just hope it's the same here we've got 48 padding on the top that looks like it's the same in the bottom let's uh just zoom in the image anyways we should be able to do that with the um with the unsplash stuff let me see fit crop uns or imagex query zoom is that a thing crop crop mode okay so crop from the left of the image right yeah looks like it's gonna be annoying that's okay all right so i think after this there's just a footer which exists in tow and ui too i think it's just this first one four column with company mission this is uh taken from silicon valley season one by the way nice little easter egg okay so i guess we'll do this after maine and we're going to get all this whoops lost solutions so we need to find in solutions footer dot solutions in footer dot footer dot footer dot and then hope this isn't broken check the console social is not defined okay so there's a footer steve told me before that he changed the color of it to gray 500 so we'll just do that gray 50 sorry there's some extra padding at the bottom here looks like that's probably coming from this one pb16 smpb24 i guess we'll just delete that and figure it out when we do the responsive stuff toe end is very maintainable the main purpose behind taylor is not for prototyping it's literally because maintaining css written the traditional way is painful so the main goal of tailwind is to increase maintainability i've interviewed lots of people at big companies like diana mounter who works at github about how much more maintainable their stuff is since switching from like more traditional bem style stuff to utilities because when you need to change something you actually know where to go and you know that it's safe to change um so i would just try it um i wouldn't worry about the maintainability stuff without actually trying it anyways so here's our bad looking desktop version um usually what i do next is i look at like the 639 break point just make sure that there's nothing that looks like really bad because this is kind of like the next step to uh before 6 40. so sometimes steve gives miss breakpoint sometimes he doesn't so i usually just kind of figure it out myself okay so it looks like at 768 we switched to like a centered layout so maybe we can do that for the 640 one too but for the 639 one i think um 639 one is tricky like we could constrain this again we can't make any changes from like this size to 639 like any changes we make have to like not affect the 375 one so some simple stuff is like putting a max width on here some things to consider are honestly like just centering the whole thing even though steve has it left aligned you can do things like just constrain the whole thing you know to be like i don't know 24 rims or something feels a little unnecessary but let's think about it say we went to this area so px4 sm px6 so here we've got like a max with 7xl so we had like a max with 28. and this was like on sm or whatever this is maybe a good move honestly like just kind of like making the whole thing like a sensible mobile size i don't know i kind of like it and then down here we can do the same thing where do we do the yeah okay so um this actually needs to not be like this i have to make sure i do the max width on the same element that has the padding otherwise things never really work so i'm not sure if this is actually a bug i'll have to look at that yeah this looks good i think this is this the right way to do it just like constrain the whole thing a little bit let's do the same thing here then down in this section same thing max with md mx auto like you could see how you might want this image to just be like larger you know but at the same time i don't know kind of feels clean to me like this mx auto max with md same down here so this one down there yeah like this feels like it's got a lot of space this feels good i don't know why we never did this for like all the mobile layouts honestly this is seems like a no-brainer in hindsight steve is going to look at it and be like yep this is better at least i hope so yeah we should have just constrained every single mobile layout to whatever this is for something what is it 448 yeah i mean that is what i'm talking about okay and then this call to action section award-winning support the worst thing about tailwind ui developing it is when you kind of land on a nice pattern for something after you've already built 300 components that don't include that approach okay so that looks nice i like how that turned out um steve is uh my business partner steve shoger he's the one who does all the designing and then i help out with the building other people on the team do the building too but steve is a design guy he's the idea guy all right let's uh max with md on this too maybe i don't know i'm wondering what to do for the top nav like do we think it's better like this or all the way to the edges like this is still kind of i think it's better at the edges because you want to be able to reach with your thumb easily okay um yeah so let's see let's jump to 640 now so it's x40 looks like things get centered already yeah but we have this max with md thing unnecessarily okay all right so here i got to kind of make some decisions about what should happen so smpt24 i'm just going to delete that for now where's their max width here so this is max with md md max with 2xl maybe we can do it with like an sm max with 2xl i don't know uh try and decide what this should look like i feel like we almost don't need a max width but if there is one it should be the same as the one that's here but then we want these to at least go next to each other and i guess we want this text to get a lot bigger too so i guess we'll just see what we can do with that oh there's a letting none here that's not necessary sm text 5 xl 6xl i don't know we'll just see yeah that's good and then um i got to figure out some padding stuff there's probably some px4s that are missing smpx6s which is something we always it's like a consistent pattern we use for the page padding um [Music] okay class sm flex smt 0 oh where's the dirt gonna and the old rapportive okay and then for a gap here looks like we've got 12. and it looks like here we've got min width zero flex one but combined kind of width of 581 36 mx auto it's long don't let me forget through that focus style all right um this text probably is the same max width which actually makes me think we can move that to here okay spacing is 16 so this can become smmt4 spacing here to here is 48 ish okay the image gets bigger looks like it's the same as the other stuff so we can say sm max with excel maybe sm what did we do for the max width on this 2xl so just thinking this through to make sure that we don't end up with like padding in the wrong place so like this has a max width and a padding this has max within a padding with planning is different okay so 2xl with a px6 should be close enough to sensible so the tough thing is trying to decide what to do for the placement of this image because again you've got this kind of like funky thing where the image shrinks you know so at 640 i feel like this is revealing too much of the image so we'll definitely probably bump this up to like 32 maybe maybe even more 48. 40. what does steve have at the see at the 768 size he's got it cutting off i guess we're not far off really he's cutting off a little bit less 36 maybe 32. it's really just uh at 6 40 does it feel like feels okay at the same time i just feel like that i want it to be shorter here like it doesn't feel like an important image it's just really just like for flashiness so i feel like you could literally just show like the top of it like that and that kind of gets the point across yeah i think i'm just gonna make an executive decision on that uh we don't do any client work or anything like that unfortunately sorry do you forget to change the background color of the burger menu oh something funky is going on up there the background color of the burger menu why is there a line this background color it's supposed to be white right where's this border coming from is there even a border there or is this just a glitch because we've got two elements touching uh this part looks white i feel like i oh is it you know what this is a zoom problem i bet this is why i hate that we have to have um two elements that have the same background color and have them touch because if you zoom out to 75 percent or 76 percent or whatever weird thing you know it uh creates little artifacts or whatever okay so um yeah this is probably like not going to be needing to change much we can probably uh i'm confused about the comment about the menu the hamburger menu background color i mean this is the menu this is definitely white you know this is the menu this is definitely white they look the same to me but i could be missing what you mean change the background color of the burger menu do you mean the button oh yeah the button itself okay so the buttons gotta be dark gotcha so this should be 900 over 600 probably oh wait however 800 yeah all right cool understood thank you um okay so at this point i'm just trying to decide like what sort of constraints to use for different things like if we go to like 767 that's probably a good place to judge it's like this could certainly be wider probably but maybe not that much wider um we might be able to get away with like two columns here although they might be a little bit tight but we can try it so let's maybe just start by going to the server listing and we'll add our smpx6 sm max with 7xl as kind of like the full screen size we'll just you know ask ourselves is that good it is pretty close to the design anyways um so i guess we'll just roll with that for now although i do like something about having everything kind of tight in the middle still see the hamburger button if the menu is open uh this is the close button see how you can see that border there oh i can't think of any good way to solve that that's really depressing i should ask david lure he can help okay so i was going to do this grid thing so let's just try two column grid at this size and see what we get that's not good but we need to change the max width stuff that's probably fine honestly yeah gav your answer is correct the problem is the markup structure for accessibility reasons this is in the main and everything else needs to be kind of like in like the head header which i actually don't even have it in the header here so i should think about that too but the problem is this main section needs to contain this and everything that comes after this and this needs to be in a separate element so it's like there's no like direct div that can just wrap both of these because if i try to do that then i'm also wrapping all this other stuff because of the kind of html5 elements oh does steve have four oh he's got like all these extra things advanced security powerful api database backups guess we need to get those in there so that's like shield check out a thing i guessed it correctly and then what is this one going to be cog guessed it correctly and what's his other one the servers one that one i don't know it's probably servers server okay so advanced security powerful ipi database backups got another border here see oh you can we could always do like a a negative margin overlapping thing oh man that's disgusting okay um i don't know if this should be like constrained more i guess not okay so now this one now it's like full width 720 divided by 256 26 minus 720 i don't know you could do like a 6 over 16 or 5 over 16 or uh yeah we'll see let's figure this aspect ratio where are ya aspect width 16 aspect h6 should be like long and narrow now and then we can do sm max with some excel sm px6 and same for this sm max with 7xl but now that like half bleed trick thing is kind of working well looks like we got way more space here now 96. smpb24 might not want to do this on sm we might want to wait to do it on md but i don't know it's pretty big everything's looking pretty huge what do we got for this padding about deploy faster that jumps to 96 and so does this okay so i need to change that too this should just be don't need that there and then up here i think we'll just move this here smpt24 okay and then the learn stuff of a is the same 96. what does he got for the padding on the bottom of that 96. did he change it here 64 64. so he actually made these the same which is probably simpler and then are these blog articles kind of supposed to be like that at the screen size oh he's got them in a max wood thing the probability in one actually okay so it's probably good feels like if these are going to be constrained then maybe this should be constrained same with this at 768. [Music] um i got to figure out this header too there's um extra button up here but i don't think steve would care if i just didn't add that tough one like 10 23 is like always a good one to look at feels too wide uh yeah the stream will just be saved on youtube so no worries there like that constraint on the hero kind of feels like maybe that would be useful to carry through the whole thing hmm all right i think i'm going to run because uh some of these are like decisions i need to figure out with steve so i got probably gonna hop on a call with him and work through some design stuff because uh most no figment design ever survives first contact with the browser um but uh yeah we kind of did some neat stuff i think some cool tricks um i'm gonna be building this stuff every day for the next hundred million years so hopefully i'll do some more uh live streams and stuff so yeah we'll wrap this one up for now hopefully it was a kind of fun and maybe learned a thing or two and uh with any luck maybe i'll do like another one later this week when i'm working on a different design all right thanks everyone see ya you

Channel: Adam Wathan

Views: 21,322

Rating: 4.9474673 out of 5

Keywords:

Id: oQhVNja7Trw

Length: 117min 57sec (7077 seconds)

Published: Mon Jan 18 2021