React NextJS Create Instagram UI clone — Profile Page Part 3

Add the detail section at the Instagram profile

Ckmobile
3 min readDec 24, 2021

In this article, we are going to add the detail part.

Add the name, button and setting

Under the middle <div>, we add the title with text color gray with shade 700, text size is 2xl and margin right with 4 units.

Then we create the edit profile button by adding cursor pointer to make it has a finger when mouse over it, make it inline so it will not occupy the whole line.

Make the text small and text color gray , text weight is semibold, the horizontal padding is larger, add the border with gray color and make a rounded corner, add a margin right with 4 units so it will leave some space between the edit button and the setting button.

<div className="col-span-2 "><span className=" text-gray-700 text-2xl mr-4">Ckmobile</span><div className="cursor-pointer inline text-sm text-gray-700 font-semibold  p-1 px-2 border border-gray-200  rounded mr-4">Edit Profile</div><CogIcon className="h-6 cursor-pointer inline flex-1" />

--

--