체크 아웃 양식 구성 요소
생생한 색상, 적당한 복잡성 및 반응형 디자인을 갖춘 다크 모드 결제 양식으로 소셜 미디어 인터페이스에 적합합니다.
HTML 코드
<div class="min-h-screen bg-gray-900 flex items-center justify-center p-8">
<div class="bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-md">
<h2 class="text-2xl font-bold text-teal-400 mb-6 text-center">Checkout</h2>
<form>
<div class="mb-4">
<label for="name" class="block text-teal-300 text-sm font-semibold mb-2">Full Name</label>
<input type="text" id="name" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-teal-500 focus:border-teal-500 text-white" placeholder="John Doe">
</div>
<div class="mb-4">
<label for="email" class="block text-teal-300 text-sm font-semibold mb-2">Email</label>
<input type="email" id="email" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-teal-500 focus:border-teal-500 text-white" placeholder="[email protected]">
</div>
<div class="mb-4">
<label for="card" class="block text-teal-300 text-sm font-semibold mb-2">Card Number</label>
<input type="text" id="card" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-teal-500 focus:border-teal-500 text-white" placeholder="XXXX-XXXX-XXXX-XXXX">
</div>
<div class="mb-4 flex space-x-4">
<div class="w-1/2">
<label for="expiry" class="block text-teal-300 text-sm font-semibold mb-2">Expiry Date</label>
<input type="text" id="expiry" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-teal-500 focus:border-teal-500 text-white" placeholder="MM/YY">
</div>
<div class="w-1/2">
<label for="cvv" class="block text-teal-300 text-sm font-semibold mb-2">CVV</label>
<input type="text" id="cvv" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-teal-500 focus:border-teal-500 text-white" placeholder="CVC">
</div>
</div>
<div class="mb-6">
<label for="address" class="block text-teal-300 text-sm font-semibold mb-2">Billing Address</label>
<textarea id="address" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-teal-500 focus:border-teal-500 text-white" rows="3" placeholder="Street, City, State, Zip"></textarea>
</div>
<button type="submit" class="w-full bg-teal-500 hover:bg-teal-600 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-50">Pay Now</button>
</form>
</div>
</div>관련 구성 요소
Glassmorphism Checkout 양식 구성 요소
Glassmorphism Checkout 양식 구성 요소에는 Earth Tones 색 구성표, 적당한 복잡성 및 어두운 테마를 지원하는 반응형 디자인이 포함되어 있습니다. 블로그/콘텐츠 목적에 적합합니다.