Responsive Patterns

Common responsive layout patterns in practice

Common responsive patterns using Tailwind breakpoint modifiers. Switch viewports to see them adapt.

Pattern

Items stack vertically on mobile, go horizontal on md+

Viewport

Tailwind CSS

<div class="flex flex-col md:flex-row gap-3">
  <div class="flex-1">Card 1</div>
  <div class="flex-1">Card 2</div>
  <div class="flex-1">Card 3</div>
</div>

16 / 23