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.
Código HTML
<div class="min-h-screen bg-orange-50 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8">
<div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<div class="p-6 sm:p-8 bg-gradient-to-r from-orange-400 to-red-500 dark:from-orange-600 dark:to-red-700 text-white">
<h2 class="text-2xl sm:text-3xl font-bold mb-2">Checkout</h2>
<p class="text-orange-100 dark:text-orange-200">Please fill in your details to complete the purchase.</p>
</div>
<form class="p-6 sm:p-8 space-y-6">
<!-- Contact Information -->
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact Information</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
<input type="email" id="email" name="email" autocomplete="email" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Phone Number (Optional)</label>
<input type="tel" id="phone" name="phone" autocomplete="tel"
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
</div>
</div>
</div>
<!-- Shipping Information -->
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Shipping Information</h3>
<div class="grid grid-cols-1 gap-4">
<div>
<label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
<input type="text" id="full-name" name="full-name" autocomplete="name" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
</div>
<div>
<label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Street Address</label>
<input type="text" id="address" name="address" autocomplete="street-address" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
<label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300">City</label>
<input type="text" id="city" name="city" autocomplete="address-level2" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
</div>
<div>
<label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-300">State/Province</label>
<input type="text" id="state" name="state" autocomplete="address-level1" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
</div>
<div>
<label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Zip/Postal Code</label>
<input type="text" id="zip" name="zip" autocomplete="postal-code" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
</div>
</div>
</div>
</div>
<!-- Payment Information -->
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Payment Information</h3>
<div class="grid grid-cols-1 gap-4">
<div>
<label for="card-number" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Card Number</label>
<input type="text" id="card-number" name="card-number" autocomplete="cc-number" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600" placeholder="•••• •••• •••• ••••">
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
<label for="exp-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Expiration Date</label>
<input type="text" id="exp-date" name="exp-date" autocomplete="cc-exp" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600" placeholder="MM/YY">
</div>
<div>
<label for="cvv" class="block text-sm font-medium text-gray-700 dark:text-gray-300">CVV</label>
<input type="text" id="cvv" name="cvv" autocomplete="cc-csc" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600" placeholder="•••">
</div>
</div>
</div>
</div>
<!-- Submit Button -->
<div class="pt-4">
<button type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-medium text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500
dark:bg-orange-700 dark:hover:bg-orange-800 dark:focus:ring-offset-gray-800">
Complete Purchase
</button>
</div>
</form>
</div>
</div>Componentes relacionados
Componente de formulario de pago
Un componente de formulario de pago simple y receptivo con soporte para modo oscuro usando Tailwind CSS.
Componente de formulario de pago
Un componente de formulario de pago simple y receptivo con diseño de neumorfismo, combinación de colores monocromática, compatibilidad con modo oscuro y marcadores de posición de imagen.
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.