From the course: Tailwind CSS 4 Essential Training
Join today to access over 24,800 courses taught by industry experts.
Building common responsive layouts - Tailwind CSS Tutorial
From the course: Tailwind CSS 4 Essential Training
Building common responsive layouts
- [Instructor] Here's a simplified version of blog layouts that we usually see in real life. You see a navigation bar on top, some blog posts in a grid on the left, and a column of Featured Posts on the right. This is what it looks like on large desktops. On a mobile device, however, the posts appear in a single column and you don't see any featured posts. On slightly larger screens, maybe a tablet or a phone in a landscape orientation, you see the posts in two columns. On even bigger screens, a tablet in a landscape orientation or a laptop with a small resolution, you see two columns and the Featured Posts section. And on large desktops, like we saw, there are three columns. Let's build this responsive layout entirely using Tailwind CSS. To save time, I have already added the markup and also added some required styles for a mobile layout since we need to develop mobile first, and that's what you see right here. So this much is already done, but if you increase the browser width, you…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.