formsBeginnerfocus

Neobrutalism Input

A text input with thick borders and hard shadow matching the neo 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 text input with Tailwind: thick black border, hard offset shadow, white background, bold monospace-friendly font. On focus the shadow becomes more saturated (e.g. neon pink or lime). Matches a neo button visually.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/neobrutalism/inputs/1.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-neo-input
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="mx-auto max-w-sm p-6 w-full">
<label for="Email">
      <span class="text-sm font-semibold"> Email </span>

      <input
        type="email"
        id="Email"
        class="mt-0.5 w-full border-2 border-black shadow-[4px_4px_0_0] focus:ring-2 focus:ring-yellow-300 sm:text-sm"
      />
    </label>
  </div>
</div>