체크 아웃 양식 구성 요소 - Neumorphic Corporate Blues
기업 블루 톤을 사용하는 뉴모픽 디자인 스타일의 복잡하고 반응이 빠른 체크아웃 양식 구성 요소입니다. 다크 모드를 지원하며 비즈니스/기업 웹사이트에 적합합니다.
HTML 코드
<div class="min-h-screen flex items-center justify-center p-4 bg-blue-50 dark:bg-gray-800 font-sans">
<div class="w-full max-w-4xl bg-blue-100 dark:bg-gray-700 rounded-xl shadow-xl p-8 transition-all duration-300 transform
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
shadow-[inset_5px_5px_10px_rgba(174,174,192,0.6),inset_-5px_-5px_10px_rgba(255,255,255,0.8)]">
<h2 class="text-3xl font-bold text-blue-800 dark:text-blue-300 mb-8 text-center">
Secure Checkout
</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Payment Information Section -->
<div class="p-6 rounded-xl bg-blue-50 dark:bg-gray-800
shadow-[5px_5px_10px_rgba(174,174,192,0.6),-5px_-5px_10px_rgba(255,255,255,0.8)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.5),-5px_-5px_10px_rgba(255,255,255,0.1)]">
<h3 class="text-xl font-semibold text-blue-700 dark:text-blue-400 mb-6">Payment Details</h3>
<div class="space-y-4">
<!-- Card Number -->
<div>
<label for="card-number" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Card Number</label>
<input type="text" id="card-number" placeholder="•••• •••• •••• ••••" maxlength="19" class="w-full p-3 rounded-lg
bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
border border-transparent outline-none
focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
placeholder:text-blue-400 dark:placeholder:text-gray-400">
</div>
<!-- Card Name -->
<div>
<label for="card-name" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Card Holder Name</label>
<input type="text" id="card-name" placeholder="John Doe" class="w-full p-3 rounded-lg
bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
border border-transparent outline-none
focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
placeholder:text-blue-400 dark:placeholder:text-gray-400">
</div>
<div class="grid grid-cols-2 gap-4">
<!-- Expiration Date -->
<div>
<label for="exp-date" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Expiry Date</label>
<input type="text" id="exp-date" placeholder="MM/YY" maxlength="5" class="w-full p-3 rounded-lg
bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
border border-transparent outline-none
focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
placeholder:text-blue-400 dark:placeholder:text-gray-400">
</div>
<!-- CVV -->
<div>
<label for="cvv" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">CVV</label>
<input type="text" id="cvv" placeholder="•••" maxlength="3" class="w-full p-3 rounded-lg
bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
border border-transparent outline-none
focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
placeholder:text-blue-400 dark:placeholder:text-gray-400">
</div>
</div>
<!-- Payment Options -->
<div class="mt-6">
<h4 class="text-md font-semibold text-blue-700 dark:text-blue-400 mb-3">Choose Payment Method</h4>
<div class="flex flex-wrap gap-4">
<button class="flex items-center justify-center gap-2 p-3 rounded-lg text-blue-700 dark:text-blue-200
bg-blue-200 dark:bg-gray-900
shadow-[5px_5px_10px_rgba(174,174,192,0.6),-5px_-5px_10px_rgba(255,255,255,0.8)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.5),-5px_-5px_10px_rgba(255,255,255,0.1)]
hover:shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
transition-all duration-200 text-sm">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4V8h16v10zm-12-6L4 8h16l-8 4-8-4z"/></svg>
Credit Card
</button>
<button class="flex items-center justify-center gap-2 p-3 rounded-lg text-blue-700 dark:text-blue-200
bg-blue-200 dark:bg-gray-900
shadow-[5px_5px_10px_rgba(174,174,192,0.6),-5px_-5px_10px_rgba(255,255,255,0.8)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.5),-5px_-5px_10px_rgba(255,255,255,0.1)]
hover:shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
transition-all duration-200 text-sm">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.47-7-7.39h5L10 9l3 3.01L14.99 12H19c0 4.87-3.93 8.8-8 8.93V19z"/></svg>
PayPal
</button>
</div>
</div>
</div>
</div>
<!-- Order Summary / Billing Address Section -->
<div class="p-6 rounded-xl bg-blue-50 dark:bg-gray-800
shadow-[5px_5px_10px_rgba(174,174,192,0.6),-5px_-5px_10px_rgba(255,255,255,0.8)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.5),-5px_-5px_10px_rgba(255,255,255,0.1)]">
<h3 class="text-xl font-semibold text-blue-700 dark:text-blue-400 mb-6">Billing Address</h3>
<div class="space-y-4">
<div>
<label for="full-name" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Full Name</label>
<input type="text" id="full-name" placeholder="Jane Doe" class="w-full p-3 rounded-lg
bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
border border-transparent outline-none
focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
placeholder:text-blue-400 dark:placeholder:text-gray-400">
</div>
<div>
<label for="address" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Address</label>
<input type="text" id="address" placeholder="123 Main St" class="w-full p-3 rounded-lg
bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
border border-transparent outline-none
focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
placeholder:text-blue-400 dark:placeholder:text-gray-400">
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="city" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">City</label>
<input type="text" id="city" placeholder="Anytown" class="w-full p-3 rounded-lg
bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
border border-transparent outline-none
focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
placeholder:text-blue-400 dark:placeholder:text-gray-400">
</div>
<div>
<label for="zip" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Zip Code</label>
<input type="text" id="zip" placeholder="12345" class="w-full p-3 rounded-lg
bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
border border-transparent outline-none
focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
placeholder:text-blue-400 dark:placeholder:text-gray-400">
</div>
</div>
<div>
<label for="country" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Country</label>
<select id="country" class="w-full p-3 rounded-lg
bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
border border-transparent outline-none
focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]">
<option value="">Select Country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="GB">United Kingdom</option>
<option value="AU">Australia</option>
<option value="DE">Germany</option>
<!-- Add more countries as needed -->
</select>
</div>
</div>
</div>
</div>
<!-- Order Summary Footer -->
<div class="mt-8 p-6 rounded-xl bg-blue-50 dark:bg-gray-800
shadow-[5px_5px_10px_rgba(174,174,192,0.6),-5px_-5px_10px_rgba(255,255,255,0.8)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.5),-5px_-5px_10px_rgba(255,255,255,0.1)]">
<h3 class="text-xl font-semibold text-blue-700 dark:text-blue-400 mb-4">Order Summary</h3>
<div class="flex justify-between items-center text-blue-600 dark:text-blue-200 mb-2">
<span>Subtotal</span>
<span>$200.00</span>
</div>
<div class="flex justify-between items-center text-blue-600 dark:text-blue-200 mb-2">
<span>Shipping</span>
<span>$15.00</span>
</div>
<div class="flex justify-between items-center text-blue-700 dark:text-blue-100 font-bold text-xl mt-4 pt-4 border-t border-blue-200 dark:border-gray-600">
<span>Total</span>
<span>$215.00</span>
</div>
<button type="submit" class="w-full mt-8 p-4 rounded-xl
bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700
text-white font-bold text-lg
shadow-[5px_5px_10px_rgba(0,0,0,0.2),-5px_-5px_10px_rgba(255,255,255,0.7)]
dark:shadow-[5px_5px_10px_rgba(0,0,0,0.8),-5px_-5px_10px_rgba(255,255,255,0.1)]
hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.6)]
dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.9),inset_-2px_-2px_5px_rgba(255,255,255,0.05)]
transition-all duration-300 transform active:scale-98">
Place Order
</button>
</div>
</div>
</div>관련 구성 요소
체크 아웃 양식 구성 요소
흑백 단색 스타일, 밝은 액센트 색상, 그라디언트 전환 및 다크 모드 지원을 갖춘 반응형 체크아웃 양식으로 스포츠/피트니스 애플리케이션에 적합합니다.
체크 아웃 양식 구성 요소
스위스/국제 타이포그래피 디자인 영향, 차분한 색 구성표 및 다크 모드 지원을 갖춘 깨끗하고 미니멀하며 반응이 빠른 결제 양식 구성 요소로 금융 및 은행 인터페이스에 적합합니다.