Instagram UI Clone Stories

In this project, we are going to create the Instagram stories UI clone with Next.js and tailwind CSS.

The Instagram clone looks the same as the real one. It contains an avatar and its username and the gradient ring. For the avatar, we will use the DaisyUI. We will also use the Fontawesome and Heroicon to add different icons.

The following effect is exactly the same as real Instagram

The stories on the profile page will scroll smoothly by adding a custom scroll button, which on top of all the stories, the scroll left button will appear when it starts to scroll. When scrolling to the end, the scroll right button will disappear.

The button list has the effect that when the user clicks on it, it will have a dark line appear in line with the horizontal line.