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

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 E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

9 months ago

1.6k
Cart with alpinejs and tailwind css
How to add items to your cart with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

7 months ago

923
Feature cards
Feature showcase

Author:
Steven Kuhn

3 years ago

10.2k
Product cards
Product cards for eCommerce

Author:
ehmasuk

3 weeks ago

132
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

12.3k
Payment form (Alpine JS)

Author:
Mr Robot

3 years ago

10k
Gadget Bodda
Gadget Bodda

Author:
Tanvir Hasan Bappy (Tanvir)

3 months ago

369
Product / Service pricing section

Author:
Sophia Baker

2 years ago

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

5 months ago

391
Book Showcase Grid
Responsive Book Catalog Display with buy now CTA buttons

Author:
Prajwal Hallale

1 year ago

543
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

5 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components