Brutalist_Grayscale_Checkout_Form
A complex, brutalist-style checkout form component with a grayscale color scheme, optimized for portfolio showcasing. Features high contrast, unusual layouts, full responsiveness, and dark mode support.
HTML Code
<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>Related Components
RetroVintage_CheckoutFormComponent
Retro/Vintage Checkout Form with Earth tones, Moderate complexity, and Dark Mode Support
Checkout Form Component
A responsive checkout form with glassmorphism design, featuring frosted glass-like translucent elements and support for dark mode.
Checkout Form Component
A simple, responsive checkout form component with Neumorphism design, monochromatic color scheme, dark mode support, and image placeholders.