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

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

Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

8 months ago

1.1k
Verify OTP
verification code

Author:
gidy

9 months ago

633
Tailwind Google Map widget

Author:
Dung Vuong

8 months ago

533
Organization Hierarchy list

Author:
Anonymous

2 years ago

9k
🔥 Sleek & Modern Button with Hover Effect – Tailwind CSS
A beautifully designed button using Tailwind CSS, featuring smooth transitions, a bold shadow effect, and a hover animation. Styled with custom colors, rounded edges, and a modern font, this button is perfect for call-to-action (CTA) elements in your website or app. 🚀

Author:
Ahita Bisma Adlula

1 year ago

862
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

11 months ago

1.9k
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

3 years ago

9.6k
Play, Pause and Stop buttons

Author:
Lukas Müller

3 years ago

11.4k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

10 months ago

1.6k
htmlcss1

Author:
Anonymous

8 months ago

345
Todo List with Dark theme
Todo List with Dark theme

Author:
Muzammil Riaz

9 months ago

1.2k
3d element

Author:
Omer fils ELENGA

3 months ago

194

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components