Componente de formulario de pago
Un formulario de pago responsivo con diseño de morfismo de vidrio, con elementos translúcidos similares al vidrio esmerilado y soporte para el modo oscuro.
Código HTML
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 bg-opacity-70 backdrop-blur-md border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-8 w-full sm:w-96">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Checkout</h2>
<form class="mt-4">
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="name">Full Name</label>
<input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="name" placeholder="John Doe" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="email">Email Address</label>
<input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="email" id="email" placeholder="[email protected]" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="address">Shipping Address</label>
<input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="address" placeholder="123 Main St" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="card">Credit Card Number</label>
<input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="card" placeholder="1234 5678 9012 3456" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="expiry">Expiry Date</label>
<input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="expiry" placeholder="MM/YY" required>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300" for="cvv">CVV</label>
<input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="cvv" placeholder="123" required>
</div>
<img class="my-4 rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Random placeholder"/>
<div class="flex justify-between items-center">
<button class="w-full bg-blue-600 text-white rounded-lg py-2 px-4 hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300" type="submit">Pay Now</button>
<div>
<img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
</div>
</div>
</form>
</div>
</div>Componentes relacionados
Componente de formulario de pago
Un formulario de pago en modo oscuro con colores vibrantes, complejidad moderada y diseño receptivo, adecuado para interfaces de redes sociales.
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.
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.