Componente del modulo di pagamento - Neumorphic Corporate Blues
Un componente del modulo di checkout complesso e reattivo con uno stile di design neumorfico, che utilizza i toni del blu aziendale. Supporta la modalità oscura ed è adatto per siti Web aziendali/aziendali.
Codice 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>Componenti correlati
Modulo di pagamento per il neumorfismo
Componente Modulo di pagamento per neumorfismo con combinazione di colori analoga per un sito Web Portfolio. Ha un design reattivo con supporto per la modalità oscura. Non è incluso alcun codice JavaScript, solo HTML con le classi Tailwind.
Componente Modulo di Checkout
Un modulo di pagamento reattivo con design glassmorphism, con elementi traslucidi simili al vetro smerigliato e supporto per la modalità scura.
Componente del modulo di pagamento - Sanità/Medicina
Un componente del modulo di pagamento complesso e reattivo con un tema di design ad acquerello morbido e artistico, una combinazione di colori neutri caldi e supporto per la modalità scura, adatto per applicazioni sanitarie e mediche.