チェックアウトフォーム

チェックアウトフォームコンポーネント

鮮やかな色とマイクロインタラクションを備えたレスポンシブチェックアウトフォームコンポーネントで、ダークテーマをサポートします。配送先住所、支払いの詳細、注文の概要のセクションが含まれており、すべてTailwind CSSでスタイル設定されており、複雑なeコマースエクスペリエンスを実現します。

プレビューを開く

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

チェックアウトフォームコンポーネント

ポートフォリオ用のミニマルでフラットなデザインのチェックアウトフォームコンポーネントで、アースカラー、レスポンシブデザイン、ダークモードのサポート、複数のインタラクティブ要素を備えています。HTMLとTailwind CSSを使用します。

プレビューを開く

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

Skeuomorphic 単色複素数チェックアウトフォーム

ポートフォリオに適した、単色デザインの複雑で応答性の高いスキューモーフィックチェックアウトフォーム。Tailwind CSS を使用したダークテーマのサポートが含まれています。グラデーションの背景、微妙な影、物理要素に似た入力フィールドを使用します。

プレビューを開く

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

チェックアウトフォームコンポーネント

Neumorphism デザイン、単色配色、ダークモードのサポート、および画像プレースホルダーを備えた、シンプルで応答性の高いチェックアウトフォームコンポーネント。

プレビューを開く

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

チェックアウトフォームコンポーネント

Tailwind CSSを使用したダークモードをサポートするシンプルでレスポンシブなチェックアウトフォームコンポーネント。

プレビューを開く

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

チェックアウトフォームコンポーネント

マテリアルデザインの原則、グレースケールの配色、ダークモードのサポートを備えた、ソーシャルメディアインターフェース用のTailwind CSSを使用して実装された、複雑で応答性の高いチェックアウトフォームコンポーネント。

プレビューを開く

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

チェックアウトフォームコンポーネント

ミニマリストデザイン、豊富なインターフェース、トライアドカラースキームを備えたレスポンシブチェックアウトフォームで、ダークテーマをサポートします。

プレビューを開く

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

ミニマリストグレースケールチェックアウトフォーム

Tailwind CSSを使用したダークモードをサポートするビジネス/企業Webサイト向けの、複雑でレスポンシブ、グレースケール、ミニマリストのチェックアウトフォーム。

プレビューを開く

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md w-full space-y-8 bg-white dark:bg-gray-800 p-10 rounded-xl shadow-lg">
    <div>
      <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
        Checkout
      </h2>
    </div>
    <form class="mt-8 space-y-6" action="#" method="POST">
      <div class="rounded-md shadow-sm -space-y-px">
        <div>
          <label for="first-name" class="sr-only">First Name</label>
          <input id="first-name" name="first-name" type="text" autocomplete="given-name" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-t-md focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm" placeholder="First Name">
        </div>
        <div>
          <label for="last-name" class="sr-only">Last Name</label>
          <input id="last-name" name="last-name" type="text" autocomplete="family-name" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm" placeholder="Last Name">
        </div>
        <div>
          <label for="email-address" class="sr-only">Email address</label>
          <input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm" placeholder="Email address">
        </div>
        <div>
          <label for="address" class="sr-only">Address</label>
          <input id="address" name="address" type="text" autocomplete="street-address" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm" placeholder="Address">
        </div>
        <div>
          <label for="city" class="sr-only">City</label>
          <input id="city" name="city" type="text" autocomplete="address-level2" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm" placeholder="City">
        </div>
        <div>
          <label for="state" class="sr-only">State / Province</label>
          <input id="state" name="state" type="text" autocomplete="address-level1" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm" placeholder="State / Province">
        </div>
        <div>
          <label for="zip" class="sr-only">Zip / Postal Code</label>
          <input id="zip" name="zip" type="text" autocomplete="postal-code" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-b-md focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm" placeholder="Zip / Postal Code">
        </div>
      </div>

      <div class="rounded-md shadow-sm -space-y-px">
        <div>
          <label for="card-number" class="sr-only">Card Number</label>
          <input id="card-number" name="card-number" type="text" autocomplete="cc-number" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-t-md focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm" placeholder="Card Number">
        </div>
        <div class="flex -space-x-px">
          <div class="w-1/2">
            <label for="expiration-date" class="sr-only">Expiration Date (MM/YY)</label>
            <input id="expiration-date" name="expiration-date" type="text" autocomplete="cc-exp" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm" placeholder="Expiration Date (MM/YY)">
          </div>
          <div class="w-1/2">
            <label for="cvc" class="sr-only">CVC</label>
            <input id="cvc" name="cvc" type="text" autocomplete="cc-csc" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm" placeholder="CVC">
          </div>
        </div>
        <div>
          <label for="card-name" class="sr-only">Name on Card</label>
          <input id="card-name" name="card-name" type="text" autocomplete="cc-name" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-b-md focus:outline-none focus:ring-black focus:border-black focus:z-10 sm:text-sm" placeholder="Name on Card">
        </div>
      </div>

      <div>
        <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-gray-800 hover:bg-gray-900 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black dark:focus:ring-white">
          Pay Now
        </button>
      </div>
    </form>
  </div>
</div>

チェックアウトフォームコンポーネント

鮮やかな色、適度な複雑さ、レスポンシブデザインのダークモードチェックアウトフォームで、ソーシャルメディアインターフェイスに適しています。

プレビューを開く

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

ニューモーフィズムチェックアウトフォーム

ポートフォリオ Web サイトの類似の配色を持つ Neumorphism Checkout Form コンポーネント。ダークモードをサポートするレスポンシブデザインです。JavaScript コードは含まれず、Tailwind クラスを含む HTML のみが含まれています。

プレビューを開く

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8 flex items-center justify-center">
  <div class="max-w-md w-full space-y-8 bg-gray-200 dark:bg-gray-800 p-10 rounded-xl shadow-xl">
    <div>
      <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
        Checkout
      </h2>
    </div>
    <form class="mt-8 space-y-6" action="#" method="POST">
      <input type="hidden" name="remember" value="true">
      <div class="rounded-md shadow-sm -space-y-px">
        <div>
          <label for="email-address" class="sr-only">Email address</label>
          <input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 text-gray-900 dark:text-white rounded-t-md focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 focus:z-10 sm:text-sm bg-gray-100 dark:bg-gray-700"
            placeholder="Email address">
        </div>
        <div>
          <label for="card-number" class="sr-only">Card number</label>
          <input id="card-number" name="card-number" type="text" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 text-gray-900 dark:text-white focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 focus:z-10 sm:text-sm bg-gray-100 dark:bg-gray-700"
            placeholder="Card number">
        </div>
        <div class="flex">
          <div class="w-1/2">
            <label for="expiration-date" class="sr-only">Expiration date</label>
            <input id="expiration-date" name="expiration-date" type="text" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 text-gray-900 dark:text-white rounded-bl-md focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 focus:z-10 sm:text-sm bg-gray-100 dark:bg-gray-700"
              placeholder="MM/YY">
          </div>
          <div class="w-1/2">
            <label for="cvc" class="sr-only">CVC</label>
            <input id="cvc" name="cvc" type="text" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 text-gray-900 dark:text-white rounded-br-md focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 focus:z-10 sm:text-sm bg-gray-100 dark:bg-gray-700"
              placeholder="CVC">
          </div>
        </div>
      </div>

      <div>
        <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-cyan-600 hover:bg-cyan-700专注:outline-none focus:ring-2 focus:ring- offset-2 focus:ring-cyan-500 shadow-md">
          Pay Now
        </button>
      </div>
    </form>
  </div>
</div>

カテゴリ

チェックアウトフォーム