Intermediate React, v4

Intermediate React, v4 Positioning

Topics:
Brian Holt
Brian Holt
Snowflake

This course has been updated! We now recommend you take the Intermediate React, v5 course.

Check out a free preview of the full Intermediate React, v4 course:
The "Positioning" Lesson is part of the full, Intermediate React, v4 course featured in this preview video. Here's what you'd learn in this lesson:

Brian uses the TailwindCSS utility classes to position elements in the Pet component. Positioning can be absolute or relative. The utility classes provided consistent spacing offsets from the top, left, bottom, and right sides of a container.

Get Unlimited Access Now

Transcript from the "Positioning" Lesson

[00:00:00]
>> Let's go do pet really quick. Because right now we have like this, these pets, and we're just kind of blindly rendering out the text here. It'd be cool if we could make like a little overlay here really quick, right? So let's do that. So in pet. So first thing up here, class name equals, and we're just going to replace class name here.

[00:00:23] I'm gonna put relative and block, cell position relative. So that means I can do absolute positioning inside of here and it will be relative to the outward anchor tag. And the anchor tag will be a block, right? So that's what that does. Everything else here, this can be all left the same.

[00:00:44] You can delete this className if you want to. It's not doing anything but you can if you want to. Then this className here instead of info, we want absolute, position absolute. Botton-0, so, we want it to be along the bottom. We want it to be on the left side, so left-0.

[00:01:03] Let me want a background gradient To top right so 2-TR, 2-TR. So that's gonna go from bottom left to top right and we're gonna go from white to I think it's transparent, right? Yep, to transparent which means that it goes to an opacity zero, right? And then when do padding right 2 and padding top 2, sorry, just to give us some extra space there so that the gradient can kind of fade off and look kind of nice.

[00:01:48] Okay, and then now you get these kind of nice little tags that are kind of floating over the bottom here. Not the nicest thing you've ever designed, but I also did it in 45 seconds. I guess that's kinda why I like tailwind is it kind of matches the way that I do prototyping but I end up with something that I can keep.

[00:02:13] Just kinda nice. Normally I'm just doing this in the browser and then I'm copying my styles over my style sheet, right? Okay, that is tailwind.css. So going back over to our course website here, we just finished Tailwind down here with positioning. So again, I'm gonna let you know we did not fix this page, right?

[00:02:41] This is still a hot mess but I think it would be a cool exercise for you to go back afterwards and try and make that look nice yourself, Awesome. So now if you click here you should be able to go here this is the state of the world with tailwind.css.