Rounded Avatars With Top Notification

export default function Example() {
  return (
    <>
      <span className="relative inline-block">
        <img
          alt=""
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
          className="size-6 rounded-md outline -outline-offset-1 outline-black/5 dark:outline-white/10"
        />
        <span className="absolute top-0 right-0 block size-1.5 translate-x-1/2 -translate-y-1/2 transform rounded-full bg-gray-300 ring-2 ring-white dark:bg-gray-500 dark:ring-gray-900" />
      </span>

      <span className="relative inline-block">
        <img
          alt=""
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
          className="size-8 rounded-md outline -outline-offset-1 outline-black/5 dark:outline-white/10"
        />
        <span className="absolute top-0 right-0 block size-2 translate-x-1/2 -translate-y-1/2 transform rounded-full bg-red-400 ring-2 ring-white dark:bg-red-500 dark:ring-gray-900" />
      </span>

      <span className="relative inline-block">
        <img
          alt=""
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
          className="size-10 rounded-md outline -outline-offset-1 outline-black/5 dark:outline-white/10"
        />
        <span className="absolute top-0 right-0 block size-2.5 translate-x-1/2 -translate-y-1/2 transform rounded-full bg-green-400 ring-2 ring-white dark:bg-green-500 dark:ring-gray-900" />
      </span>

      <span className="relative inline-block">
        <img
          alt=""
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
          className="size-12 rounded-md outline -outline-offset-1 outline-black/5 dark:outline-white/10"
        />
        <span className="absolute top-0 right-0 block size-3 translate-x-1/2 -translate-y-1/2 transform rounded-full bg-gray-300 ring-2 ring-white dark:bg-gray-500 dark:ring-gray-900" />
      </span>

      <span className="relative inline-block">
        <img
          alt=""
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
          className="size-14 rounded-md outline -outline-offset-1 outline-black/5 dark:outline-white/10"
        />
        <span className="absolute top-0 right-0 block size-3.5 translate-x-1/2 -translate-y-1/2 transform rounded-full bg-red-400 ring-2 ring-white dark:bg-red-500 dark:ring-gray-900" />
      </span>

      <span className="relative inline-block">
        <img
          alt=""
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
          className="size-16 rounded-md outline -outline-offset-1 outline-black/5 dark:outline-white/10"
        />
        <span className="absolute top-0 right-0 block size-4 translate-x-1/2 -translate-y-1/2 transform rounded-full bg-green-400 ring-2 ring-white dark:bg-green-500 dark:ring-gray-900" />
      </span>
    </>
  )
}