alertsBeginneranimation

Notification Toast

A success-style toast notification with icon, message, and close button.

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 toast notification with Tailwind: a small horizontal card with a colored leading icon (success: green check), a message, and an X close button. Use shadow-lg, rounded corners, and a subtle border. Position fixed bottom-right with a slide-in animation suitable for a notification stack.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/toasts/1.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-app-toast
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="ml-auto max-w-md p-6 w-full">
<div role="alert" class="rounded-md border border-green-500 bg-green-50 p-4 shadow-sm">
      <div class="flex items-start gap-4">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="-mt-0.5 size-6 text-green-700"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>

        <div class="flex-1">
          <strong class="block leading-tight font-medium text-green-800"> Success </strong>

          <p class="mt-0.5 text-sm text-green-700">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus, dignissimos.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>