I have written this code using Tailwind CSS.
I am trying to build something similar to the horizontal container from unsplash.com
Suppose the category array has about 15 strings contained.
<ul className="flex items-center overflow-scroll whitespace-nowrap">
<button onClick={(e) => console.log(e)}>
<Chevron_left className="mr-2 w-3" />
</button>
{categories.map((category, i) => (
<li
key={i}
className="rounded-full border border-gray-300 px-2 hover:bg-slate-100"
>
<button>{category}</button>
</li>
))}
<button>
<Chevron_right className="ml-2 w-3" />
</button>
</ul>