It's a combination of total number of items, z-index (to display behind the arrow), which item number (nth-child) is displaying and adding a linear gradient.

Here's an example I found google-ing:

https://codepen.io/amwmedia/pen/pgVZZv

I guess you can also inspect the code of your own example for inspiration.

You probably need to add flex to achieve a horizontal list. 

Good luck!

Hi @Faizan Ul Haq,

You can add the container inside that you can add the items that you want. Now, add the class display: flex in that main container. For Example:

Hope this helps!

Regards,

Deepika

I would also solve this by using Flexbox (as I do most of my complex UX issues). I do not have the solution right now but do you know the Froggy game to learn Flexbox? It is really cool and could help you achieve these kind of visualizations.