Creating the user interface components

To start building the user interface, we should decide which components will be necessary, looking at the mockup we proposed.

We can see that we have a lot of components, so let's separate the bigger ones from the smaller ones:

• Header
• Product List
• Cart

These are the biggest ones, so let's go step by step.

Header

To create a Header component, let's start by creating a folder in our /src directory. This will be /components folder where we'll store all our components.

Then we'll create a Header.jsx file inside the /components directory with this content:

import React from "react";
export const Header = () => (
  <div className="grid grid-cols-0/5 grid-rows-1 bg-gray-900   p-3 gap-3 items-center">
    <h1 className="text-white text-3xl font-extrabold tracking-    tight underline">
...