Free Tutorial

Background Split Alignment

Simon Vrachliotis
Simon Vrachliotis
Background Split Alignment

Aligning components in the foreground with decoration in the background can bring cohesion to a user interface. The Pro Tailwind Calendar App shows this in action, where a darker background lines up with the side panel beside the date picker.

Keeping things lined up at different viewports can be tricky. But with the right planning approach and knowledge of CSS features, you'll be taking your UIs up a notch in no time!

What You'll Build

In this exercise-driven tutorial you will learn how to recreate a simplified version of the background color split effect, as seen in the Pro Tailwind Calendar App.

Throughout the tutorial, you'll work with CSS Grid, extend Tailwind by using inline arbitrary values, and calculate sizes with help from CSS functions.

An Exercise-Driven Tutorial

This tutorial is split into several exercises. Each features a problem that encourages you to take an active, exploratory learning approach to find an exercise.

  1. Watch and read the exercise introduction. Each problem contains an embedded editor with a starting point.
  2. Try to solve the challenge on your own. Struggle for a bit.
  3. Watch the solution, where I walk you through how I would tackle this challenge.

All right, let's get started!