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.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-6">
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Checkout</h2>
<form>
<div class="mb-4">
<label for="name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Full Name</label>
<input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="John Doe">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 dark:text-gray-300 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 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="[email protected]">
</div>
<div class="mb-4">
<label for="address" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Address</label>
<input type="text" id="address" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="123 Main St">
</div>
<div class="mb-4">
<label for="city" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">City</label>
<input type="text" id="city" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Anytown">
</div>
<div class="mb-4">
<label for="zip" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Zip Code</label>
<input type="text" id="zip" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="12345">
</div>
<div class="mb-6">
<label for="card-number" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Card Number</label>
<input type="text" id="card-number" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="**** **** **** ****">
</div>
<div class="flex items-center justify-between">
<button type="button" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:hover:bg-gray-600">
Submit Payment
</button>
</div>
</form>
</div>
</div>
</div>Componentes relacionados
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.
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.
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.