Rounded Avatars With Bottom 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 right-0 bottom-0 block translate-x-1/2 translate-y-1/2 transform rounded-full border-2 border-white dark:border-gray-900">
          <span className="block size-1.5 rounded-full bg-gray-300 dark:bg-gray-500" />
        </span>
      </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 right-0 bottom-0 block translate-x-1/2 translate-y-1/2 transform rounded-full border-2 border-white dark:border-gray-900">
          <span className="block size-2 rounded-full bg-red-400 dark:bg-red-500" />
        </span>
      </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 right-0 bottom-0 block translate-x-1/2 translate-y-1/2 transform rounded-full border-2 border-white dark:border-gray-900">
          <span className="block size-2.5 rounded-full bg-gray-300 dark:bg-gray-500" />
        </span>
      </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 right-0 bottom-0 block translate-x-1/2 translate-y-1/2 transform rounded-full border-2 border-white dark:border-gray-900">
          <span className="block size-3 rounded-full bg-green-400 dark:bg-green-500" />
        </span>
      </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 right-0 bottom-0 block translate-x-1/2 translate-y-1/2 transform rounded-full border-2 border-white dark:border-gray-900">
          <span className="block size-3.5 rounded-full bg-gray-300 dark:bg-gray-500" />
        </span>
      </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 right-0 bottom-0 block translate-x-1/2 translate-y-1/2 transform rounded-full border-2 border-white dark:border-gray-900">
          <span className="block size-4 rounded-full bg-gray-300 dark:bg-gray-500" />
        </span>
      </span>
    </>
  )
}