cardsBeginnerhover

Neobrutalism Card

A card with thick borders and offset hard shadow in the neobrutalism style.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a neobrutalism card with Tailwind: thick 3px black border, sharp solid black 6px box-shadow offset to the bottom-right, bold solid background color (yellow, lime, or pink), and chunky display-style typography inside. Hover translates the card by its shadow offset for a press effect.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/neobrutalism/cards/1.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-neo-card
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="mx-auto max-w-md p-6 w-full">
<a
      href="#"
      class="block border-2 border-black bg-white p-4 shadow-[4px_4px_0_0] 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 text-pretty">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. At velit illum provident a, ipsa
        maiores deleniti consectetur nobis et eaque.
      </p>
    </a>
  </div>
</div>