Project Setup

Before putting our designer hat on, we need to take a few steps to make sure our project is set up for success.

Writing unstyled HTML

We'll start by writing completely unstyled markup, so we have a working baseline. A document that makes sense, even if it was completely unstyled.
Technically, we'll be 📜 writing JSX.
But the output in the browser will be HTML.

Configuring the Tailwind theme

The Figma design uses some colors, fonts and breakpoints that are not part of the 📜 default Tailwind theme.
We need to configure those.
Remember: we're going for a "Pixel Perfect" recreation here.
So let's sweat the details from the get go, and align our Tailwind theme with the design decisions made in Figma.