Tailwind CSS Layout

Tailwind provides a comprehensive set of utilities for building layouts, including Flexbox, Grid, positioning, and more.

Flexbox

Flexbox is a powerful layout method for arranging items in rows or columns.

HTML
<div class="flex items-center justify-between">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Grid

CSS Grid is a two-dimensional layout system that Tailwind makes easy to use.

HTML
<div class="grid grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Responsive Design

Tailwind makes it easy to build responsive designs with breakpoint prefixes.

HTML
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <!-- Items will be in 1 column on mobile, 2 on tablet, 3 on desktop -->
</div>

Your Task

Create a responsive layout with:

1. A header with logo and navigation
2. A main section with a grid of cards (1 column on mobile, 2 on tablet, 3 on desktop)
3. A footer with multiple columns that stack on mobile
4. Use appropriate spacing and alignment