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

143

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

Team Members

Author:
Abdul Baset Bappy

3 days ago

10
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Author:
Abdul Baset Bappy

2 months ago

306
Forgot password?
you can change password an time

Author:
gidy

3 weeks ago

150
Upvote downvote buttons

Author:
Lucas Martinez

2 years ago

11.2k
Hacker terminal #fake
hacker terminal tailwind css

Author:
QQ-VVN

1 month ago

261
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)

4 weeks ago

129
Invoice
Invoice

Author:
Ameth Galarcio

11 months ago

2k
free tailwind resume template
free tailwind resume template

Author:
Geoffrey Callaghan

1 year ago

3.3k
Table CRUD
CRUD TABLE DESIGN

Author:
Abhiraj

3 months ago

1.6k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Author:
Ameth Galarcio

4 months ago

1.2k
BONIMATOR Responsive Tailwind Starter Template
Responsive Tailwind Starter Template

Author:
Bonimater

1 week ago

95
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

2 days ago

35

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components