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

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

image

Author:
pablitodgb

7 months ago

455
Team Members

Author:
Abdul Baset Bappy

7 months ago

961
admin panel

Author:
Anonymous

1 year ago

2.6k
cards
cards with background animation

Author:
Anonymous

1 year ago

3.1k
Order History
Order History

Author:
Tanvir Hasan Bappy (Tanvir)

10 months ago

1.1k
Track Your Order
Track Your Order

Author:
Tanvir Hasan Bappy (Tanvir)

10 months ago

436
Infinity Premium Dashboard Tailwind
Website Dashboard Admin with tailwind CSS CDN, responsif via mobile and tablet

Author:
Alif Bima Pradana

5 days ago

29
default template

Author:
Anonymous

8 months ago

450
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

1 year ago

2.1k
Coffee & Tea
Coffee: A brewed drink prepared from roasted seeds, called coffee beans, of the coffee plant. Tea: An agricultural product of the leaves, leaf buds, and internodes of various cultivars and sub-varieties of the Camellia sinensis plant, processed and cured using various methods.

Author:
Augustin

8 months ago

997
Periodic Table with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

2.7k
Pixel Blast
Pixel Blast

Author:
Raul antonio de la cruz hernandez

4 months ago

778

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components