Componente Modulo di Checkout
Un componente del modulo di pagamento dal design minimalista e piatto per strumenti CRM/aziendali, caratterizzato da una combinazione di colori caldo tramonto e reattività completa con supporto per la modalità oscura.
Codice HTML
<div class="min-h-screen bg-orange-50 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8">
<div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
<div class="p-6 sm:p-8 bg-gradient-to-r from-orange-400 to-red-500 dark:from-orange-600 dark:to-red-700 text-white">
<h2 class="text-2xl sm:text-3xl font-bold mb-2">Checkout</h2>
<p class="text-orange-100 dark:text-orange-200">Please fill in your details to complete the purchase.</p>
</div>
<form class="p-6 sm:p-8 space-y-6">
<!-- Contact Information -->
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact Information</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email Address</label>
<input type="email" id="email" name="email" autocomplete="email" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Phone Number (Optional)</label>
<input type="tel" id="phone" name="phone" autocomplete="tel"
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
</div>
</div>
</div>
<!-- Shipping Information -->
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Shipping Information</h3>
<div class="grid grid-cols-1 gap-4">
<div>
<label for="full-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
<input type="text" id="full-name" name="full-name" autocomplete="name" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
</div>
<div>
<label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Street Address</label>
<input type="text" id="address" name="address" autocomplete="street-address" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
</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">City</label>
<input type="text" id="city" name="city" autocomplete="address-level2" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
</div>
<div>
<label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-300">State/Province</label>
<input type="text" id="state" name="state" autocomplete="address-level1" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
</div>
<div>
<label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Zip/Postal Code</label>
<input type="text" id="zip" name="zip" autocomplete="postal-code" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600">
</div>
</div>
</div>
</div>
<!-- Payment Information -->
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Payment Information</h3>
<div class="grid grid-cols-1 gap-4">
<div>
<label for="card-number" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Card Number</label>
<input type="text" id="card-number" name="card-number" autocomplete="cc-number" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600" placeholder="•••• •••• •••• ••••">
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
<label for="exp-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Expiration Date</label>
<input type="text" id="exp-date" name="exp-date" autocomplete="cc-exp" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600" placeholder="MM/YY">
</div>
<div>
<label for="cvv" class="block text-sm font-medium text-gray-700 dark:text-gray-300">CVV</label>
<input type="text" id="cvv" name="cvv" autocomplete="cc-csc" required
class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-orange-500 focus:border-orange-500 sm:text-sm
dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100 dark:focus:ring-orange-600 dark:focus:border-orange-600" placeholder="•••">
</div>
</div>
</div>
</div>
<!-- Submit Button -->
<div class="pt-4">
<button type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-medium text-white bg-orange-600 hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500
dark:bg-orange-700 dark:hover:bg-orange-800 dark:focus:ring-offset-gray-800">
Complete Purchase
</button>
</div>
</form>
</div>
</div>Componenti correlati
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.
Modulo di pagamento Art Déco
Un componente del modulo di pagamento complesso e reattivo con uno stile di design Art Déco, caratterizzato da motivi geometrici e uno stile lussuoso nei toni dell'oceano/blu. Progettato per consulenze/servizi professionali, con supporto completo della modalità scura.
Componente Modulo di Checkout
Un modulo di pagamento reattivo con un design minimalista, un'interfaccia ricca e una combinazione di colori triadica, che supporta il tema scuro.