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

1.1k

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

Checkbox models
Tailwind Checkbox models

Author:
QQ-VVN

5 months ago

734
To-Do List with Tailwind CSS
A simple and responsive to-do list built with HTML, JavaScript, and Tailwind CSS. Features task addition, completion, and deletion. Perfect for beginner projects or component demos.

Author:
Sudip chaudhary

4 months ago

561
AutoTrade
Browse thousands of quality used cars from trusted sellers. Great prices and easy financing options available

Author:
INGRIDE MUZIRANENGE

5 months ago

349
hello world
by salvator

Author:
Anonymous

5 months ago

448
Popover
basic popover example

Author:
Dipti narayan

2 years ago

12.8k
Invoice template

Author:
Shakti

2 years ago

27.5k
invoice 02
product invoice

Author:
Tanvir Hasan Bappy (Tanvir)

6 months ago

481
Play, Pause and Stop buttons

Author:
Lukas Müller

2 years ago

11.2k
Custom Audio Player
🎧 Custom Audio Player (HTML, Tailwind CSS & Alpine.js) A modern, responsive custom audio player built with Tailwind CSS and Alpine.js, designed for a smooth user experience and elegant visuals in both light and dark mode. ✨ Features: 🎵 Play, pause, and mute/unmute controls 📈 Interactive progress bar with seek functionality 🔊 Dynamic volume slider with live preview 🖼️ Album art and track details display ⌨️ Keyboard support — toggle play/pause with the spacebar 🌓 Fully responsive and dark-mode compatible This player uses minimal JavaScript, relying on Alpine.js for reactivity, and can be easily customized or integrated into any web project. Perfect for portfolios, podcasts, or music web apps.

Author:
wavy kits

3 weeks ago

165
Contact us Form with Responsive

Author:
KULDEEP

3 months ago

354
Radial Progress Indicator with TailwindCSS
A sleek and customizable radial progress indicator built with SVG and styled using TailwindCSS. The progress bar is animated with smooth transitions, featuring a circular background, dynamic progress, and centered text or optional imagery. Perfect for showcasing percentages, stats, or any progress-related metrics in your projects.

Author:
SHARIFUL ISLAM

8 months ago

1.7k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

8 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components