Formulaire de paiement

Composant du formulaire de paiement

Un composant de formulaire de paiement réactif avec des couleurs vives et des micro-interactions, prenant en charge le thème sombre. Il comprend des sections pour l’adresse de livraison, les détails de paiement et le récapitulatif de la commande, le tout stylisé avec Tailwind CSS pour une expérience de commerce électronique complexe.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gradient-to-br from-purple-500 to-indigo-600 dark:from-gray-900 dark:to-black p-4 sm:p-8 flex items-center justify-center">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden md:flex">
    <!-- Shipping Address Section -->
    <div class="md:w-1/2 p-6 sm:p-8">
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-white mb-6 animate-fade-in-down">
        <div class="flex items-center space-x-3">
          <svg class="w-8 h-8 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
          Shipping Address
        </div>
      </h2>
      <form class="space-y-5">
        <div>
          <label for="fullName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">Full Name</label>
          <input type="text" id="fullName" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="John Doe">
        </div>
        <div>
          <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">Address</label>
          <input type="text" id="address" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="123 Main St">
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
          <div>
            <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">City</label>
            <input type="text" id="city" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="Anytown">
          </div>
          <div>
            <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">ZIP Code</label>
            <input type="text" id="zip" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="12345">
          </div>
        </div>
      </form>
    </div>

    <!-- Payment and Order Summary Section -->
    <div class="md:w-1/2 p-6 sm:p-8 bg-indigo-50 dark:bg-gray-700">
      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-white mb-6 animate-fade-in-down">
        <div class="flex items-center space-x-3">
          <svg class="w-8 h-8 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
          Payment Details
        </div>
      </h2>
      <form class="space-y-5 mb-8">
        <div>
          <label for="cardNumber" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">Card Number</label>
          <input type="text" id="cardNumber" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="XXXX-XXXX-XXXX-XXXX">
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-5">
          <div class="sm:col-span-2">
            <label for="expiry" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">Expiry Date</label>
            <input type="text" id="expiry" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="MM/YY">
          </div>
          <div>
            <label for="cvv" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transform transition-all duration-300 ease-in-out origin-left focus-within:scale-105">CVV</label>
            <input type="text" id="cvv" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400 transform transition-all duration-300 ease-in-out hover:scale-[1.02] focus:scale-[1.03]" placeholder="123">
          </div>
        </div>
      </form>

      <h2 class="text-3xl font-extrabold text-gray-800 dark:text-white mb-6 animate-fade-in-down">
        <div class="flex items-center space-x-3">
          <svg class="w-8 h-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
          Order Summary
        </div>
      </h2>
      <div class="space-y-4 text-gray-700 dark:text-gray-300">
        <div class="flex justify-between items-center">
          <span>Subtotal</span>
          <span class="font-semibold text-lg">$150.00</span>
        </div>
        <div class="flex justify-between items-center">
          <span>Shipping</span>
          <span class="font-semibold text-lg">$10.00</span>
        </div>
        <div class="flex justify-between items-center border-t border-gray-200 dark:border-gray-600 pt-4">
          <span class="text-xl font-bold">Total</span>
          <span class="text-2xl font-extrabold text-green-600 dark:text-green-400">$160.00</span>
        </div>
      </div>

      <button class="mt-8 w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-green-300">
        Place Order (&#x1F680;)
      </button>
    </div>
  </div>
</div>

<style>
  @keyframes fade-in-down {
    0% {
      opacity: 0;
      transform: translateY(-20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .animate-fade-in-down {
    animation: fade-in-down 0.6s ease-out;
  }
</style>

Composant du formulaire de paiement

Un composant de formulaire de paiement minimaliste et plat pour un portfolio, avec des tons de terre, un design réactif, la prise en charge du mode sombre et de multiples éléments interactifs. Utilise HTML et Tailwind CSS.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 sm:p-8 flex items-center justify-center font-sans">
  <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 sm:p-8 lg:p-10 w-full max-w-md">
    <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 text-center">Checkout</h2>

    <!-- Progress Stepper -->
    <div class="flex justify-between items-center mb-8">
      <div class="text-center">
        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-green-500 text-white flex items-center justify-center mx-auto mb-1 text-sm sm:text-base">1</div>
        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Shipping</p>
      </div>
      <div class="flex-1 h-1 bg-gray-300 dark:bg-gray-700 mx-2"></div>
      <div class="text-center">
        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gray-300 dark:bg-gray-700 text-gray-600 dark:text-gray-400 flex items-center justify-center mx-auto mb-1 text-sm sm:text-base">2</div>
        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Payment</p>
      </div>
      <div class="flex-1 h-1 bg-gray-300 dark:bg-gray-700 mx-2"></div>
      <div class="text-center">
        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gray-300 dark:bg-gray-700 text-gray-600 dark:text-gray-400 flex items-center justify-center mx-auto mb-1 text-sm sm:text-base">3</div>
        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Review</p>
      </div>
    </div>

    <!-- Shipping Information Form -->
    <form>
      <div class="mb-4">
        <label for="fullName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>
        <input type="text" id="fullName" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="John Doe">
      </div>

      <div class="mb-4">
        <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Address</label>
        <input type="text" id="address" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="1234 Main St">
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
        <div>
          <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">City</label>
          <input type="text" id="city" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="Anytown">
        </div>
        <div>
          <label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">State / Province</label>
          <input type="text" id="state" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="CA">
        </div>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
        <div>
          <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Zip / Postal Code</label>
          <input type="text" id="zip" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="12345">
        </div>
        <div>
          <label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Country</label>
          <select id="country" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100">
            <option>United States</option>
            <option>Canada</option>
            <option>Mexico</option>
            <option>Other</option>
          </select>
        </div>
      </div>

      <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-300 ease-in-out">
        Continue to Payment
      </button>
    </form>

    <!-- Product Summary (Example, can be expanded) -->
    <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
      <h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-100">Order Summary</h3>
      <div class="flex justify-between mb-2">
        <span class="text-gray-600 dark:text-gray-400">Subtotal:</span>
        <span class="text-gray-800 dark:text-gray-100">$99.00</span>
      </div>
      <div class="flex justify-between mb-2">
        <span class="text-gray-600 dark:text-gray-400">Shipping:</span>
        <span class="text-gray-800 dark:text-gray-100">$7.00</span>
      </div>
      <div class="flex justify-between font-bold text-lg border-t border-gray-300 dark:border-gray-600 pt-2 mt-4">
        <span class="text-gray-800 dark:text-gray-100">Total:</span>
        <span class="text-gray-800 dark:text-gray-100">$106.00</span>
      </div>
    </div>

  </div>
</div>

Complexe monochromatique skeuomorphe Formulaire de paiement

Un formulaire de paiement skeuomorphe complexe et réactif au design monochromatique, adapté à un portfolio. Inclut la prise en charge du thème sombre à l’aide de Tailwind CSS. Utilise des arrière-plans dégradés, des ombres subtiles et des champs de saisie qui ressemblent à des éléments physiques.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
  <div class="max-w-2xl w-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700 rounded-xl shadow-2xl p-8">
    <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-8 text-center">Complete Your Order</h2>

    <form>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <div class="relative">
          <label for="firstName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">First Name</label>
          <input type="text" id="firstName" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
                 placeholder="John">
        </div>

        <div class="relative">
          <label for="lastName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Last Name</label>
          <input type="text" id="lastName" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
                 placeholder="Doe">
        </div>
      </div>

      <div class="mb-6">
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
               placeholder="[email protected]">
      </div>

      <div class="mb-6">
        <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Shipping Address</label>
        <input type="text" id="address" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
               placeholder="123 Main St">
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        <div>
          <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">City</label>
          <input type="text" id="city" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
                 placeholder="Anytown">
        </div>
        <div>
          <label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">State</label>
          <input type="text" id="state" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
                 placeholder="CA">
        </div>
        <div>
          <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Zip Code</label>
          <input type="text" id="zip" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
                 placeholder="90210">
        </div>
      </div>

      <div class="mb-6">
        <label for="cardNumber" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Credit Card Number</label>
        <input type="text" id="cardNumber" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
               placeholder="**** **** **** ****">
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div>
          <label for="expiryDate" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Expiry Date</label>
          <input type="text" id="expiryDate" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
                 placeholder="MM/YY">
        </div>
        <div>
          <label for="cvc" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">CVC</label>
          <input type="text" id="cvc" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
                 placeholder="123">
        </div>
        <div class="flex items-end">
          <img src="https://www.picsum.photos/id/1084/100/60" alt="Credit Card Placeholder" class="rounded-lg shadow-md">
        </div>
      </div>

      <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg shadow-xl transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">
        Place Order
      </button>
    </form>
  </div>
</div>

Composant du formulaire de paiement

Un composant de formulaire de paiement simple et réactif avec la conception Neumorphism, la palette de couleurs monochromatiques, la prise en charge du mode sombre et des espaces réservés aux images.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-800 py-6 flex flex-col justify-center sm:py-12">
  <div class="relative py-3 sm:max-w-xl sm:mx-auto">
    <div class="relative px-4 py-10 bg-white dark:bg-gray-700 mx-8 md:mx-0 shadow-lg rounded-lg sm:p-10">
      <div class="max-w-md mx-auto">
        <div class="flex items-center space-x-5">
          <div class="h-14 w-14 bg-gray-200 dark:bg-gray-600 rounded-full flex flex-shrink-0 justify-center items-center text-gray-500 dark:text-gray-400 text-2xl font-mono"></div>
          <div class="block pl-2 font-semibold text-xl self-start text-gray-700 dark:text-gray-200">
            <h2 class="leading-relaxed">Checkout</h2>
          </div>
        </div>
        <div class="divide-y divide-gray-200 dark:divide-gray-600">
          <div class="py-8 text-base leading-6 space-y-4 text-gray-700 dark:text-gray-300 sm:opacity-100 ease-in-out">
            <div class="flex flex-col">
              <label class="leading-loose">Full Name</label>
              <input type="text" class="px-4 py-2 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 dark:bg-gray-600 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="John Doe">
            </div>
            <div class="flex flex-col">
              <label class="leading-loose">Card Number</label>
              <input type="text" class="px-4 py-2 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 dark:bg-gray-600 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="1234 5678 9012 3456">
            </div>
            <div class="flex items-center space-x-4">
              <div class="flex flex-col">
                <label class="leading-loose">Expiry</label>
                <div class="relative focus-within:text-gray-600 text-gray-400">
                  <input type="text" class="pr-4 pl-10 py-2 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 dark:bg-gray-600 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="MM/YY">
                  <div class="absolute left-3 top-1/2 transform -translate-y-1/2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                  </div>
                </div>
              </div>
              <div class="flex flex-col">
                <label class="leading-loose">CVV</label>
                <div class="relative focus-within:text-gray-600 text-gray-400">
                  <input type="text" class="pr-4 pl-10 py-2 border border-gray-300 dark:border-gray-500 rounded-lg focus:outline-none focus:ring-1 focus:ring-gray-400 focus:border-gray-400 dark:bg-gray-600 dark:text-white dark:focus:ring-gray-500 dark:focus:border-gray-500" placeholder="123">
                  <div class="absolute left-3 top-1/2 transform -translate-y-1/2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a2 2 0 00-2-2H8a2 2 0 00-2 2v3m6 0v-3"></path>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="pt-4 flex items-center space-x-4">
            <button class="flex justify-center items-center w-full text-gray-900 dark:text-gray-100 px-4 py-3 rounded-md focus:outline-none bg-gray-200 dark:bg-gray-600 shadow-md hover:bg-gray-300 dark:hover:bg-gray-700">
              Checkout
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Composant du formulaire de paiement

Un composant de formulaire de paiement simple et réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="min-h-screen flex items-center justify-center p-6 bg-gray-900">
  <div class="w-full max-w-md bg-gray-800 p-8 rounded-md shadow-md">
    <h2 class="text-2xl font-bold text-white mb-6">Checkout</h2>
    <form>
      <div class="mb-4">
        <label for="name" class="block text-white text-sm font-bold mb-2">Name</label>
        <input type="text" id="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-white 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 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
      </div>
      <div class="mb-4">
        <label for="card" class="block text-white text-sm font-bold mb-2">Card Number</label>
        <input type="text" id="card" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
      </div>
      <div class="mb-6">
        <label for="expiry" class="block text-white text-sm font-bold mb-2">Expiry Date</label>
        <input type="text" id="expiry" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-700 text-white border-gray-600">
      </div>
      <div class="flex items-center justify-between">
        <button type="button" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Submit</button>
      </div>
    </form>
  </div>
</div>

Composant du formulaire de paiement

Un composant de formulaire de paiement complexe et réactif avec les principes de conception matérielle, la palette de couleurs en niveaux de gris et la prise en charge du mode sombre, mis en œuvre à l’aide de Tailwind CSS pour les interfaces de médias sociaux.

Ouvrir l’aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 w-full max-w-md">
    <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Checkout</h2>
    <form>
      <div class="mb-4">
        <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Full Name</label>
        <input type="text" id="name" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
        <input type="email" id="email" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
      </div>
      <div class="mb-4">
        <label for="card-number" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Card Number</label>
        <input type="text" id="card-number" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
      </div>
      <div class="grid grid-cols-2 gap-4 mb-4">
        <div>
          <label for="expiry-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Expiry Date</label>
          <input type="text" id="expiry-date" placeholder="MM/YY" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
        </div>
        <div>
          <label for="cvv" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">CVV</label>
          <input type="text" id="cvv" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
        </div>
      </div>
      <div class="mb-6">
        <label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Country</label>
        <select id="country" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-gray-500 focus:border-gray-500 dark:bg-gray-700 dark:text-white">
          <option value="">Select Country</option>
          <option value="us">United States</option>
          <option value="ca">Canada</option>
          <!-- Add more countries as needed -->
        </select>
      </div>
      <button type="submit" class="w-full bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 py-2 px-4 rounded-md shadow-md hover:bg-gray-900 dark:hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">Pay Now</button>
    </form>
  </div>
</div>

Composant du formulaire de paiement

Un formulaire de paiement réactif avec un design minimaliste, une interface riche et une palette de couleurs triadiques, prenant en charge le thème sombre.

Ouvrir l’aperçu

                <div class="max-w-md mx-auto mt-10 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold 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">Name</label>
            <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 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</label>
            <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 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">Address</label>
            <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 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="city">City</label>
            <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="city" placeholder="Your City" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="state">State</label>
            <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="state" placeholder="Your State" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300" for="zip">ZIP Code</label>
            <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="zip" placeholder="12345" 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 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="card" placeholder="1234 5678 9012 3456" required>
        </div>
        <div class="mb-4 flex justify-between">
            <div class="w-1/2 mr-2">
                <label class="block text-gray-700 dark:text-gray-300" for="expiry">Expiry Date</label>
                <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="expiry" placeholder="MM/YY" required>
            </div>
            <div class="w-1/2 ml-2">
                <label class="block text-gray-700 dark:text-gray-300" for="cvc">CVC</label>
                <input class="mt-1 p-2 w-full border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" type="text" id="cvc" placeholder="123" required>
            </div>
        </div>
        <div class="mb-4">
            <label class="flex items-center">
                <input class="mr-2 leading-tight" type="checkbox" id="terms" required>
                <span class="text-gray-700 dark:text-gray-300">I agree to the terms and conditions</span>
            </label>
        </div>
        <button type="submit" class="w-full mt-4 p-2 bg-blue-600 dark:bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-700 dark:hover:bg-blue-400 transition duration-300">Complete Purchase</button>
    </form>
    <div class="mt-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Summary</h3>
        <ul class="mt-2 text-gray-600 dark:text-gray-400">
            <li>Item 1 - $29.99</li>
            <li>Item 2 - $49.99</li>
            <li>Total - $79.98</li>
        </ul>
    </div>
</div>