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 componente de formulario de pago minimalista y de diseño plano para un portafolio, con tonos tierra, diseño responsivo, compatibilidad con modo oscuro y múltiples elementos interactivos. Utiliza HTML y Tailwind CSS.
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.
Componente de formulario de pago
Un formulario de pago receptivo con un diseño minimalista, una interfaz rica y una combinación de colores triádica, compatible con el tema oscuro.