From the course: Tailwind CSS 4 Essential Training

Unlock this course with a free trial

Join today to access over 24,800 courses taught by industry experts.

Solution: Style an event page section

Solution: Style an event page section - Tailwind CSS Tutorial

From the course: Tailwind CSS 4 Essential Training

Start my 1-month free trial Buy for my team

Solution: Style an event page section

“

(techno upbeat music) - [Instructor] All right, let's dial this section. I have the mockup open on the other tab, so it's easy to compare. Now let's look at the markup ones. We have this large div here with the text and the image and three small divs, all within a single parent div. Okay, let's first add some padding to all of the divs. Let me try looking at the mockup, and let's say we add something like p-6 to the first one. p-6. Let me refresh. Yeah, looking at the mockup, it looks like we need slightly more padding, so probably p-8, and refresh. Yes, this looks great. For the smaller divs however, I think p-6 could work. So let me add p-6 to all of them simultaneously, like so. Oh, sorry. Yeah, like this. And, yeah, this looks like the padding is good. And now, clearly, this entire thing is a grid layout with the first grid item occupying all the three columns. So what we do is, we go to the parent div and we add the grid utility class to turn this into a grid container, along…

Contents