Home
EliteAI Tools
Payment Successful Page template with dark mode support

Payment Successful Page template with dark mode support

This tailwind example is contributed by EliteAI Tools, on 20-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

eCommerce

Author EliteAI Tools

2.5k

Fork Fullscreen

<div class="flex items-center justify-center min-h-screen bg-gradient-to-r from-indigo-50 to-blue-50 dark:from-gray-900 dark:to-gray-800">
    <div class="w-full max-w-2xl p-4 bg-white shadow-2xl dark:bg-gray-900 sm:p-10 sm:rounded-3xl">
        <div class="text-center">
            <div class="flex items-center justify-center w-20 h-20 mx-auto mb-6 bg-green-100 rounded-full dark:bg-green-700">
                <svg class="h-12 w-12 text-green-600 dark:text-green-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path>
                </svg>
            </div>
            <h1 class="text-4xl font-extrabold text-green-700 dark:text-green-400">Payment Successful!</h1>
            <p class="mt-4 text-lg text-gray-800 dark:text-gray-300">
                Thank you for your purchase.
            </p>
            <p class="mt-6 text-xl text-blue-600 dark:text-blue-400">
                Your tool <span class="font-bold text-indigo-700 dark:text-indigo-400">http://example.org/</span> will be listed
                shortly.
            </p>
            <p class="mt-4 text-sm text-gray-700 dark:text-gray-400">
                If you have any questions or need further assistance, feel free to contact us at:
                <a href="mailto:admin@eliteai.tools" class="font-medium text-indigo-600 dark:text-indigo-400 underline">
                    admin@eliteai.tools
                </a>
            </p>
        </div>
        <div class="mt-8 text-center">
            <a href="http://127.0.0.1:8000"
                class="inline-block px-6 py-2 text-lg font-medium text-white transition-transform rounded-full shadow-lg bg-gradient-to-r from-indigo-600 to-blue-600 hover:scale-105 hover:from-indigo-700 hover:to-blue-700 dark:from-indigo-500 dark:to-blue-500 dark:hover:from-indigo-600 dark:hover:to-blue-600">
                Back to Home
            </a>
        </div>
    </div>
</div>

Related Examples

Subscribe to our newsletter section

Author:
Conan Hilton

3 years ago

11.7k
Products card grid
Example of product card grid with product image and pricing

Author:
Noob

3 years ago

24.2k
Payment Successful! Notification page

Author:
EliteAI Tools

1 year ago

2.8k
E-commerce Website UI Design
Here is a well-structured UI Design for a general e-commerce website template. This can be used as a reference for designers and developers to build or evaluate the UI components needed for an e-commerce site. View https://github.com/Rathanak-Phan/general-e-commerce-website-template

Author:
Rathanak Phan

9 months ago

2k
Payment form (Alpine JS)

Author:
Mr Robot

3 years ago

10.3k
e commerce
this an ecommerce component

Author:
ishimwe shadad

9 months ago

1.1k
Product Page
Showcase for the product.

Author:
muhamadrofii911

1 year ago

2.6k
e-commerce website landing page template with Tailwind CSS.
A clean, responsive e-commerce & blog template built with Tailwind CSS. Features light/dark mode, dynamic featured posts, hero, CTA, and SEO-ready sections.

Author:
Homayoun

2 months ago

551
Responsive eCommerce Footer Component with Tailwind CSS
A modern, fully responsive eCommerce footer component built with Tailwind CSS. It includes multiple sections like company info, account links, help center, categories, social media icons, payment methods, and app download buttons. Optimized for seamless mobile and desktop experiences, making it perfect for any online store or business website.

Author:
SHARIFUL ISLAM

1 year ago

1.2k
Product details page
Beautiful product detail page with -multiple images -color options -quantity selection -buy now and add to wishlist buttons

Author:
Dika Rahman

1 year ago

13.4k
Pricing cards
pricing section with 3 cards

Author:
Noob

3 years ago

12k
E-commerce product card withTailwind CSS

Author:
Quentin Rivers

1 year ago

2.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components