Componente Modulo di Checkout
Un componente del modulo di pagamento pulito, minimalista e reattivo con un'influenza del design tipografico svizzero/internazionale, combinazione di colori tenui e supporto per la modalità scura, adatto per interfacce finanziarie e bancarie.
Codice HTML
<div class="min-h-screen bg-gray-100 p-4 dark:bg-gray-900 flex items-center justify-center font-sans">
<div class="w-full max-w-4xl bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-800 transition-colors duration-300">
<div class="p-6 md:p-8 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-2xl md:text-3xl font-bold text-gray-800 dark:text-gray-100 tracking-tight leading-tight mb-2">
<span class="text-blue-600 dark:text-blue-400">Secure</span> Checkout
</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm md:text-base">Please fill in your details to complete your secure transaction.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6 md:p-8">
<div class="lg:col-span-2 space-y-6">
<!-- Contact Information -->
<section>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact Information</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
<input type="email" id="email" name="email" placeholder="[email protected]" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Phone Number (Optional)</label>
<input type="tel" id="phone" name="phone" placeholder="+1 (555) 123-4567" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
</div>
</section>
<!-- Shipping Address -->
<section>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Shipping Address</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
<div>
<label for="first-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">First Name</label>
<input type="text" id="first-name" name="first-name" placeholder="John" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
<div>
<label for="last-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Last Name</label>
<input type="text" id="last-name" name="last-name" placeholder="Doe" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
</div>
<div class="mb-4">
<label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Address</label>
<input type="text" id="address" name="address" placeholder="123 Main St" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
<label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">City</label>
<input type="text" id="city" name="city" placeholder="Springfield" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
<div>
<label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">State / Province</label>
<input type="text" id="state" name="state" placeholder="IL" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
<div>
<label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Zip / Postcode</label>
<input type="text" id="zip" name="zip" placeholder="62704" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
</div>
</section>
<!-- Payment Information -->
<section>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Payment Information</h3>
<div class="mb-4">
<label for="card-number" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Card Number</label>
<input type="text" id="card-number" name="card-number" placeholder="XXXX XXXX XXXX XXXX" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
<label for="expiration" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Expiration Date</label>
<input type="text" id="expiration" name="expiration" placeholder="MM/YY" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
<div>
<label for="cvc" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">CVC</label>
<input type="text" id="cvc" name="cvc" placeholder="CVC" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
<div class="sm:col-span-1">
<label for="card-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name on Card</label>
<input type="text" id="card-name" name="card-name" placeholder="John Doe" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
</div>
</section>
</div>
<!-- Order Summary / Cart Details -->
<aside class="lg:col-span-1 border-t lg:border-t-0 lg:border-l border-gray-200 dark:border-gray-700 p-6 pt-8 lg:p-6 lg:pt-0">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Order Summary</h3>
<div class="space-y-4">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/seed/product1/80/80" alt="Product Image" class="w-16 h-16 rounded-md object-cover border border-gray-200 dark:border-gray-600">
<div>
<p class="text-gray-700 dark:text-gray-300 text-sm font-medium">Premium Finance Course</p>
<p class="text-gray-500 dark:text-gray-400 text-xs">Quantity: 1</p>
</div>
</div>
<span class="text-gray-700 dark:text-gray-300 text-sm font-semibold">$199.00</span>
</div>
<div class="flex justify-between items-center">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/seed/product2/80/80" alt="Product Image" class="w-16 h-16 rounded-md object-cover border border-gray-200 dark:border-gray-600">
<div>
<p class="text-gray-700 dark:text-gray-300 text-sm font-medium">Financial Planning Toolkit</p>
<p class="text-gray-500 dark:text-gray-400 text-xs">Quantity: 1</p>
</div>
</div>
<span class="text-gray-700 dark:text-gray-300 text-sm font-semibold">$49.00</span>
</div>
</div>
<div class="mt-6 space-y-2 border-t border-gray-200 dark:border-gray-700 pt-6">
<div class="flex justify-between text-gray-700 dark:text-gray-300 text-sm">
<span>Subtotal</span>
<span>$248.00</span>
</div>
<div class="flex justify-between text-gray-700 dark:text-gray-300 text-sm">
<span>Tax (8%)</span>
<span>$19.84</span>
</div>
<div class="flex justify-between text-gray-700 dark:text-gray-300 text-sm">
<span>Shipping</span>
<span>Free</span>
</div>
<div class="flex justify-between font-bold text-lg text-gray-800 dark:text-gray-100 pt-2">
<span>Total</span>
<span>$267.84</span>
</div>
</div>
<button type="submit" class="mt-8 w-full bg-blue-600 text-white py-3 px-4 rounded-md font-semibold text-base shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200">
Complete Purchase
</button>
<p class="text-center text-gray-500 dark:text-gray-400 text-xs mt-4">
Your information is secured with <span class="font-medium text-green-600 dark:text-green-400">256-bit encryption</span>.
</p>
</aside>
</div>
</div>
</div>Componenti correlati
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.
Componente Modulo di Checkout
Un componente del modulo di pagamento reattivo progettato con un'interfaccia utente in modalità scura e una combinazione di colori dai toni gioiello, adatto per piattaforme di intrattenimento/multimediali. Include i dettagli di pagamento e le sezioni di riepilogo.
Componente Modulo di Checkout
Un componente del modulo di pagamento semplice e reattivo con design Glassmorphism, combinazione di colori monocromatici e supporto per temi scuri, creato utilizzando Tailwind CSS.