Notification

Pop up card when form submitted is successful

This tailwind example is contributed by Olajide Olamide (Laemmy), on 13-Apr-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are caution,Toast, Snackbar

Card Alert Notification

Author Olajide Olamide (Laemmy)

Tailwind v3.4 774 1

Fork Fullscreen

<div class="max-w-xl border mt-5 mx-auto shadow-lg rounded-lg">
              <div
              class="flex flex-col items-center py-12 gap-4 text-center px-6"
            >
              <div
                class="w-16 h-16 rounded-full bg-emerald-500 flex items-center justify-center shadow-[0_8px_24px_rgba(16,185,129,0.2)]"
              >
             <span class=" text-white"> ✓ </span>
              </div>
              <div>
                <p class="font-black text-blue text-base">Password Updated!</p>
                <p class="text-[13px] text-text mt-1 max-w-xs">
                  Your password has been changed successfully.
                </p>
              </div>
              <button class="inline-flex items-center justify-center w-40 px-5 py-3.5 rounded-2xl text-xs md:text-sm font-medium uppercase tracking-widest text-white  cursor-pointer transition-all duration-300 ease-in-out border-0 outline-none bg-gradient-to-r from-[#3d7ebb] via-[#1e3a78] to-[#1e3a78] hover:bg-gradient-to-r hover:from-[#183062] hover:via-[#3d7ebb] hover:to-[#1e3a78] w-full px-6" >
                Done
              </button>
            </div>
            </div>

Related Examples

Notification Alert Section
Notification card with close button

Prashant

3 years ago

13.8k
Floating dismissible notification
bottom right floating alert

Prashant

4 years ago

14.4k
Tailwind CSS Alert

Krishna Gudpalle

3 years ago

11.8k
Confirmation model

Mr Robot

4 years ago

13.6k
Beautiful Info card
Info card with info type section on the corner.

TailwindFlex

4 years ago

10.9k
Notification alert section
Show info, success, or error messages

Arya

4 years ago

11.5k
Confirmation modal/card

Sophia Baker

3 years ago

16.5k
Dismissible alert bar

Simon Scheffer

3 years ago

10.5k
Closable toast message
show notification toast message at the bottom right corner

Prajwal Hallale

3 years ago

8.1k
Toast
mensajes de alerta a los visitantes de su sitio web.

Code huit

3 years ago

16.6k
Otp-code template
This is an OTP code template that contains the one-time password, which can be sent to the user's email either when they are signing up for the first time or for multi-factor authentication (MFA) during the login process.

anandu ap

1 year ago

3.8k
Succes Warning Error Toast Designs.
Succes Warning Error Toast Designs.

Sedat Kumcu

1 year ago

2.6k