teşekkür ederim ama firma birebir aynısı olmak zorunda şeklinde dediği için bu şekilde olmak zorunda :/
beleşe anca bu kadar oluyor hocam vazla detay beklememek gerekiyor
adres kişi bilgide ekledim iyi günlerde kullanın
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ödeme Formu v2</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-6">
<div class="max-w-6xl mx-auto bg-white rounded-2xl shadow-lg p-8 grid grid-cols-1 lg:grid-cols-3 gap-8">
<div class="lg:col-span-1">
<h2 class="text-2xl font-bold mb-4">Ödeme Bilgileri</h2>
<div class="mb-4">
<label class="block text-gray-700">Tutar Gir</label>
<input type="text" placeholder="₺10.000,00" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="mb-4">
<h3 class="font-semibold mb-2">Bankalar</h3>
<div class="space-y-2">
<label class="flex items-center">
<input type="radio" name="banka" class="mr-2"> Ziraat Bankası
</label>
<label class="flex items-center">
<input type="radio" name="banka" class="mr-2"> Ziraat Katılım Bankası
</label>
<label class="flex items-center">
<input type="radio" name="banka" class="mr-2"> Garanti BBVA
</label>
</div>
</div>
<div class="mb-4">
<h3 class="font-semibold mb-2">Taksit Seçenekleri</h3>
<div class="space-y-2">
<label class="flex items-center justify-between">
<span>Tek Çekim</span>
<span>₺10.000,00</span>
<input type="radio" name="taksit" class="ml-2">
</label>
<label class="flex items-center justify-between">
<span>2 Taksit</span>
<span>₺10.450,00</span>
<input type="radio" name="taksit" class="ml-2">
</label>
<label class="flex items-center justify-between">
<span>3 Taksit</span>
<span>₺10.640,00</span>
<input type="radio" name="taksit" class="ml-2">
</label>
<label class="flex items-center justify-between">
<span>4 Taksit</span>
<span>₺10.950,00</span>
<input type="radio" name="taksit" class="ml-2">
</label>
</div>
</div>
</div>
<div class="lg:col-span-1">
<h2 class="text-2xl font-bold mb-4">Kart Bilgileri</h2>
<div class="mb-4">
<label class="block text-gray-700">Kart Sahibi</label>
<input type="text" placeholder="Ahmet Tekin" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="grid grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-gray-700">Kart Numarası</label>
<input type="text" placeholder="1234 5678 9012 3456" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label class="block text-gray-700">Son Kullanma Tarihi</label>
<input type="text" placeholder="MM/YY" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
</div>
<div class="grid grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-gray-700">Güvenlik No</label>
<input type="text" placeholder="123" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label class="block text-gray-700">Kart Tipi</label>
<select class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option>Visa</option>
<option>MasterCard</option>
<option>Troy</option>
</select>
</div>
</div>
<div class="flex items-center mb-4">
<input type="checkbox" id="3d" class="mr-2">
<label for="3d" class="text-gray-700">3D Secure</label>
</div>
<div class="flex items-center mb-4">
<input type="checkbox" id="mail-order" class="mr-2">
<label for="mail-order" class="text-gray-700">Mail Order</label>
</div>
<button class="w-full bg-blue-600 text-white py-3 rounded-lg text-lg font-semibold hover:bg-blue-700 transition">Ödeme Yap</button>
</div>
<div class="lg:col-span-1">
<h2 class="text-2xl font-bold mb-4">Müşteri Bilgileri</h2>
<div class="mb-4">
<label class="block text-gray-700">Ad Soyad</label>
<input type="text" placeholder="Ad Soyad" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="grid grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-gray-700">TC No</label>
<input type="text" placeholder="TC Kimlik No" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label class="block text-gray-700">Telefon</label>
<input type="text" placeholder="05xx xxx xx xx" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
</div>
<div class="mb-4">
<label class="block text-gray-700">Mail Adresi</label>
<input type="email" placeholder="mail@mail.com" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="grid grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-gray-700">Vergi Dairesi</label>
<input type="text" placeholder="Vergi Dairesi" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label class="block text-gray-700">Vergi No</label>
<input type="text" placeholder="Vergi No" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
</div>
<div class="mb-4">
<label class="block text-gray-700">Adres</label>
<textarea placeholder="Adres" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
</div>
<div class="flex justify-between mb-4">
<button class="bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 transition">Şifreyi Onayla</button>
<button class="bg-gray-600 text-white py-2 px-4 rounded-lg hover:bg-gray-700 transition">Otomatik Şifre Oluştur</button>
</div>
<div class="bg-yellow-100 text-yellow-800 p-4 rounded-lg mb-4">
<strong>Uyarı:</strong> Mail Order seçeneğini seçtiğinizde dikkatli olun.
</div>
<div class="bg-red-100 text-red-800 p-4 rounded-lg">
<strong>Uyarı:</strong> Doğrulama kodu gönderilecektir.
</div>
</div>
</div>
</body>
</html>