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
Componente de formulario de pago
Un formulario de pago receptivo con estilo monocromático en blanco y negro, un color de acento brillante, transiciones degradadas y compatibilidad con modo oscuro, adecuado para aplicaciones deportivas / fitness.
Componente de formulario de pago
Un componente de formulario de pago de diseño minimalista y plano para herramientas de CRM / negocios, con un esquema de color cálido al atardecer y capacidad de respuesta total con soporte para modo oscuro.
Componente de formulario de pago
Componente de formulario de pago de diseño de materiales con esquema de color monocromático para fines de cartera, receptivo con soporte de tema oscuro.