럭셔리체크 아웃 양식
럭셔리/프리미엄 스타일의 체크아웃 양식 구성 요소로, 다양한 색상의 그라데이션 배경, 세련된 타이포그래피, 세련된 요소가 있습니다. 문서/위키 사이트용으로 설계되었으며 완벽하게 반응하며 다크 모드를 지원합니다.
HTML 코드
<div class="p-4 sm:p-6 lg:p-8 min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-black">
<div class="w-full max-w-4xl bg-white/90 dark:bg-gray-800/90 backdrop-blur-md rounded-2xl shadow-xl p-6 sm:p-8 lg:p-10 border border-gray-200 dark:border-gray-700">
<h2 class="text-3xl sm:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 dark:from-indigo-400 dark:via-purple-400 dark:to-pink-400 mb-6 text-center tracking-tight">
Secure Checkout
</h2>
<p class="text-center text-gray-700 dark:text-gray-300 mb-8 max-w-md mx-auto text-lg leading-relaxed">
Complete your premium experience. Your information is safe with us.
</p>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Billing Information -->
<div>
<h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-5 border-b pb-3 border-gray-300 dark:border-gray-600">
Billing Information
</h3>
<form class="space-y-6">
<div>
<label for="fullName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Full Name</label>
<input type="text" id="fullName" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="John Doe">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
<input type="email" id="email" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="[email protected]">
</div>
<div>
<label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Address</label>
<input type="text" id="address" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="123 Main St">
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
<label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">City</label>
<input type="text" id="city" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="New York">
</div>
<div>
<label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Zip Code</label>
<input type="text" id="zip" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="10001">
</div>
<div>
<label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Country</label>
<select id="country" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 transition duration-300 ease-in-out">
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="GB">United Kingdom</option>
<option value="AU">Australia</option>
</select>
</div>
</div>
</form>
</div>
<!-- Payment Information -->
<div>
<h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-5 border-b pb-3 border-gray-300 dark:border-gray-600">
Payment Information
</h3>
<form class="space-y-6">
<div>
<label for="cardName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Name on Card</label>
<input type="text" id="cardName" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="John Doe">
</div>
<div>
<label for="cardNumber" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Card Number</label>
<input type="text" id="cardNumber" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="●●●● ●●●● ●●●● 1234">
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="expDate" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Expiration Date</label>
<input type="text" id="expDate" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="MM/YY">
</div>
<div>
<label for="cvv" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">CVV</label>
<input type="text" id="cvv" class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 text-base bg-white dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition duration-300 ease-in-out" placeholder="123">
</div>
</div>
<!-- Order Summary (basic version) -->
<div class="mt-8 pt-6 border-t border-gray-300 dark:border-gray-600">
<h4 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Order Summary</h4>
<div class="flex justify-between text-gray-700 dark:text-gray-300 mb-2">
<span>Product Name</span>
<span>$99.00</span>
</div>
<div class="flex justify-between text-gray-700 dark:text-gray-300 mb-2">
<span>Tax</span>
<span>$5.00</span>
</div>
<div class="flex justify-between font-bold text-lg text-gray-900 dark:text-gray-50 border-t border-gray-300 dark:border-gray-600 pt-3 mt-3">
<span>Total</span>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-green-500 to-blue-500 dark:from-green-400 dark:to-blue-400">$104.00</span>
</div>
</div>
</form>
</div>
</div>
<div class="mt-10 pt-6 border-t border-gray-300 dark:border-gray-600 flex justify-center">
<button type="submit" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition duration-300 ease-in-out font-semibold text-lg animate-gradient-xy focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700">
Place Order
</button>
</div>
<!-- Placeholder for an image in a luxury theme -->
<div class="mt-10 hidden sm:block">
<img src="https://picsum.photos/800/200?grayscale&blur=2" alt="Elegant Payment Iconography" class="w-full rounded-xl opacity-80 shadow-md" loading="lazy">
</div>
</div>
</div>
<style>
/* Custom keyframes for the gradient animation */
@keyframes gradient-xy {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.animate-gradient-xy {
background-size: 400% 400%;
animation: gradient-xy 6s ease infinite;
}
</style>