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.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-800 py-6 flex flex-col justify-center sm:py-12">
<div class="relative py-3 sm:max-w-xl sm:mx-auto">
<div class="relative px-4 py-10 bg-white dark:bg-gray-700 mx-8 md:mx-0 shadow-lg rounded-lg sm:p-10">
<div class="max-w-md mx-auto">
<div class="flex items-center space-x-5">
<div class="h-14 w-14 bg-gray-200 dark:bg-gray-600 rounded-full flex flex-shrink-0 justify-center items-center text-gray-500 dark:text-gray-400 text-2xl font-mono"></div>
<div class="block pl-2 font-semibold text-xl self-start text-gray-700 dark:text-gray-200">
<h2 class="leading-relaxed">Checkout</h2>
</div>
</div>
<div class="divide-y divide-gray-200 dark:divide-gray-600">
<div class="py-8 text-base leading-6 space-y-4 text-gray-700 dark:text-gray-300 sm:opacity-100 ease-in-out">
<div class="flex flex-col">
<label class="leading-loose">Full Name</label>
<input type="text" class="px-4 py-2 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 dark:bg-gray-600 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="John Doe">
</div>
<div class="flex flex-col">
<label class="leading-loose">Card Number</label>
<input type="text" class="px-4 py-2 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 dark:bg-gray-600 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="1234 5678 9012 3456">
</div>
<div class="flex items-center space-x-4">
<div class="flex flex-col">
<label class="leading-loose">Expiry</label>
<div class="relative focus-within:text-gray-600 text-gray-400">
<input type="text" class="pr-4 pl-10 py-2 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 dark:bg-gray-600 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="MM/YY">
<div class="absolute left-3 top-1/2 transform -translate-y-1/2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</div>
</div>
</div>
<div class="flex flex-col">
<label class="leading-loose">CVV</label>
<div class="relative focus-within:text-gray-600 text-gray-400">
<input type="text" class="pr-4 pl-10 py-2 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 dark:bg-gray-600 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="123">
<div class="absolute left-3 top-1/2 transform -translate-y-1/2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a2 2 0 00-2-2H8a2 2 0 00-2 2v3m6 0v-3"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="pt-4 flex items-center space-x-4">
<button class="flex justify-center items-center w-full text-gray-900 dark:text-gray-100 px-4 py-3 rounded-md focus:outline-none bg-gray-200 dark:bg-gray-600 shadow-md hover:bg-gray-300 dark:hover:bg-gray-700">
Checkout
</button>
</div>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Formulario de pago minimalista en escala de grises
Un formulario de pago complejo, responsivo, minimalista y en escala de grises para sitios web comerciales/corporativos con soporte para el modo oscuro utilizando Tailwind CSS.
Componente de formulario de pago
Un componente de formulario de pago responsivo con colores vibrantes y microinteracciones, compatible con el tema oscuro. Incluye secciones para la dirección de envío, los detalles de pago y el resumen del pedido, todo diseñado con Tailwind CSS para una experiencia de comercio electrónico compleja.
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.