登録フォームコンポーネント
Neumorphism デザイン、グレースケール カラー スキーム、適度な複雑さ、Tailwind CSS を使用したレスポンシブ ダーク テーマのサポートを備えた登録フォーム コンポーネント。
HTMLコード
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-6 flex flex-col justify-center sm:py-12">
<div class="relative py-3 sm:max-w-xl sm:mx-auto">
<div class="absolute inset-0 bg-gradient-to-r from-gray-300 to-gray-600 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl dark:from-gray-700 dark:to-gray-900"></div>
<div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20 dark:bg-gray-800">
<div class="max-w-md mx-auto">
<div>
<h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Register</h1>
</div>
<div class="divide-y divide-gray-200 dark:divide-gray-700">
<div class="py-8 text-base leading-6 space-y-4 text-gray-700 sm:opacity-100 dark:text-gray-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-gray-300 text-gray-900 focus:outline-none focus:borer-rose-600 dark:border-gray-600 dark:text-white dark:focus:borer-gray-500" placeholder="Email address" />
<label for="email" class="absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 transition-all after:content-['*'] after:ml-0.5 after:text-red-500 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500">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-gray-300 text-gray-900 focus:outline-none focus:borer-rose-600 dark:border-gray-600 dark:text-white dark:focus:borer-gray-500" placeholder="Password" />
<label for="password" class="absolute left-0 -top-3.5 text-gray-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-2 transition-all after:content-['*'] after:ml-0.5 after:text-red-500 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500">Password</label>
</div>
<div class="relative">
<button class="bg-gray-500 text-white rounded-md px-2 py-1 dark:bg-gray-700">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>関連コンポーネント
登録フォームコンポーネント
glassmorphism スタイル、アース トーンの配色、およびダーク テーマのサポートを備えたレスポンシブ登録フォーム コンポーネント。ソーシャルメディアプラットフォーム向けに設計されており、シンプルなレイアウトと最小限の要素を備えています。スタイル設定に Tailwind CSS を使用し、サンプルの画像プレースホルダーが含まれています。