Alerts

Neobrutalism-style alert components built with Tailwind CSS. Featuring thick borders, hard shadows, and bold colors. Perfect for displaying important messages, notifications, and feedback with a retro, high-contrast look.

3/3 Dark Mode Updated: Jul 4, 2026

Info

markmead

<div
  role="alert"
  class="border-2 bg-blue-100 p-4 text-blue-900 shadow-[4px_4px_0_0] shadow-black"
>
  <div class="flex items-start gap-3">
    <svg
      aria-hidden="true"
      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">
      <span class="sr-only">Info: </span>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, eos!
    </strong>
  </div>
</div>

Info (Dark)

markmead

<div
  role="alert"
  class="border-2 bg-blue-100 p-4 text-blue-900 shadow-[4px_4px_0_0] shadow-black dark:bg-blue-800 dark:text-blue-50 dark:shadow-white"
>
  <div class="flex items-start gap-3">
    <svg
      aria-hidden="true"
      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">
      <span class="sr-only">Info: </span>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, eos!
    </strong>
  </div>
</div>

Success

markmead

<div
  role="alert"
  class="border-2 bg-green-100 p-4 text-green-900 shadow-[4px_4px_0_0] shadow-black"
>
  <div class="flex items-start gap-3">
    <svg
      aria-hidden="true"
      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="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z"
        clip-rule="evenodd"
      />
    </svg>

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

Success (Dark)

markmead

<div
  role="alert"
  class="border-2 bg-green-100 p-4 text-green-900 shadow-[4px_4px_0_0] shadow-black dark:bg-green-800 dark:text-green-50 dark:shadow-white"
>
  <div class="flex items-start gap-3">
    <svg
      aria-hidden="true"
      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="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z"
        clip-rule="evenodd"
      />
    </svg>

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

Error

markmead

<div
  role="alert"
  class="border-2 bg-red-100 p-4 text-red-900 shadow-[4px_4px_0_0] shadow-black"
>
  <div class="flex items-start gap-3">
    <svg
      aria-hidden="true"
      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="M6.701 2.25c.577-1 2.02-1 2.598 0l5.196 9a1.5 1.5 0 0 1-1.299 2.25H2.804a1.5 1.5 0 0 1-1.3-2.25l5.197-9ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 1 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
        clip-rule="evenodd"
      />
    </svg>

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

Error (Dark)

markmead

<div
  role="alert"
  class="border-2 bg-red-100 p-4 text-red-900 shadow-[4px_4px_0_0] shadow-black dark:bg-red-800 dark:text-red-50 dark:shadow-white"
>
  <div class="flex items-start gap-3">
    <svg
      aria-hidden="true"
      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="M6.701 2.25c.577-1 2.02-1 2.598 0l5.196 9a1.5 1.5 0 0 1-1.299 2.25H2.804a1.5 1.5 0 0 1-1.3-2.25l5.197-9ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 1 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
        clip-rule="evenodd"
      />
    </svg>

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

View all neobrutalism components