Componente de formulario de pago
Un formulario de pago en modo oscuro con colores vibrantes, complejidad moderada y diseño receptivo, adecuado para interfaces de redes sociales.
Código 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>Componentes relacionados
Formulario de pago Art Deco
Un componente de formulario de pago complejo y receptivo con un estilo de diseño Art Deco, con patrones geométricos y un estilo lujoso en tonos océano/azul. Diseñado para consultoría/servicios profesionales, con soporte completo para el modo oscuro.
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.
Componente de formulario de pago
Un componente de formulario de pago complejo y receptivo con principios de diseño de materiales, combinación de colores en escala de grises y compatibilidad con el modo oscuro, implementado con Tailwind CSS para interfaces de redes sociales.