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 complejo monocromático skeuomórfico
Un formulario de pago esqueuomórfico complejo y receptivo con un diseño monocromático, adecuado para un portafolio. Incluye soporte para temas oscuros usando Tailwind CSS. Utiliza fondos degradados, sombras sutiles y campos de entrada que se asemejan a elementos físicos.
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.
Componente de formulario de pago
Un formulario de pago receptivo con un diseño minimalista, una interfaz rica y una combinación de colores triádica, compatible con el tema oscuro.