Componente Modulo di Checkout
Componente del modulo di checkout Material Design con combinazione di colori monocromatica per scopi di portfolio, reattivo con supporto per temi scuri.
Codice HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-6">
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Checkout</h2>
<form>
<div class="mb-4">
<label for="name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Full Name</label>
<input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="John Doe">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
<input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="[email protected]">
</div>
<div class="mb-4">
<label for="address" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Address</label>
<input type="text" id="address" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="123 Main St">
</div>
<div class="mb-4">
<label for="city" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">City</label>
<input type="text" id="city" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Anytown">
</div>
<div class="mb-4">
<label for="zip" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Zip Code</label>
<input type="text" id="zip" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="12345">
</div>
<div class="mb-6">
<label for="card-number" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Card Number</label>
<input type="text" id="card-number" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="**** **** **** ****">
</div>
<div class="flex items-center justify-between">
<button type="button" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:hover:bg-gray-600">
Submit Payment
</button>
</div>
</form>
</div>
</div>
</div>Componenti correlati
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.
Componente Modulo di Checkout
Un modulo di pagamento reattivo con stile monocromatico in bianco e nero, un colore d'accento brillante, transizioni sfumate e supporto per la modalità scura, adatto per applicazioni sportive/fitness.
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.