Home
Anonymous
Payment success page example

Payment success page example

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

Other

Author Anonymous

190

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Payment Successful</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }
        @keyframes bounce-in {
            0% { transform: scale(0) rotate(-180deg); opacity: 0; }
            50% { transform: scale(1.2) rotate(-90deg); opacity: 0.8; }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }
        @keyframes slide-up {
            0% { transform: translateY(50px); opacity: 0; }
            100% { transform: translateY(0); opacity: 1; }
        }
        @keyframes confetti {
            0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
            100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
        }
        .float { animation: float 6s ease-in-out infinite; }
        .bounce-in { animation: bounce-in 0.8s ease-out; }
        .slide-up { animation: slide-up 0.6s ease-out; }
        .confetti { animation: confetti 3s linear infinite; }
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .glass {
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }
    </style>
</head>
<body class="gradient-bg min-h-screen overflow-hidden relative">
    
    <div class="absolute inset-0 pointer-events-none">
        <div class="confetti absolute top-0 left-1/4 w-2 h-2 bg-yellow-400 rounded" style="animation-delay: 0s;"></div>
        <div class="confetti absolute top-0 left-1/3 w-2 h-2 bg-pink-400 rounded" style="animation-delay: 0.5s;"></div>
        <div class="confetti absolute top-0 left-1/2 w-2 h-2 bg-blue-400 rounded" style="animation-delay: 1s;"></div>
        <div class="confetti absolute top-0 left-2/3 w-2 h-2 bg-green-400 rounded" style="animation-delay: 1.5s;"></div>
        <div class="confetti absolute top-0 left-3/4 w-2 h-2 bg-purple-400 rounded" style="animation-delay: 2s;"></div>
        <div class="confetti absolute top-0 left-1/5 w-3 h-3 bg-red-400 rounded" style="animation-delay: 0.3s;"></div>
        <div class="confetti absolute top-0 left-4/5 w-3 h-3 bg-indigo-400 rounded" style="animation-delay: 1.8s;"></div>
    </div>

<div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="float absolute top-20 left-10 w-20 h-20 bg-white bg-opacity-10 rounded-full"></div>
        <div class="float absolute top-40 right-20 w-16 h-16 bg-white bg-opacity-5 rounded-full" style="animation-delay: -2s;"></div>
        <div class="float absolute bottom-32 left-1/4 w-12 h-12 bg-white bg-opacity-15 rounded-full" style="animation-delay: -4s;"></div>
        <div class="float absolute top-1/3 right-1/3 w-8 h-8 bg-white bg-opacity-20 rounded-full" style="animation-delay: -1s;"></div>
    </div>

<div class="slide-up mb-8" style="animation-delay: 0.2s;">
                <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">Success!</h1>
                <p class="text-xl text-white text-opacity-90 mb-2">Payment Completed</p>
                <p class="text-white text-opacity-70">Your transaction has been processed successfully</p>
            </div>

<div class="slide-up glass bg-white bg-opacity-10 rounded-2xl p-6 mb-8 border border-white border-opacity-10" style="animation-delay: 0.4s;">
                <div class="flex justify-between items-center mb-4">
                    <span class="text-white text-opacity-70">Amount</span>
                    <span class="text-2xl font-bold text-white">$129.99</span>
                </div>
                <div class="flex justify-between items-center mb-4">
                    <span class="text-white text-opacity-70">Transaction ID</span>
                    <span class="text-white font-mono text-sm">#TXN-2024-001</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-white text-opacity-70">Date</span>
                    <span class="text-white">May 23, 2025</span>
                </div>
            </div>

<div class="slide-up space-y-4" style="animation-delay: 0.6s;">
                <button class="w-full bg-white text-purple-600 font-semibold py-4 px-6 rounded-2xl hover:bg-opacity-90 transition-all duration-300 transform hover:scale-105 shadow-lg">
                    Download Receipt
                </button>
                <button class="w-full bg-transparent border-2 border-white border-opacity-30 text-white font-semibold py-4 px-6 rounded-2xl hover:bg-white hover:bg-opacity-10 transition-all duration-300 transform hover:scale-105">
                    Continue Shopping
                </button>
            </div>

<div class="slide-up mt-8 text-white text-opacity-60 text-sm" style="animation-delay: 0.8s;">
                <p>Thank you for your purchase!</p>
                <p>A confirmation email has been sent to your inbox.</p>
            </div>
        </div>
    </div>

// Create sparkles periodically
            setInterval(createSparkle, 300);

// Add click effect to buttons
            const buttons = document.querySelectorAll('button');
            buttons.forEach(button => {
                button.addEventListener('click', function(e) {
                    const ripple = document.createElement('span');
                    const rect = this.getBoundingClientRect();
                    const size = Math.max(rect.width, rect.height);
                    const x = e.clientX - rect.left - size / 2;
                    const y = e.clientY - rect.top - size / 2;
                    
                    ripple.style.width = ripple.style.height = size + 'px';
                    ripple.style.left = x + 'px';
                    ripple.style.top = y + 'px';
                    ripple.classList.add('absolute', 'bg-white', 'bg-opacity-30', 'rounded-full', 'transform', 'scale-0', 'animate-ping');
                    
                    this.appendChild(ripple);
                    
                    setTimeout(() => {
                        ripple.remove();
                    }, 600);
                });
            });
        });
    </script>
</body>
</html>

Related Examples

Rwanda-Canada Transport Services | Safe & Reliable Shipping
Attractive color scheme inspired by Rwanda's landscapes

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 weeks ago

88
Checkbox
Checkbox

Author:
Aman kumar

1 year ago

1.3k
Maintenance page template
The site is under maintenance placeholder page

Author:
Anonymous

1 year ago

8.8k
Responsive layout with header, main body, aside (sidebar) and footer

Author:
Ahmed Malik

2 years ago

11.5k
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Author:
Code Master(Mfuranziza Dusabe Hamza)

1 month ago

230
image

Author:
pablitodgb

2 weeks ago

27
Your upside-down text

Author:
Isabella Kowalski

2 years ago

12.5k
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

1 month ago

114
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Author:
Abhiraj

6 months ago

1.4k
delivery
It will help us get our stuff delivered to your home in a way that your ordered items are delivered to your home.

Author:
Nishimwe Jeanine

1 month ago

200
Life Tree
by salvator

Author:
Baraka Salvator

1 month ago

194
Age verification 18+

Author:
Maxim

6 months ago

532

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components