Neobrutalism Cards Base dashed

<div class="group/card relative">
      <span class="absolute inset-0 border-2 border-dashed bg-white"></span>

      <a
        href="#"
        class="group/link relative flex h-72 flex-col justify-end border-2 border-black bg-white p-4 group-hover/card:-translate-2 after:absolute hover:bg-yellow-100 focus:ring-2 focus:ring-yellow-300 focus:outline-0 sm:p-6"
      >
        <span class="inline-flex items-center gap-1.5">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="size-4"
          >
            <path
              fill-rule="evenodd"
              d="M4 1.75a.75.75 0 0 1 1.5 0V3h5V1.75a.75.75 0 0 1 1.5 0V3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2V1.75ZM4.5 6a1 1 0 0 0-1 1v4.5a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-7Z"
              clip-rule="evenodd"
            />
          </svg>

          <time datetime="2025-04-01" class="text-xs/none font-semibold uppercase">
            April 1, 2025
          </time>
        </span>

        <h3 class="mt-1 text-xl font-semibold">
          How I built my first website with Nuxt, Tailwind CSS and Vercel
        </h3>

        <p class="mt-2 line-clamp-2 hidden text-pretty group-hover/link:block">
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. At velit illum provident a, ipsa
          maiores deleniti consectetur nobis et eaque.
        </p>
      </a>
    </div>