alertsBeginner

Neobrutalism Alert

An alert with thick borders and 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 alert with Tailwind: rectangular box with thick 3px black border, hard offset shadow, solid bright background, an icon (warning/info/success) on the left, and a heading + body to the right. Optional dismiss X on the right edge.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/neobrutalism/alerts/1.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-neo-alert
-->
<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">
<div role="alert" class="border-2 bg-blue-100 p-4 text-blue-900 shadow-[4px_4px_0_0]">
      <div class="flex items-start gap-3">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="mt-0.5 size-4"
        >
          <path
            fill-rule="evenodd"
            d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0ZM9 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM6.75 8a.75.75 0 0 0 0 1.5h.75v1.75a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8.25 8h-1.5Z"
            clip-rule="evenodd"
          />
        </svg>

        <strong class="block flex-1 leading-tight font-semibold">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, eos!
        </strong>
      </div>
    </div>
  </div>
</div>