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

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

Payment form (Alpine JS)

Author:
Mr Robot

3 years ago

10.2k
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Author:
Ragnar lodbrok

1 year ago

1.6k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

Author:
threehymns

2 years ago

19.3k
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

1 year ago

3.9k
Subscribe to our newsletter section

Author:
Conan Hilton

3 years ago

11.6k
Payment Successful! Notification page

Author:
EliteAI Tools

1 year ago

2.7k
Order Sumamary
Shows the summary of the order a user has placed, may include shipping address, total amount, payment method, and status.

Author:
Code huit

2 years ago

14k
Pricing cards
pricing section with 3 cards

Author:
Noob

3 years ago

11.8k
Animated Pizza Menu Grid
A beautiful, interactive pizza product grid featuring smooth 360-degree rotation animations on hover. This free open-source component includes automatic dark mode support, responsive design (mobile, tablet, desktop), and an elegant "Add to Cart" button reveal effect. Built with HTML and Tailwind CSS - no dependencies required. Ideal for restaurant websites, food delivery platforms, e-commerce stores, or any product showcase needing eye-catching interactivity.

Author:
Homayoun

3 months ago

520
Food Order Card
Ecommerce/Food order card layout

Author:
Rajesh Maheshwari

11 months ago

1.3k
Product Card for eCommerce
Here is a Product Card with discount badge, price with discount and price normally. On other hand, buttons for up or down quantity and add to cart button. This is create for Grid Columns, wich can 4 or 5 depend for desktop

Author:
Andrés Abarzúa

7 months ago

977
Product / Service pricing section

Author:
Sophia Baker

3 years ago

12.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components