import React from 'react';

export default function Avatar() {
  return (
    <div className="flex -space-x-2 overflow-hidden">
      <img
        className="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-zinc-950"
        src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
        alt=""
      />
      <img
        className="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-zinc-950"
        src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
        alt=""
      />
      <img
        className="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-zinc-950"
        src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"
        alt=""
      />
      <div className="flex h-10 w-10 items-center justify-center rounded-full ring-2 ring-white dark:ring-zinc-950 bg-zinc-100 dark:bg-zinc-800 text-xs font-medium text-zinc-500 dark:text-zinc-400">
        +3
      </div>
    </div>
  );
}