Loading
Background Split Alignment Tutorial (9 exercises)
explainer

Introduction to the Background Split Tutorial

In this tutorial, we're going to recreate the background color split effect that you can see in the Pro Tailwind Calendar app.

A calendar with date/time selectionLoading

You can see the background color split is aligned with the card split between the sidebar and the main panel.

Loading explainer

Transcript

0:00 Hey, what's up?

0:01 In this tutorial, we're going to recreate the background color split effect that you can see in the Pro Tailwind Calendar App.

0:10 You can see the background color split is aligned with the card split between the sidebar and the main panel.

0:17 Before we jump in and write some code, let's do some thinking about our approach. I like to recommend when solving CSS problems, to think in rectangles. Let's spend some time visualizing what we're trying to do.