card-3

• Vista previa

  19 sep, 2022Diseño web

  Herramientas de accesibilidad para diseñadores y desarrolladores

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac aliquam ligula. Sed et massa pulvinar, interdum leo id, maximus lorem. Donec aliquet auctor turpis ut aliquet. Donec accumsan eu ipsum a vehicula.

  Leer más

  

  Yared Jacquez Trillo

• Código

  import Image from 'next/image';
  import Link from 'next/link';
  
  const Card3 = () => {
    return (
      <div className="bg-background-secondary max-w-2xl mx-auto py-4 px-6 rounded-lg shadow-xl">
        <div className="flex items-center justify-between mb-4">
          <time className="text-sm text-muted-foreground">19 sep, 2022</time>
          <span className="bg-indigo-500/10 text-indigo-500 font-semibold py-2 px-4 text-xs rounded uppercase">
            Diseño web
          </span>
        </div>
        <div className="flex flex-col gap-2 mb-4">
          <Link href="/" className="text-2xl font-bold hover:underline">
            Herramientas de accesibilidad para diseñadores y desarrolladores
          </Link>
          <p className="text-muted-foreground">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac aliquam ligula. Sed et massa pulvinar,
            interdum leo id, maximus lorem. Donec aliquet auctor turpis ut aliquet. Donec accumsan eu ipsum a vehicula.
          </p>
        </div>
        <div className="flex items-center justify-between">
          <Link href="/" className="text-indigo-500 hover:underline transition-colors">
            Leer más
          </Link>
          <div className="flex items-center gap-4">
            <div className="relative w-6 h-6">
              <Image
                src="https://res.cloudinary.com/jotredev/image/upload/v1697569627/ElementumUI/mujeres/mujer-hermosa-joven-inconformista_lzcxlm.webp"
                fill
                blurDataURL="https://res.cloudinary.com/jotredev/image/upload/v1697569627/ElementumUI/mujeres/mujer-hermosa-joven-inconformista_lzcxlm.webp"
                loading="lazy"
                className="rounded-full object-cover"
                alt="Yared Jacquez Trillo"
              />
            </div>
            <div>
              <p className="dark:text-white">Yared Jacquez Trillo</p>
            </div>
          </div>
        </div>
      </div>
    );
  };
  
  export default Card3;