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.4k

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

Your upside-down text

Author:
Isabella Kowalski

3 years ago

13.1k
Customer support chatbox
Floating chatbox

Author:
gmer33

2 years ago

11.6k
Services

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

2k
nft card
nft card

Author:
5upreme505

1 year ago

1.8k
Cafee shop
help to buy something that can help you to relax

Author:
INGRIDE MUZIRANENGE

8 months ago

1.3k
magic card
by salvator

Author:
Baraka Salvator

8 months ago

887
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

Author:
irahoza daniel

8 months ago

624
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

Author:
rohit whyphy

10 months ago

1.3k
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

Author:
KULDEEP

7 months ago

740
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

Author:
MD Mostafa Niloy

2 months ago

101
Button
Button with scale animation on hover and translate-y on active

Author:
Nabile BABABODI ABOUDOU MOUTAROU

3 weeks ago

8
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Author:
Abdul Baset Bappy

10 months ago

968

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components