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
Componente de formulario de pago - Cuidado de la salud/Médico
Un componente de formulario de pago complejo y receptivo con un tema de diseño de acuarela suave y artístico, un esquema de color neutro cálido y soporte para modo oscuro, adecuado para aplicaciones médicas y de atención médica.
Componente de formulario de pago
Un componente de formulario de pago simple y receptivo con soporte para modo oscuro usando Tailwind CSS.
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.