Composant du formulaire de paiement - Neumorphic Corporate Blues
Un composant de formulaire de paiement complexe et réactif avec un style de conception neumorphique, utilisant des tons bleus d’entreprise. Il prend en charge le mode sombre et convient aux sites Web d’entreprise.
HTML Code
<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>Composants associés
Neon_Sepia_Checkout_Form
Un composant de formulaire de paiement simple et réactif avec des effets néon/lueur et une palette de couleurs sépia/marron, conçu pour les applications de crypto-monnaie/blockchain. Inclut la prise en charge du mode sombre.
Composant de formulaire de paiement ludique
Un composant de formulaire de paiement simple, ludique et réactif avec des éléments arrondis et des couleurs sourdes, adapté aux plateformes d’emploi/de carrière. Inclut la prise en charge du mode sombre.
Composant du formulaire de paiement
Un formulaire de paiement réactif avec un design glassmorphism, avec des éléments translucides semblables à du verre dépoli et une prise en charge du mode sombre.