componentes
/
cards
/
card-6
card-6

Vista previa
Zain Zajid
México
Código

import Image from 'next/image';

const Card6 = () => {
  return (
    <div className="relative px-5 pb-5 bg-background-secondary shadow-2xl w-full max-w-xs rounded-3xl">
      <div
        className="absolute w-1/2 h-full bg-orange-500 -translate-y-20 right-0"
        style={{ clipPath: 'polygon(0 0, 100% 20%, 100% 100%, 0 50%)' }}
      />
      <div className="relative w-full h-96 mx-auto -mt-20">
        <Image
          src="https://res.cloudinary.com/jotredev/image/upload/v1698092582/ElementumUI/hombres/hombre-45354dsfd_w82pg3.webp"
          alt="Image"
          fill
          loading="lazy"
          blurDataURL="https://res.cloudinary.com/jotredev/image/upload/v1698092582/ElementumUI/hombres/hombre-45354dsfd_w82pg3.webp"
          className="object-cover"
        />
      </div>
      <div>
        <h3 className="font-bold text-2xl bg-background p-3 max-w-max pr-8 rounded-xl -mt-5 z-10 relative">
          Zain Zajid
        </h3>
        <h5 className="mb-8 text-muted-foreground mt-2">México</h5>
        <button
          type="button"
          className="py-3 w-full bg-background rounded-xl hover:bg-orange-500 dark:hover:bg-orange-500 transition-colors"
        >
          Follow +
        </button>
      </div>
    </div>
  );
};

export default Card6;
card-6

Vista previa

Zain Zajid

México

Código
