Componente de formulario de pago - Neumorphic Corporate Blues
Un componente de formulario de pago complejo y receptivo con un estilo de diseño neumórfico, que utiliza tonos azules corporativos. Es compatible con el modo oscuro y es adecuado para sitios web comerciales / corporativos.
Código 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>Componentes relacionados
Componente de formulario de pago
Un componente de formulario de pago simple y receptivo con diseño de neumorfismo, combinación de colores monocromática, compatibilidad con modo oscuro y marcadores de posición de imagen.
Componente de formulario de pago
Un componente de formulario de pago complejo, inspirado en papel/impresión con tonos joya, diseñado para sitios de documentación/wiki, con capacidad de respuesta total y compatibilidad con modo oscuro.
Formulario de pago de neumorfismo
Componente de formulario de pago de neumorfismo con esquema de color análogo para un sitio web de portafolio. Tiene un diseño responsivo con soporte para modo oscuro. No se incluye código JavaScript, solo HTML con clases Tailwind.