Catégories

Composants Formulaire de paiement

Formulaire de paiement

Formulaire pour terminer le processus d’achat

Composant du formulaire de paiement

Un composant de formulaire de paiement simple et réactif avec un design Glassmorphism, une palette de couleurs monochromatiques et une prise en charge du thème sombre, conçu à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <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>

Composant du formulaire de paiement Glassmorphism

Composant de formulaire de paiement Glassmorphism avec palette de couleurs Earth Tones, complexité modérée et conception réactive avec prise en charge du thème sombre. Convient à des fins de blog/contenu.

Ouvrir l’aperçu

                <div class="min-h-screen bg-stone-100 py-6 flex flex-col justify-center sm:py-12 dark:bg-stone-900">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="absolute inset-0 bg-gradient-to-r from-stone-400 to-stone-600 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"></div>
    <div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20 dark:bg-stone-800 dark:text-stone-200 backdrop-filter backdrop-blur-xl bg-opacity-20 dark:bg-opacity-10">
      <div class="max-w-md mx-auto">
        <div>
          <h1 class="text-2xl font-semibold text-stone-800 dark:text-stone-100">Checkout Form</h1>
        </div>
        <div class="divide-y divide-stone-200">
          <div class="py-8 text-base leading-6 space-y-4 text-stone-700 sm:text-lg sm:leading-7 dark:text-stone-300">
            <div class="relative">
              <input autocomplete="off" id="email" name="email" type="text" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-Rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Email address" />
              <label for="email" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">Email Address</label>
            </div>
            <div class="relative">
              <input autocomplete="off" id="password" name="password" type="password" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Password" />
              <label for="password" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">Card Number</label>
            </div>
             <div class="relative">
              <input autocomplete="off" id="password" name="password" type="password" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Password" />
              <label for="password" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">Expiry Date</label>
            </div>
             <div class="relative">
              <input autocomplete="off" id="password" name="password" type="password" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Password" />
              <label for="password" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">CVV</label>
            </div>
            <div class="relative">
              <button class="bg-stone-600 text-white rounded-md px-6 py-2 dark:bg-stone-700">Submit</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

RetroVintage_CheckoutFormComponent

Formulaire de paiement rétro/vintage avec prise en charge des tons terreux, de la complexité modérée et du mode sombre

Ouvrir l’aperçu

                <div class="container mx-auto p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl font-mono">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Checkout Information</h2>
  <form>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="mb-4">
        <label for="full_name" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Full Name</label>
        <input type="text" id="full_name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your full name">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email Address</label>
        <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your email address">
      </div>
    </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 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your address">
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <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 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your city">
      </div>
      <div class="mb-4">
        <label for="state" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">State</label>
        <input type="text" id="state" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your state">
      </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 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your zip code">
      </div>
    </div>

    <div class="mb-6">
      <label for="card_number" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Credit Card Number</label>
      <input type="text" id="card_number" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your credit card number">
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="mb-6">
        <label for="expiry_date" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Expiry Date</label>
        <input type="text" id="expiry_date" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="MM/YY">
      </div>
      <div class="mb-6">
        <label for="cvv" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">CVV</label>
        <input type="text" id="cvv" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="CVV">
      </div>
        <div class="mb-6">
            <label for="country" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Country</label>
            <input type="text" id="country" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Enter your country">
        </div>
    </div>

    <div class="flex items-center justify-between">
      <button class="bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-green-800 dark:hover:bg-green-900" type="button">
        Submit Payment
      </button>
    </div>
  </form>
</div>

Composant du formulaire de paiement

Composant de formulaire de paiement de conception matérielle avec schéma de couleurs monochromatiques à des fins de portefeuille, réactif avec prise en charge du thème sombre.

Ouvrir l’aperçu

                <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>

Composant du formulaire de paiement

Un formulaire de paiement réactif avec un design glassmorphism, avec des éléments translucides semblables à du verre dépoli et une prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 bg-opacity-70 backdrop-blur-md border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-8 w-full sm:w-96">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Checkout</h2>
        <form class="mt-4">
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="name">Full Name</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="name" placeholder="John Doe" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="email">Email Address</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="email" id="email" placeholder="[email protected]" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="address">Shipping Address</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="address" placeholder="123 Main St" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="card">Credit Card Number</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="card" placeholder="1234 5678 9012 3456" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="expiry">Expiry Date</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="expiry" placeholder="MM/YY" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="cvv">CVV</label>
                <input class="mt-1 block w-full p-2 bg-transparent border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="cvv" placeholder="123" required>
            </div>
            <img class="my-4 rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Random placeholder"/>
            <div class="flex justify-between items-center">
                <button class="w-full bg-blue-600 text-white rounded-lg py-2 px-4 hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300" type="submit">Pay Now</button>
                <div>
                    <img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                </div>
            </div>
        </form>
    </div>
</div>