Checkout Card

A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

This tailwind example is contributed by Rajesh Maheshwari, on 28-Feb-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans,Product Showcase, Product card,Article Card, Blog page card, Article card

Card Pricing Product Blog Card

Author Rajesh Maheshwari

Tailwind v3.4 1.9k 8

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<body class="bg-black flex items-center justify-center min-h-screen p-4">

<div class="w-full max-w-md bg-white rounded-2xl shadow-lg p-6 md:p-8">
        
        <h2 class="text-2xl font-bold text-gray-800 text-center">Checkout</h2>
        <p class="text-gray-500 text-center mt-1">Complete your purchase</p>

<div class="mt-6 flex items-center space-x-4">
            <img src="https://media.istockphoto.com/id/913851526/photo/white-headphones.webp?a=1&b=1&s=612x612&w=0&k=20&c=1XeKlfmsO28pA3VLjiJFvvyl9AwFYjilm5AOMJGrwqM=" alt="Product Image" class="w-20 h-20 rounded-lg shadow">
            <div>
                <h3 class="text-lg font-semibold text-gray-800">Wireless Headphones</h3>
                <p class="text-sm text-gray-500">Noise Cancelling, Bluetooth 5.0</p>
            </div>
        </div>

<div class="mt-6 space-y-3">
            <div class="flex justify-between text-gray-600">
                <span>Subtotal</span>
                <span>$149.99</span>
            </div>
            <div class="flex justify-between text-gray-600">
                <span>Shipping</span>
                <span class="text-green-500">Free</span>
            </div>
            <div class="flex justify-between font-semibold text-gray-800">
                <span>Total</span>
                <span>$149.99</span>
            </div>
        </div>

<div class="mt-6">
            <label class="block text-gray-700 font-medium mb-2">Payment Method</label>
            <div class="flex items-center space-x-3">
                <button class="flex-1 bg-gray-100 hover:bg-gray-200 transition p-3 rounded-lg">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/2/2a/Mastercard-logo.svg" alt="Mastercard" class="h-6 mx-auto">
                </button>
                <button class="flex-1 bg-gray-100 hover:bg-gray-200 transition p-3 rounded-lg">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/0/04/Visa.svg" alt="Visa" class="h-6 mx-auto">
                </button>
                <button class="flex-1 bg-gray-100 hover:bg-gray-200 transition p-3 rounded-lg">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b5/PayPal.svg" alt="PayPal" class="h-6 mx-auto">
                </button>
            </div>
        </div>

<button class="mt-6 w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 rounded-lg shadow-md hover:shadow-lg transition duration-200">
            Complete Purchase
        </button>

<p class="text-center text-gray-500 text-sm mt-4">🔒 Secure Payment. Your information is encrypted.</p>
    </div>

</body>
</html>