Simple Payment Successfull Notification Page

This tailwind example is contributed by Anonymous, on 22-May-2025. Component is made with Tailwind v3.4. It is responsive.

Other

Author Anonymous

Tailwind v3.4 2.5k 3

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

Notification Center with Filter Tabs
Notification center UI featuring unread indicators, activity filters, user avatars and interactive mark-as-read functionality.

JUGENDRA GANGWAR

1 week ago

12
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

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

KULDEEP

1 year ago

2.5k
cancel form

Anonymous

1 month ago

6
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Abhiraj

1 year ago

2k
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Abhiraj

1 year ago

2.2k
Command Palette with Search & Keyboard Navigation

JUGENDRA GANGWAR

2 months ago

87
Forgot Password Form
1. Color Updates: 1. Changed background to gradient `from-indigo-800 to-blue-900` 2. Updated text colors to match the new theme 3. Changed button colors to `bg-indigo-800` with `hover:bg-blue-900` 4. Updated focus rings to use indigo colors 5. Made footer links white with indigo hover states 2. Enhanced Styling: 1. Added gradient background 2. Improved border radius to `rounded-xl` 3. Enhanced shadow with `shadow-2xl` 4. Added hover scale effects 5. Added fade-in animation 3. Dark Mode Improvements: 1. Enhanced dark mode colors 2. Added system preference detection 3. Improved dark mode contrast 4. Updated dark mode focus rings 4. Added Functionality: 1. Added form validation 2. Added success message 3. Added form reset after submission 4. Added smooth transitions 5. Accessibility Improvements: 1. Maintained ARIA attributes 2. Enhanced focus states 3. Improved color contrast 4. Added transition animations for better UX 6. Added Interactions: 1. Hover effects on all interactive elements 2. Scale animation on card and button hover 3. Smooth color transitions 4. Form validation feedback The form now matches the Indigo-800 and Blue-900 color scheme while maintaining dark mode support and adding enhanced animations and interactions.

nejaa badr

2 years ago

2.4k
Responsive Multi-Step Registration Form with Progress Stepper

JUGENDRA GANGWAR

2 months ago

242
TASK FAILED SUCCESSFULLY
TradingGoose Ep2 MockUp

Bruz

1 year ago

785
Updated customer details page
Customer details page

Olivia Smith

2 years ago

4.3k
Sign up
sign up page

gidy

1 year ago

2.1k