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

1.3k

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

Customer support chatbox
Floating chatbox

Author:
gmer33

2 years ago

11.6k
Download App Buttons
Ready-to-use Apple App Store and Google Play Store download buttons with official branding and styling

Author:
Musawer Shah

2 months ago

417
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

8 months ago

700
mailer
gmail style

Author:
МОЙДОЫР

1 month ago

165
chat bar
live chat

Author:
gidy

7 months ago

1.2k
Soft-Modern Dark Pricing
A sophisticated, highly rounded pricing component inspired by modern fintech interfaces. It avoids harsh lines in favor of deep "zinc" tones and subtle borders (border-white/5). The center card pops using a high-contrast white button against the dark theme, guiding user focus naturally without using aggressive gradients.

Author:
Hamza Atig

1 week ago

49
nft card
nft card

Author:
5upreme505

1 year ago

1.8k
Sticky fullpage pages / slides

Author:
Laurits

2 years ago

15.4k
Basic Terms of Service Page
Basic Terms of Service Page setup for light and dark mode. Repeat the sections to add as many as you need.

Author:
Monica D.

1 year ago

3.3k
TASK FAILED SUCCESSFULLY
TradingGoose Ep2 MockUp

Author:
Bruz

3 months ago

242
Responsive Light Mode Footer Component
This is a fully responsive and reusable light-mode footer component designed by ABNahid Agency. Built with a clean structure and optimized for modern web applications, this footer features essential sections, including About, Services, Contact, and Social Links. Ideal for personal portfolios, business websites, or startup platforms—plug and play in your React or HTML project.

Author:
Abdul Jabbar Al Nahid

5 months ago

477
Organization Hierarchy list

Author:
Anonymous

2 years ago

8.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components