پێشبینی کۆدی ڕاستەوخۆ
بەشی کۆدەکان
HTML +
Tailwind CSS
HTML Code
<div class="w-full max-w-md bg-white rounded-2xl shadow-lg p-6 md:p-8">
<!-- Header -->
<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>
<!-- Product Details -->
<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>
<!-- Price Breakdown -->
<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>
<!-- Payment Options -->
<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>
<!-- Checkout Button -->
<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>
<!-- Secure Payment Notice -->
<p class="text-center text-gray-500 text-sm mt-4">🔒 Secure Payment. Your information is encrypted.</p>
</div>
بینینەکان : 280
ناوی سەرچاوە
کڕینەکەت تەواو بکە
وەسف
کڕینەکەت تەواو بکە