Componenti Modulo di pagamento Componente Modulo di Checkout

Componente Modulo di Checkout

Un modulo di pagamento in modalità scura con colori vivaci, complessità moderata e design reattivo, adatto per le interfacce dei social media.

Anteprima

Codice HTML

<div class="min-h-screen bg-gray-900 flex items-center justify-center p-8">
  <div class="bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-md">
    <h2 class="text-2xl font-bold text-teal-400 mb-6 text-center">Checkout</h2>
    <form>
      <div class="mb-4">
        <label for="name" class="block text-teal-300 text-sm font-semibold mb-2">Full Name</label>
        <input type="text" id="name" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-teal-500 focus:border-teal-500 text-white" placeholder="John Doe">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-teal-300 text-sm font-semibold mb-2">Email</label>
        <input type="email" id="email" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-teal-500 focus:border-teal-500 text-white" placeholder="[email protected]">
      </div>
      <div class="mb-4">
        <label for="card" class="block text-teal-300 text-sm font-semibold mb-2">Card Number</label>
        <input type="text" id="card" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-teal-500 focus:border-teal-500 text-white" placeholder="XXXX-XXXX-XXXX-XXXX">
      </div>
      <div class="mb-4 flex space-x-4">
        <div class="w-1/2">
          <label for="expiry" class="block text-teal-300 text-sm font-semibold mb-2">Expiry Date</label>
          <input type="text" id="expiry" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-teal-500 focus:border-teal-500 text-white" placeholder="MM/YY">
        </div>
        <div class="w-1/2">
          <label for="cvv" class="block text-teal-300 text-sm font-semibold mb-2">CVV</label>
          <input type="text" id="cvv" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-teal-500 focus:border-teal-500 text-white" placeholder="CVC">
        </div>
      </div>
      <div class="mb-6">
        <label for="address" class="block text-teal-300 text-sm font-semibold mb-2">Billing Address</label>
        <textarea id="address" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-teal-500 focus:border-teal-500 text-white" rows="3" placeholder="Street, City, State, Zip"></textarea>
      </div>
      <button type="submit" class="w-full bg-teal-500 hover:bg-teal-600 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-50">Pay Now</button>
    </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.

Aperto

RetroVintage_CheckoutFormComponent

Modulo di pagamento retrò/vintage con toni della terra, complessità moderata e supporto per la modalità scura

Aperto

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.

Aperto