Home
Anonymous
Simple Payment Successfull Notification Page

Simple Payment Successfull Notification Page

This tailwind example is contributed by Anonymous, on 22-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Anonymous

706

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment Successful!</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* Optional: Add a subtle animation for the checkmark or card */
        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.95);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
        .animate-fade-in-scale {
            animation: fadeInScale 0.5s ease-out forwards;
        }
    </style>
</head>

<h1 class="text-3xl sm:text-4xl font-bold text-gray-800 mb-4">Payment Successful!</h1>
        
        <p class="text-gray-600 text-lg mb-6">
            Thank you for your purchase. Your order is being processed and you will receive a confirmation email shortly.
        </p>

<div class="bg-gray-50 p-4 rounded-md mb-8">
            <p class="text-gray-700">
                You will be automatically redirected to your dashboard in 
                <span id="countdown-timer" class="font-semibold text-red-600">5</span> seconds.
            </p>
        </div>

<a href="#" id="manual-redirect-link" class="text-red-600 hover:text-red-700 font-medium transition-colors duration-200 underline">
            Go to Dashboard Now
        </a>
    </div>

// Set the href for the manual redirect link
        manualRedirectLink.href = redirectUrl;

const timerId = setInterval(() => {
            countdown--;
            countdownElement.textContent = countdown;

if (countdown <= 0) {
                clearInterval(timerId);
                window.location.href = redirectUrl;
            }
        }, 1000);
    </script>

</body>
</html>

Related Examples

Recipe Card
beautiful recipe component with image and step-by-step instructions

Author:
Anonymous

1 year ago

7k
chart
to chart on your family and

Author:
Nishimwe Jeanine

2 months ago

368
Aurora Spinner
Aurora Spinner using tailwindcss

Author:
Deepak Kumar Chouhan

7 months ago

1.1k
Maintenance page

Author:
Faye

8 months ago

1.2k
Stacked Checkboxes

Author:
kishan pc

1 year ago

2.1k
Gradient Flip-Text Button with Hover Animation
This stylish button features a dynamic gradient background that shifts from a calm green gradient by default to a vibrant purple-pink-red gradient on hover. The button also includes an interactive text flip effect, where the text seamlessly transitions on hover, creating a visually appealing and modern UI element. Perfect for adding flair to your websites or applications while maintaining functionality and responsiveness.

Author:
SHARIFUL ISLAM

6 months ago

737
Typewriter effect in tailwindcss with this simple trick
source: https://dev.to/lazysock/make-a-typewriter-effect-with-tailwindcss-in-5-minutes-dc

Author:
Anonymous

1 year ago

11.1k
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

485
ForK blocks animations
ForK blocks animations

Author:
Yor Rodriguez

6 months ago

1.2k
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

2 years ago

9.1k
Neon container

Author:
Anonymous

1 year ago

3.1k
Lots of button examples
tailwind button examples

Author:
QQ-VVN

3 months ago

226

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components