Loading
Background Split Alignment 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.