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.
Código HTML
<div class="min-h-screen bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-8 font-mono">
<div class="max-w-6xl mx-auto border-4 border-black dark:border-white shadow-xl dark:shadow-[0_0_20px_rgba(255,255,255,0.2)] bg-white dark:bg-gray-800">
<div class="grid grid-cols-1 md:grid-cols-3 gap-0">
<!-- Left Column: Order Summary / Image -->
<div class="relative col-span-1 border-b-4 md:border-b-0 md:border-r-4 border-black dark:border-white p-6 md:p-8 bg-gray-200 dark:bg-gray-700 overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 opacity-50"></div>
<img src="https://picsum.photos/seed/brutalism/600/800" alt="Abstract Brutalist Structure" class="absolute inset-0 w-full h-full object-cover opacity-60 mix-blend-multiply group-hover:scale-105 transition-transform duration-500 ease-in-out">
<div class="relative z-10">
<h2 class="text-4xl sm:text-5xl font-extrabold mb-8 uppercase leading-none border-b-4 border-black dark:border-white pb-3 sm:pb-5">
<span class="block">Your</span>
<span class="block">Order</span>
<span class="block">Summary</span>
</h2>
<div class="space-y-6 mb-8">
<div class="flex justify-between items-start border-b border-gray-600 dark:border-gray-400 pb-3">
<div class="flex flex-col">
<span class="font-bold text-lg">Product X-1</span>
<span class="text-sm text-gray-700 dark:text-gray-300">SKU: BRUX-001</span>
</div>
<span class="font-bold text-lg">$199.00</span>
</div>
<div class="flex justify-between items-start border-b border-gray-600 dark:border-gray-400 pb-3">
<div class="flex flex-col">
<span class="font-bold text-lg">Design Service</span>
<span class="text-sm text-gray-700 dark:text-gray-300">Consultation Fee</span>
</div>
<span class="font-bold text-lg">$50.00</span>
</div>
<div class="flex justify-between items-start border-b border-gray-600 dark:border-gray-400 pb-3">
<div class="flex flex-col">
<span class="font-bold text-lg">Material Pack Beta</span>
<span class="text-sm text-gray-700 dark:text-gray-300">Edition M-23</span>
</div>
<span class="font-bold text-lg">$75.00</span>
</div>
</div>
<div class="border-t-4 border-r-4 border-black dark:border-white pt-4 md:pt-6">
<div class="flex justify-between items-center mb-2">
<span class="text-lg uppercase text-gray-700 dark:text-gray-300">Subtotal</span>
<span class="text-lg font-bold">$324.00</span>
</div>
<div class="flex justify-between items-center mb-2">
<span class="text-lg uppercase text-gray-700 dark:text-gray-300">Shipping</span>
<span class="text-lg font-bold">$15.00</span>
</div>
<div class="flex justify-between items-center mb-6">
<span class="text-lg uppercase text-gray-700 dark:text-gray-300">Tax (8%)</span>
<span class="text-lg font-bold">$25.92</span>
</div>
<div class="flex justify-between items-center border-t-4 border-black dark:border-white pt-4">
<span class="text-3xl font-extrabold uppercase">Total</span>
<span class="text-3xl font-extrabold">$364.92</span>
</div>
</div>
</div>
</div>
<!-- Right Column: Form -->
<div class="col-span-1 md:col-span-2 p-6 md:p-8">
<h1 class="text-4xl sm:text-5xl font-extrabold mb-8 uppercase leading-none border-b-4 border-b-black dark:border-b-white pb-3 sm:pb-5">
<span class="block">Complete</span>
<span class="block">Your</span>
<span class="block">Purchase</span>
</h1>
<form class="space-y-8">
<!-- Contact Information -->
<div>
<h3 class="text-2xl font-bold uppercase mb-4 border-b-2 border-black dark:border-white pb-2">Contact Info</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div>
<label for="email" class="block text-sm font-bold uppercase mb-2">Email Address</label>
<input type="email" id="email" name="email" placeholder="[email protected]" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
</div>
<div>
<label for="phone" class="block text-sm font-bold uppercase mb-2">Phone Number <span class="text-gray-600 dark:text-gray-400 text-xs">(Optional)</span></label>
<input type="tel" id="phone" name="phone" placeholder="+1 (555) 123-4567" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
</div>
</div>
</div>
<!-- Shipping Address -->
<div>
<h3 class="text-2xl font-bold uppercase mb-4 border-b-2 border-black dark:border-white pb-2">Shipping Address</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-6">
<div>
<label for="first_name" class="block text-sm font-bold uppercase mb-2">First Name</label>
<input type="text" id="first_name" name="first_name" placeholder="John" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
</div>
<div>
<label for="last_name" class="block text-sm font-bold uppercase mb-2">Last Name</label>
<input type="text" id="last_name" name="last_name" placeholder="Doe" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
</div>
</div>
<div class="mb-6">
<label for="address1" class="block text-sm font-bold uppercase mb-2">Address Line 1</label>
<input type="text" id="address1" name="address1" placeholder="123 Brutalist Blvd" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
</div>
<div class="mb-6">
<label for="address2" class="block text-sm font-bold uppercase mb-2">Address Line 2 <span class="text-gray-600 dark:text-gray-400 text-xs">(Apt, Suite, Etc.)</span></label>
<input type="text" id="address2" name="address2" placeholder="Apt 4B" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
<div>
<label for="city" class="block text-sm font-bold uppercase mb-2">City</label>
<input type="text" id="city" name="city" placeholder="Metropolis" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
</div>
<div>
<label for="state" class="block text-sm font-bold uppercase mb-2">State / Province</label>
<input type="text" id="state" name="state" placeholder="NY" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
</div>
<div>
<label for="zip" class="block text-sm font-bold uppercase mb-2">Zip / Postal Code</label>
<input type="text" id="zip" name="zip" placeholder="10001" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
</div>
</div>
</div>
<!-- Payment Information -->
<div>
<h3 class="text-2xl font-bold uppercase mb-4 border-b-2 border-black dark:border-white pb-2">Payment Info</h3>
<div class="mb-6">
<label for="card_number" class="block text-sm font-bold uppercase mb-2">Card Number</label>
<input type="text" id="card_number" name="card_number" placeholder="•••• •••• •••• ••••" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
<div>
<label for="expiry_date" class="block text-sm font-bold uppercase mb-2">Expiry Date</label>
<input type="text" id="expiry_date" name="expiry_date" placeholder="MM/YY" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
</div>
<div>
<label for="cvv" class="block text-sm font-bold uppercase mb-2">CVV</label>
<input type="text" id="cvv" name="cvv" placeholder="123" class="w-full px-4 py-3 bg-gray-100 dark:bg-gray-900 border-2 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400">
</div>
<div class="hidden sm:block"></div>
</div>
</div>
<!-- Billing Address Checkbox -->
<div class="flex items-center mt-8 -ml-1">
<input type="checkbox" id="same_as_shipping" name="same_as_shipping" checked class="w-6 h-6 checked:bg-black dark:checked:bg-white checked:border-black dark:checked:border-white border-2 border-black dark:border-white focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 appearance-none inline-block align-middle relative after:content-[''] after:inline-block after:w-[calc(100%-4px)] after:h-[calc(100%-4px)] after:left-[2px] after:top-[2px] after:absolute after:bg-gray-900 dark:after:bg-gray-100 transition-colors duration-200">
<label for="same_as_shipping" class="ml-3 text-lg font-bold uppercase cursor-pointer">Billing address same as shipping</label>
</div>
<!-- Submit Button -->
<button type="submit" class="w-full bg-black dark:bg-white text-white dark:text-black text-2xl font-extrabold uppercase py-5 mt-10 border-4 border-black dark:border-white hover:bg-gray-700 dark:hover:bg-gray-300 hover:text-white dark:hover:text-black transition-colors duration-300 transform active:scale-98 focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800 relative group overflow-hidden">
<span class="relative z-10">PROCESS PAYMENT</span>
<span class="absolute inset-0 bg-gray-500 dark:bg-gray-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
</button>
<p class="text-center text-sm text-gray-600 dark:text-gray-400 pt-4">
By clicking 'PROCESS PAYMENT', you agree to our <a href="#" class="underline font-bold hover:text-gray-800 dark:hover:text-gray-200">terms and conditions</a>.
</p>
</form>
<div class="mt-12 pt-8 border-t-2 border-black dark:border-white text-center">
<p class="text-xl font-bold uppercase mb-4">Secured by:</p>
<div class="flex justify-center items-center space-x-6">
<img src="https://picsum.photos/seed/security1/80/40" alt="Security Badge 1" class="h-10 w-auto filter grayscale opacity-80 hover:opacity-100 transition-opacity duration-300">
<img src="https://picsum.photos/seed/security2/80/40" alt="Security Badge 2" class="h-10 w-auto filter grayscale opacity-80 hover:opacity-100 transition-opacity duration-300">
<img src="https://picsum.photos/seed/security3/80/40" alt="Security Badge 3" class="h-10 w-auto filter grayscale opacity-80 hover:opacity-100 transition-opacity duration-300">
</div>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
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.
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.
Componente de formulario de pago
Un componente de formulario de pago simple y receptivo con soporte para modo oscuro usando Tailwind CSS.