card-7

• Vista previa

  

  Clyde Stanley

  09 septiembre 1992

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales urna justo, ac ultrices magna consectetur id.

  Donec tempor ligula sit amet nunc porta, sed aliquam leo sagittis. Ut auctor congue efficitur. Praesent aliquam pulvinar neque, placerat semper massa elementum et.

  LikesCommentShare

  

• Código

  import Image from 'next/image';
  
  const Card7 = () => {
    return (
      <div className="bg-background w-full max-w-xl border-2 border-gray-500/30 p-5 relative">
        <div className="flex items-center gap-4 mb-5">
          <div className="relative w-14 h-14 rounded-full">
            <Image
              src="https://res.cloudinary.com/jotredev/image/upload/v1699334270/ElementumUI/hombres/rque-mirando-sol-181624-12059-normal_ssyfjl.webp"
              alt="Image"
              fill
              className="object-cover rounded-full"
              loading="lazy"
            />
          </div>
          <div>
            <h3 className="font-bold">Clyde Stanley</h3>
            <h5 className="text-muted-foreground">09 septiembre 1992</h5>
          </div>
        </div>
        <div className="space-y-5 mb-5">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales urna justo, ac ultrices magna
            consectetur id.
          </p>
          <p>
            Donec tempor ligula sit amet nunc porta, sed aliquam leo sagittis. Ut auctor congue efficitur. Praesent
            aliquam pulvinar neque, placerat semper massa elementum et.
          </p>
        </div>
        <div className="border-y border-border flex flex-wrap items-center justify-between">
          <button type="button" className="py-3 px-5 flex items-center gap-3">
            <i className="fi fi-rr-heart"></i>
            Likes
          </button>
          <button type="button" className="py-3 px-5 flex items-center gap-3">
            <i className="fi fi-rr-comment-alt"></i>
            Comment
          </button>
          <button type="button" className="py-3 px-5 flex items-center gap-3">
            <i className="fi fi-rr-share"></i>
            Share
          </button>
        </div>
        <div className="mt-5 flex items-center gap-4">
          <div className="relative w-10 h-10 rounded-full">
            <Image
              src="https://res.cloudinary.com/jotredev/image/upload/v1699335943/ElementumUI/hombres/a-sobre-fondo-gris-613910-701-medium_cuqmf7.webp"
              alt="Image"
              fill
              className="object-cover rounded-full"
              loading="lazy"
            />
          </div>
          <form className="flex-1">
            <div>
              <input
                type="text"
                className="w-full bg-background-secondary py-2 px-4 rounded-full outline-none focus:ring-4 focus:ring-border transition-all"
                placeholder="Write a comment..."
              />
            </div>
          </form>
        </div>
        <div className="absolute w-4 h-4 -left-px -top-px bg-transparent border-l-2 border-t-2 border-black dark:border-white before:absolute before:w-2 before:h-1 before:bg-background before:-left-1 before:top-4 after:absolute after:w-1 after:h-2 after:bg-background after:left-4 after:-top-1" />
        <div className="absolute w-4 h-4 -right-px -top-px bg-transparent border-r-2 border-t-2 border-black dark:border-white before:absolute before:w-2 before:h-1 before:bg-background before:-right-1 before:top-4 after:absolute after:w-1 after:h-2 after:bg-background after:right-4 after:-top-1" />
        <div className="absolute w-4 h-4 -left-px -bottom-px bg-transparent border-l-2 border-b-2 border-black dark:border-white before:absolute before:w-2 before:h-1 before:bg-background before:-left-1 before:bottom-4 after:absolute after:w-1 after:h-2 after:bg-background after:left-4 after:-bottom-1" />
        <div className="absolute w-4 h-4 -right-px -bottom-px bg-transparent border-r-2 border-b-2 border-black dark:border-white before:absolute before:w-2 before:h-1 before:bg-background before:-right-1 before:bottom-4 after:absolute after:w-1 after:h-2 after:bg-background after:right-4 after:-bottom-1" />
      </div>
    );
  };
  
  export default Card7;