Componente de formulario de pago
Un componente de formulario de pago simple y receptivo con soporte para modo oscuro usando Tailwind CSS.
Código HTML
<div class="min-h-screen flex items-center justify-center p-6 bg-gray-900">
<div class="w-full max-w-md bg-gray-800 p-8 rounded-md shadow-md">
<h2 class="text-2xl font-bold text-white mb-6">Checkout</h2>
<form>
<div class="mb-4">
<label for="name" class="block text-white text-sm font-bold mb-2">Name</label>
<input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
</div>
<div class="mb-4">
<label for="email" class="block text-white text-sm font-bold mb-2">Email</label>
<input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
</div>
<div class="mb-4">
<label for="card" class="block text-white text-sm font-bold mb-2">Card Number</label>
<input type="text" id="card" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
</div>
<div class="mb-6">
<label for="expiry" class="block text-white text-sm font-bold mb-2">Expiry Date</label>
<input type="text" id="expiry" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
</div>
<div class="flex items-center justify-between">
<button type="button" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Submit</button>
</div>
</form>
</div>
</div>Componentes relacionados
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.
Componente de formulario de pago
Un componente de formulario de pago receptivo diseñado con una interfaz de usuario de modo oscuro y un esquema de color en tonos joya, adecuado para plataformas de entretenimiento/medios. Incluye detalles de pago y secciones de resumen.
Componente de formulario de pago
Un componente de formulario de pago simple y receptivo con diseño Glassmorphism, combinación de colores monocromática y compatibilidad con temas oscuros, creado con Tailwind CSS.