Brutalist_Grayscale_Checkout_Form
Un componente complesso del modulo di pagamento in stile brutalista con una combinazione di colori in scala di grigi, ottimizzato per la presentazione del portfolio. Presenta un contrasto elevato, layout insoliti, reattività completa e supporto per la modalità oscura.
Codice 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>Componenti correlati
Componente Modulo di Checkout
Un modulo di pagamento in modalità scura con colori vivaci, complessità moderata e design reattivo, adatto per le interfacce dei social media.
Componente Modulo di Checkout
Un componente del modulo di checkout semplice e reattivo con supporto per la modalità oscura utilizzando Tailwind CSS.
Modulo di pagamento minimalista in scala di grigi
Un modulo di pagamento complesso, reattivo, in scala di grigi e minimalista per siti Web aziendali/aziendali con supporto della modalità oscura utilizzando Tailwind CSS.