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.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8 flex items-center justify-center">
<div class="max-w-md w-full space-y-8 bg-gray-200 dark:bg-gray-800 p-10 rounded-xl shadow-xl">
<div>
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
Checkout
</h2>
</div>
<form class="mt-8 space-y-6" action="#" method="POST">
<input type="hidden" name="remember" value="true">
<div class="rounded-md shadow-sm -space-y-px">
<div>
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 text-gray-900 dark:text-white rounded-t-md focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 focus:z-10 sm:text-sm bg-gray-100 dark:bg-gray-700"
placeholder="Email address">
</div>
<div>
<label for="card-number" class="sr-only">Card number</label>
<input id="card-number" name="card-number" type="text" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 text-gray-900 dark:text-white focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 focus:z-10 sm:text-sm bg-gray-100 dark:bg-gray-700"
placeholder="Card number">
</div>
<div class="flex">
<div class="w-1/2">
<label for="expiration-date" class="sr-only">Expiration date</label>
<input id="expiration-date" name="expiration-date" type="text" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 text-gray-900 dark:text-white rounded-bl-md focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 focus:z-10 sm:text-sm bg-gray-100 dark:bg-gray-700"
placeholder="MM/YY">
</div>
<div class="w-1/2">
<label for="cvc" class="sr-only">CVC</label>
<input id="cvc" name="cvc" type="text" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 text-gray-900 dark:text-white rounded-br-md focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 focus:z-10 sm:text-sm bg-gray-100 dark:bg-gray-700"
placeholder="CVC">
</div>
</div>
</div>
<div>
<button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-cyan-600 hover:bg-cyan-700专注:outline-none focus:ring-2 focus:ring- offset-2 focus:ring-cyan-500 shadow-md">
Pay Now
</button>
</div>
</form>
</div>
</div>Componentes relacionados
Brutalist_Grayscale_Checkout_Form
Un componente de formulario de pago complejo de estilo brutalista con un esquema de color en escala de grises, optimizado para la exhibición de carteras. Cuenta con alto contraste, diseños inusuales, capacidad de respuesta completa y compatibilidad con modo oscuro.
LujoCheckoutFormulario
Un componente de formulario de pago de lujo/estilo premium con un fondo degradado multicolor, tipografía sofisticada y elementos refinados. Diseñado para sitios de documentación/wiki, es totalmente responsivo y admite el modo 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.