Glassmorphism Checkout フォーム コンポーネント
アーストーンの配色、適度な複雑さ、ダークテーマをサポートするレスポンシブデザインのGlassmorphismチェックアウトフォームコンポーネント。ブログ/コンテンツの目的に適しています。
HTMLコード
<div class="min-h-screen bg-stone-100 py-6 flex flex-col justify-center sm:py-12 dark:bg-stone-900">
<div class="relative py-3 sm:max-w-xl sm:mx-auto">
<div class="absolute inset-0 bg-gradient-to-r from-stone-400 to-stone-600 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"></div>
<div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20 dark:bg-stone-800 dark:text-stone-200 backdrop-filter backdrop-blur-xl bg-opacity-20 dark:bg-opacity-10">
<div class="max-w-md mx-auto">
<div>
<h1 class="text-2xl font-semibold text-stone-800 dark:text-stone-100">Checkout Form</h1>
</div>
<div class="divide-y divide-stone-200">
<div class="py-8 text-base leading-6 space-y-4 text-stone-700 sm:text-lg sm:leading-7 dark:text-stone-300">
<div class="relative">
<input autocomplete="off" id="email" name="email" type="text" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-Rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Email address" />
<label for="email" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">Email Address</label>
</div>
<div class="relative">
<input autocomplete="off" id="password" name="password" type="password" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Password" />
<label for="password" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">Card Number</label>
</div>
<div class="relative">
<input autocomplete="off" id="password" name="password" type="password" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Password" />
<label for="password" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">Expiry Date</label>
</div>
<div class="relative">
<input autocomplete="off" id="password" name="password" type="password" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Password" />
<label for="password" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">CVV</label>
</div>
<div class="relative">
<button class="bg-stone-600 text-white rounded-md px-6 py-2 dark:bg-stone-700">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>関連コンポーネント
チェックアウトフォームコンポーネント
Glassmorphism デザイン、単色の配色、ダークテーマのサポートを備えたシンプルでレスポンシブなチェックアウトフォームコンポーネントで、Tailwind CSS を使用して構築されています。
チェックアウトフォームコンポーネント
Neumorphism デザイン、単色配色、ダークモードのサポート、および画像プレースホルダーを備えた、シンプルで応答性の高いチェックアウトフォームコンポーネント。
Skeuomorphic 単色複素数チェックアウトフォーム
ポートフォリオに適した、単色デザインの複雑で応答性の高いスキューモーフィックチェックアウトフォーム。Tailwind CSS を使用したダーク テーマのサポートが含まれています。グラデーションの背景、微妙な影、物理要素に似た入力フィールドを使用します。