チェックアウトフォームコンポーネント
スイス/インターナショナルタイポグラフィデザインの影響、落ち着いた配色、ダークモードのサポートを備えた、すっきりとしたミニマリストでレスポンシブなチェックアウトフォームコンポーネントで、金融や銀行のインターフェースに適しています。
HTMLコード
<div class="min-h-screen bg-gray-100 p-4 dark:bg-gray-900 flex items-center justify-center font-sans">
<div class="w-full max-w-4xl bg-white rounded-lg shadow-xl overflow-hidden dark:bg-gray-800 transition-colors duration-300">
<div class="p-6 md:p-8 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-2xl md:text-3xl font-bold text-gray-800 dark:text-gray-100 tracking-tight leading-tight mb-2">
<span class="text-blue-600 dark:text-blue-400">Secure</span> Checkout
</h2>
<p class="text-gray-600 dark:text-gray-400 text-sm md:text-base">Please fill in your details to complete your secure transaction.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6 md:p-8">
<div class="lg:col-span-2 space-y-6">
<!-- Contact Information -->
<section>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Contact Information</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
<input type="email" id="email" name="email" placeholder="[email protected]" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Phone Number (Optional)</label>
<input type="tel" id="phone" name="phone" placeholder="+1 (555) 123-4567" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
</div>
</section>
<!-- Shipping Address -->
<section>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Shipping Address</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
<div>
<label for="first-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">First Name</label>
<input type="text" id="first-name" name="first-name" placeholder="John" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
<div>
<label for="last-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Last Name</label>
<input type="text" id="last-name" name="last-name" placeholder="Doe" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
</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" name="address" placeholder="123 Main St" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-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" name="city" placeholder="Springfield" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</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" name="state" placeholder="IL" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
<div>
<label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Zip / Postcode</label>
<input type="text" id="zip" name="zip" placeholder="62704" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
</div>
</section>
<!-- Payment Information -->
<section>
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Payment Information</h3>
<div class="mb-4">
<label for="card-number" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Card Number</label>
<input type="text" id="card-number" name="card-number" placeholder="XXXX XXXX XXXX XXXX" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
<label for="expiration" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Expiration Date</label>
<input type="text" id="expiration" name="expiration" placeholder="MM/YY" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
<div>
<label for="cvc" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">CVC</label>
<input type="text" id="cvc" name="cvc" placeholder="CVC" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
<div class="sm:col-span-1">
<label for="card-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name on Card</label>
<input type="text" id="card-name" name="card-name" placeholder="John Doe" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:placeholder-gray-400">
</div>
</div>
</section>
</div>
<!-- Order Summary / Cart Details -->
<aside class="lg:col-span-1 border-t lg:border-t-0 lg:border-l border-gray-200 dark:border-gray-700 p-6 pt-8 lg:p-6 lg:pt-0">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Order Summary</h3>
<div class="space-y-4">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/seed/product1/80/80" alt="Product Image" class="w-16 h-16 rounded-md object-cover border border-gray-200 dark:border-gray-600">
<div>
<p class="text-gray-700 dark:text-gray-300 text-sm font-medium">Premium Finance Course</p>
<p class="text-gray-500 dark:text-gray-400 text-xs">Quantity: 1</p>
</div>
</div>
<span class="text-gray-700 dark:text-gray-300 text-sm font-semibold">$199.00</span>
</div>
<div class="flex justify-between items-center">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/seed/product2/80/80" alt="Product Image" class="w-16 h-16 rounded-md object-cover border border-gray-200 dark:border-gray-600">
<div>
<p class="text-gray-700 dark:text-gray-300 text-sm font-medium">Financial Planning Toolkit</p>
<p class="text-gray-500 dark:text-gray-400 text-xs">Quantity: 1</p>
</div>
</div>
<span class="text-gray-700 dark:text-gray-300 text-sm font-semibold">$49.00</span>
</div>
</div>
<div class="mt-6 space-y-2 border-t border-gray-200 dark:border-gray-700 pt-6">
<div class="flex justify-between text-gray-700 dark:text-gray-300 text-sm">
<span>Subtotal</span>
<span>$248.00</span>
</div>
<div class="flex justify-between text-gray-700 dark:text-gray-300 text-sm">
<span>Tax (8%)</span>
<span>$19.84</span>
</div>
<div class="flex justify-between text-gray-700 dark:text-gray-300 text-sm">
<span>Shipping</span>
<span>Free</span>
</div>
<div class="flex justify-between font-bold text-lg text-gray-800 dark:text-gray-100 pt-2">
<span>Total</span>
<span>$267.84</span>
</div>
</div>
<button type="submit" class="mt-8 w-full bg-blue-600 text-white py-3 px-4 rounded-md font-semibold text-base shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200">
Complete Purchase
</button>
<p class="text-center text-gray-500 dark:text-gray-400 text-xs mt-4">
Your information is secured with <span class="font-medium text-green-600 dark:text-green-400">256-bit encryption</span>.
</p>
</aside>
</div>
</div>
</div>関連コンポーネント
チェックアウトフォームコンポーネント
鮮やかな色とマイクロインタラクションを備えたレスポンシブチェックアウトフォームコンポーネントで、ダークテーマをサポートします。配送先住所、支払いの詳細、注文の概要のセクションが含まれており、すべてTailwind CSSでスタイル設定されており、複雑なeコマースエクスペリエンスを実現します。
チェックアウトフォームコンポーネント
複雑な紙/印刷物にインスパイアされた、ジュエルトーンのチェックアウトフォームコンポーネントで、ドキュメント/Wikiサイト向けに設計されており、完全な応答性とダークモードのサポートを特長としています。
ニューモーフィズムチェックアウトフォーム
ポートフォリオ Web サイトの類似の配色を持つ Neumorphism Checkout Form コンポーネント。ダークモードをサポートするレスポンシブデザインです。JavaScript コードは含まれず、Tailwind クラスを含む HTML のみが含まれています。