ScrollArea

<ScrollArea className="h-[240px] w-[220px] rounded-md border border-border">
  <div className="p-4">
    <h4 className="mb-3 text-base font-medium">Tags</h4>
    {tags.map((tag) => (
      <div key={tag}>
        <div className="text-base">{tag}</div>
        <Separator className="my-2" />
      </div>
    ))}
  </div>
</ScrollArea>

<ScrollArea className="w-[420px] rounded-md border border-border whitespace-nowrap">
  <div className="flex w-max gap-4 p-4">
    {photos.map((p) => (
      <figure key={p.artist} className="shrink-0">
        <div className="overflow-hidden rounded-md">
          <img src={p.src} alt={`Photo by ${p.artist}`} className="aspect-[3/4] h-[180px] w-[135px] object-cover" />
        </div>
        <figcaption className="pt-2 text-xs text-muted-foreground">
          Photo by <span className="font-medium text-foreground">{p.artist}</span>
        </figcaption>
      </figure>
    ))}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>