card-2

• Vista previa

  

  Jorge Trejo@jotredev

  Desarrollador full stack con más de 10 años de experiencia.

  672 Siguiendo59.9K Seguidores

• Componente

  import Image from 'next/image';
  
  const Card2 = () => {
    return (
      <div className="sm:max-w-xl sm:mx-auto rounded-2xl sm:rounded-full flex bg-background border-4 border-indigo-200 flex-col sm:flex-row">
        <div className="py-6 sm:rounded-l-full pr-10 relative rounded-xl mx-auto bg-white dark:bg-[#0A0A0B] w-full sm:w-auto">
          <div className="relative w-32 h-32">
            <Image
              alt="Image"
              fill
              src="https://res.cloudinary.com/jotredev/image/upload/v1697568346/ElementumUI/hombres/onrie-ampliamente-esperando-sorpresa_rcgn7i.webp"
              loading="lazy"
              blurDataURL="https://res.cloudinary.com/jotredev/image/upload/v1697568346/ElementumUI/hombres/onrie-ampliamente-esperando-sorpresa_rcgn7i.webp"
              className="rounded-full object-cover border-indigo-200 border-4 relative left-5 sm:inline-block mx-auto"
            />
          </div>
          <div className="bg-green-600 w-7 h-7 absolute rounded-full right-6 top-6 border-4 border-background" />
        </div>
        <div className="flex flex-col ml-2 p-4">
          <div className="flex justify-between items-center">
            <h4 className="text-lg font-semibold mb-3">
              Jorge Trejo
              <span className="font-medium text-sm ml-2 bg-indigo-200 text-indigo-600 py-1 px-2 rounded-md">
                @jotredev
              </span>
            </h4>
          </div>
          <p className="text-sm text-muted-foreground">Desarrollador full stack con más de 10 años de experiencia.</p>
          <div className="mt-2 font-medium">
            <span>672</span> Siguiendo
            <span className="ml-7">59.9K</span> Seguidores
          </div>
        </div>
      </div>
    );
  };
  
  export default Card2;