All Prompts
All Prompts
paymentcheckoutformtailwindresponsivecredit-cardorder-summaryecommerce
Checkout Payment Form with Order Summary
Адаптивная форма оплаты с сводкой заказа. Компонент Tailwind для e-commerce и SaaS. Включает поля карты, итог заказа, поддерживает бренды карт.
Prompt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Payment Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-100 font-['Plus_Jakarta_Sans']">
<div class="min-h-screen flex items-center justify-center p-4">
<div class="max-w-4xl w-full bg-white rounded-2xl shadow-lg overflow-hidden">
<div class="md:flex">
<!-- Left Column: Payment Form -->
<div class="md:w-3/5 p-8">
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-800">Complete your payment</h2>
<p class="text-gray-500 mt-2">Enter your card details to process your payment</p>
</div>
<!-- Payment Form -->
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Card number</label>
<div class="relative">
<input type="text" placeholder="1234 5678 9012 3456" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition">
<div class="absolute right-3 top-3 flex space-x-2">
<i class="fa-brands fa-cc-visa text-blue-700 text-xl"></i>
<i class="fa-brands fa-cc-mastercard text-xl"></i>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Expiration date</label>
<input type="text" placeholder="MM / YY" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Security code</label>
<div class="relative">
<input type="text" placeholder="CVC" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition">
<div class="absolute right-3 top-3 text-gray-400">
<i class="fa-solid fa-circle-question"></i>
</div>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Name on card</label>
<input type="text" placeholder="Your name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition">
</div>
<div class="pt-4">
<button class="w-full bg-indigo-600 text-white py-3 px-4 rounded-lg hover:bg-indigo-700 transition font-medium flex items-center justify-center">
<span>Pay $149.00</span>
<i class="fa-solid fa-lock ml-2 text-sm"></i>
</button>
<p class="text-xs text-center text-gray-500 mt-3 flex items-center justify-center">
<i class="fa-solid fa-shield-halved mr-1 text-gray-400"></i>
Your payment information is encrypted and secure
</p>
</div>
</div>
</div>
<!-- Right Column: Order Summary -->
<div class="md:w-2/5 bg-gray-50 p-8 border-l border-gray-200">
<h3 class="text-lg font-semibold text-gray-800 mb-6">Order summary</h3>
<div class="space-y-4 mb-6">
<div class="flex justify-between items-start">
<div class="flex items-center">
<div class="h-12 w-12 rounded-md bg-indigo-100 flex items-center justify-center">
<i class="fa-solid fa-briefcase text-indigo-500"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-800">Business Plan</p>
<p class="text-xs text-gray-500">Annual billing</p>
</div>
</div>
<p class="text-sm font-medium">$129.00</p>
</div>
<div class="flex justify-between items-start">
<div class="flex items-center">
<div class="h-12 w-12 rounded-md bg-green-100 flex items-center justify-center">
<i class="fa-solid fa-headset text-green-500"></i>
</div>
<div class="ml-4">
<p class="text-sm font-medium text-gray-800">Premium Support</p>
<p class="text-xs text-gray-500">24/7 customer service</p>
</div>
</div>
<p class="text-sm font-medium">$20.00</p>
</div>
</div>
<div class="border-t border-gray-200 pt-4 mb-6">
<div class="flex justify-between mb-2">
<p class="text-sm text-gray-600">Subtotal</p>
<p class="text-sm font-medium text-gray-800">$149.00</p>
</div>
<div class="flex justify-between">
<p class="text-sm text-gray-600">Tax</p>
<p class="text-sm font-medium text-gray-800">$0.00</p>
</div>
</div>
<div class="border-t border-gray-200 pt-4">
<div class="flex justify-between">
<p class="text-base font-medium text-gray-800">Total</p>
<p class="text-base font-bold text-gray-800">$149.00</p>
</div>
<p class="text-xs text-gray-500 mt-2">
By completing this purchase you agree to our <a href="#" class="text-indigo-600 hover:text-indigo-500">terms and conditions</a>
</p>
</div>
<div class="mt-8">
<div class="flex items-center justify-center space-x-3">
<i class="fa-brands fa-cc-visa text-blue-700 text-2xl"></i>
<i class="fa-brands fa-cc-mastercard text-2xl"></i>
<i class="fa-brands fa-cc-amex text-blue-500 text-2xl"></i>
<i class="fa-brands fa-cc-paypal text-blue-800 text-2xl"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>