avatar-4

• Vista previa

  

  

  

• Código

  import Image from 'next/image';
  
  const Avatar4 = () => {
    return (
      <div className="flex flex-col lg:flex-row lg:items-center gap-5">
        <div className="relative w-10 h-10 rounded-full">
          <Image
            src="https://res.cloudinary.com/jotredev/image/upload/v1697568580/ElementumUI/mujeres/feliz-mujer-madura-al-aire-libre_tsjdsm.webp"
            alt="Image"
            fill
            loading="lazy"
            blurDataURL="https://res.cloudinary.com/jotredev/image/upload/v1697568580/ElementumUI/mujeres/feliz-mujer-madura-al-aire-libre_tsjdsm.webp"
            className="object-cover rounded-full"
          />
          <span className="absolute bg-green-600 w-2 h-2 top-0 right-0.5 rounded-full ring-2 ring-background" />
        </div>
        <div className="relative w-12 h-12 rounded-full">
          <Image
            src="https://res.cloudinary.com/jotredev/image/upload/v1697568580/ElementumUI/mujeres/feliz-mujer-madura-al-aire-libre_tsjdsm.webp"
            alt="Image"
            fill
            loading="lazy"
            blurDataURL="https://res.cloudinary.com/jotredev/image/upload/v1697568580/ElementumUI/mujeres/feliz-mujer-madura-al-aire-libre_tsjdsm.webp"
            className="object-cover rounded-full"
          />
          <span className="absolute bg-green-600 w-2 h-2 top-0 right-1 rounded-full ring-2 ring-background" />
        </div>
        <div className="relative w-14 h-14 rounded-full">
          <Image
            src="https://res.cloudinary.com/jotredev/image/upload/v1697568580/ElementumUI/mujeres/feliz-mujer-madura-al-aire-libre_tsjdsm.webp"
            alt="Image"
            fill
            loading="lazy"
            blurDataURL="https://res.cloudinary.com/jotredev/image/upload/v1697568580/ElementumUI/mujeres/feliz-mujer-madura-al-aire-libre_tsjdsm.webp"
            className="object-cover rounded-full"
          />
          <span className="absolute bg-green-600 w-3 h-3 top-0 right-0.5 rounded-full ring-2 ring-background" />
        </div>
      </div>
    );
  };
  
  export default Avatar4;