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

Modern website that provides software services
The website is a platform that offers software services to users, including access to open-source code, downloadable projects, and relevant documentation. The main objective is to support students, developers, and the open-source community by sharing free tools and source code examples.

Author:
Rathanak Phan

9 months ago

488
Product / Service pricing section

Author:
Sophia Baker

3 years ago

12.8k
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

8 months ago

982
e commerce
this an ecommerce component

Author:
ishimwe shadad

9 months ago

1.1k
Food Order Card
Ecommerce/Food order card layout

Author:
Rajesh Maheshwari

1 year ago

1.4k
Animated hero section template for a ecommerce store
A bold, animated hero section template that brings personality and energy to your ecommerce shoe store. Features floating 3D elements, vibrant gradients, and playful animations that make your products pop off the screen. Features: - Light & dark mode with smooth transitions and persistent theme preference - Fully responsive design optimized for mobile, tablet, and desktop - Eye-catching floating shoe display with rotating decorative elements - Animated gradient backgrounds and glowing CTAs - Modern color scheme with pink, purple, and yellow accents - Social proof stats section for building trust - Clean, semantic HTML with Tailwind CSS utility classes - Zero dependencies - just copy, customize, and deploy - Open source and free to use for commercial projects For: Sneaker stores, footwear brands, fashion ecommerce sites, streetwear shops, or any modern retail brand looking to make a memorable first impression with a hero section that doesn't take itself too seriously. Quick Setup: Simply replace the emoji placeholder with your product image, update the copy to match your brand voice, adjust the color gradients to your palette, and you're ready to launch!

Author:
Ijila Itunu

2 months ago

319
Payment Successful! Notification page

Author:
EliteAI Tools

1 year ago

2.8k
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

14.2k
Book Showcase Grid
Responsive Book Catalog Display with buy now CTA buttons

Author:
Prajwal Hallale

1 year ago

599
Amazing E-commerce card
An amazing e-commerce card with stunning hover effect

Author:
Robert Chunga

1 year ago

2.6k
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
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

548

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components