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.
Codice HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8 flex justify-center items-center">
<div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-xl p-8 shadow-xl backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20">
<h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white mb-8">Checkout Form</h2>
<form class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Full Name</label>
<input type="text" id="name" name="name" required class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 bg-opacity-50 dark:bg-opacity-50">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email Address</label>
<input type="email" id="email" name="email" required class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 bg-opacity-50 dark:bg-opacity-50">
</div>
<div>
<label for="card" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Card Number</label>
<input type="text" id="card" name="card" required class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 bg-opacity-50 dark:bg-opacity-50">
</div>
<div class="flex space-x-4">
<div class="w-1/2">
<label for="expiry" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Expiry Date</label>
<input type="text" id="expiry" name="expiry" placeholder="MM/YY" required class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 bg-opacity-50 dark:bg-opacity-50">
</div>
<div class="w-1/2 swansoft-form-group">
<label for="cvc" class="block text-sm font-medium text-gray-700 dark:text-gray-200">CVC</label>
<input type="text" id="cvc" name="cvc" required class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 bg-opacity-50 dark:bg-opacity-50">
</div>
</div>
<div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800">
Submit Payment
</button>
</div>
</form>
</div>
</div>Componenti correlati
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.
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 componente del modulo di pagamento complesso e reattivo con principi di Material Design, combinazione di colori in scala di grigi e supporto per la modalità scura, implementato utilizzando Tailwind CSS per le interfacce dei social media.