Brutalist_Grayscale_Checkout_Form
Un composant de formulaire de paiement complexe, de style brutaliste, avec une palette de couleurs en niveaux de gris, optimisé pour la présentation du portfolio. Offre un contraste élevé, des mises en page inhabituelles, une réactivité totale et une prise en charge du mode sombre.
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>Composants associés
Composant du formulaire de paiement Glassmorphism
Composant de formulaire de paiement Glassmorphism avec palette de couleurs Earth Tones, complexité modérée et conception réactive avec prise en charge du thème sombre. Convient à des fins de blog/contenu.
Composant du formulaire de paiement
Un formulaire de paiement réactif avec un design glassmorphism, avec des éléments translucides semblables à du verre dépoli et une prise en charge du mode sombre.
Composant du formulaire de paiement
Un formulaire de paiement réactif avec un design minimaliste, une interface riche et une palette de couleurs triadiques, prenant en charge le thème sombre.