badgesBeginner

Neobrutalism Badge

Bold-bordered badge with hard-shadow accents.

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 neobrutalism badges with Tailwind: chunky pill or rectangular tags with thick 2px black borders, solid bright background colors (lime, pink, sky), and a small offset hard shadow. Useful for status tags or labels with the same visual language as neo buttons.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/neobrutalism/badges/1.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-neo-badge
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="flex flex-wrap justify-center gap-4 p-6 w-full">
<span
      class="border-2 border-black bg-blue-100 px-3 py-1.5 text-sm/none font-semibold shadow-[2px_2px_0_0]"
    >
      Info
    </span>

    <span
      class="border-2 border-black bg-green-100 px-3 py-1.5 text-sm/none font-semibold shadow-[2px_2px_0_0]"
    >
      Success
    </span>

    <span
      class="border-2 border-black bg-red-100 px-3 py-1.5 text-sm/none font-semibold shadow-[2px_2px_0_0]"
    >
      Error
    </span>
  </div>
</div>