Learn how to build
modern user interfaces
for the web.

Lesson 125:15

Learn the basics of state-based animation with Framer Motion.

Lesson 216:43

Add animation to unmounting elements using the versatile AnimatePresence component.

Lesson 318:54

Use scroll-based animation to smoothly grow and shrink a fixed header.

Lesson 417:08

Add a fading nav and a blurred background effect by extracting a reusable Hook.

Lesson 514:00

Learn how to use the `x` shorthand property to smoothly animate an image container.

Lesson 622:04

Use an animated aspect ratio to create a navigation bar inspired by iOS Photos.

Lesson 734:19

Use measured height to resize a panel with dynamic content.

Lesson 839:47

Animate an infinite monthly calendar using direction-aware dynamic variants.

Lesson 19:08

Get acquainted with Tailwind's utility-first approach by building a custom message component.

Lesson 27:47

Use Tailwind's Flexbox utilities to make an application layout with fixed and flexible panels.

Lesson 34:59

Use Flexbox to choose which panels should scroll when their contents overflow their container.

Lesson 43:32

Learn best practices for overriding and extending the default colors with your brand’s palette.

Lesson 5

Override the default typeface used by Tailwind with an imported font.