Cards

Neobrutalism-style card components built with Tailwind CSS. Featuring thick borders, hard shadows, and distinct layouts. Great for displaying content, products, and features with a unique, high-contrast retro style.

4/4 Dark Mode Updated: Jul 4, 2026

Base

markmead

<a
  href="#"
  class="block border-2 border-black bg-white p-4 text-black shadow-[4px_4px_0_0] shadow-black hover:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0 sm:p-6"
>
  <span class="inline-flex items-center gap-1.5">
    <svg
      aria-hidden="true"
      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 text-pretty">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. At velit illum provident a, ipsa
    maiores deleniti consectetur nobis et eaque.
  </p>
</a>

Base (Dark)

markmead

<a
  href="#"
  class="block border-2 border-black bg-white p-4 text-black shadow-[4px_4px_0_0] shadow-black hover:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0 sm:p-6 dark:border-white dark:bg-gray-900 dark:text-white dark:shadow-white dark:hover:bg-yellow-700 dark:focus:ring-yellow-600"
>
  <span class="inline-flex items-center gap-1.5">
    <svg
      aria-hidden="true"
      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 text-pretty">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. At velit illum provident a, ipsa
    maiores deleniti consectetur nobis et eaque.
  </p>
</a>

Base stacked

markmead

<a
  href="#"
  class="block border-2 border-black bg-white p-4 text-black shadow-[4px_4px_0_0,8px_8px_0_0,12px_12px_0_0] shadow-black hover:translate-3 hover:bg-yellow-200 hover:shadow-none focus:ring-2 focus:ring-yellow-300 focus:outline-0 sm:p-6"
>
  <span class="inline-flex items-center gap-1.5">
    <svg
      aria-hidden="true"
      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 text-pretty">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. At velit illum provident a, ipsa
    maiores deleniti consectetur nobis et eaque.
  </p>
</a>

Base stacked (Dark)

markmead

<a
  href="#"
  class="block border-2 border-black bg-white p-4 text-black shadow-[4px_4px_0_0,8px_8px_0_0,12px_12px_0_0] shadow-black hover:translate-3 hover:bg-yellow-200 hover:shadow-none focus:ring-2 focus:ring-yellow-300 focus:outline-0 sm:p-6 dark:border-white dark:bg-gray-900 dark:text-white dark:shadow-white dark:hover:bg-yellow-700 dark:focus:ring-yellow-600"
>
  <span class="inline-flex items-center gap-1.5">
    <svg
      aria-hidden="true"
      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 text-pretty">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. At velit illum provident a, ipsa
    maiores deleniti consectetur nobis et eaque.
  </p>
</a>

Base dashed

markmead

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

  <a
    href="#"
    class="group/link relative flex h-72 flex-col justify-end border-2 border-black bg-white p-4 text-black group-hover/card:-translate-2 after:absolute hover:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0 sm:p-6"
  >
    <span class="inline-flex items-center gap-1.5">
      <svg
        aria-hidden="true"
        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>

Base dashed (Dark)

markmead

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

  <a
    href="#"
    class="group/link relative flex h-72 flex-col justify-end border-2 border-black bg-white p-4 text-black group-hover/card:-translate-2 after:absolute hover:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0 sm:p-6 dark:border-white dark:bg-gray-900 dark:text-white dark:hover:bg-yellow-700 dark:focus:ring-yellow-600"
  >
    <span class="inline-flex items-center gap-1.5">
      <svg
        aria-hidden="true"
        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>

Retro window

markmead

<article
  class="border-2 border-black bg-white text-black shadow-[4px_4px_0_0,8px_8px_0_0] shadow-black"
>
  <div class="bg-yellow-200 p-3">
    <div class="flex items-center justify-between">
      <strong class="text-xs/none font-bold uppercase">System Message</strong>

      <div class="flex gap-1">
        <div class="size-3 border-2 border-black bg-white"></div>
        <div class="size-3 border-2 border-black bg-white"></div>
      </div>
    </div>
  </div>

  <div class="border-t-2 border-black p-4 sm:p-6">
    <h3 class="text-lg font-semibold">Retro Window</h3>

    <p class="mt-2 text-sm text-pretty">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam nihil, sit quod quos
      quibusdam quam ducimus dolore necessitatibus delectus perspiciatis.
    </p>
  </div>
</article>

Retro window (Dark)

markmead

<article
  class="border-2 border-black bg-white text-black shadow-[4px_4px_0_0,8px_8px_0_0] shadow-black dark:border-white dark:bg-gray-900 dark:text-white dark:shadow-white"
>
  <div class="bg-yellow-200 p-3 dark:bg-yellow-700">
    <div class="flex items-center justify-between">
      <strong class="text-xs/none font-bold uppercase">System Message</strong>

      <div class="flex gap-1">
        <div
          class="size-3 border-2 border-black bg-white dark:border-white dark:bg-gray-900"
        ></div>
        <div
          class="size-3 border-2 border-black bg-white dark:border-white dark:bg-gray-900"
        ></div>
      </div>
    </div>
  </div>

  <div class="border-t-2 border-black p-4 sm:p-6 dark:border-white">
    <h3 class="text-lg font-semibold">Retro Window</h3>

    <p class="mt-2 text-sm text-pretty">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam nihil, sit quod quos
      quibusdam quam ducimus dolore necessitatibus delectus perspiciatis.
    </p>
  </div>
</article>

View all neobrutalism components