ニューモーフィズムログインフォーム
Neumorphism スタイルでデザインされたログインフォームコンポーネントで、レスポンシブデザインと Tailwind CSS を使用したダークテーマのサポートが特徴です。
HTMLコード
<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 w-96">
<h1 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-100">Login</h1>
<form>
<div class="mb-4">
<label for="email" class="block text-gray-700 dark:text-gray-200">Email</label>
<input type="email" id="email" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label for="password" class="block text-gray-700 dark:text-gray-200">Password</label>
<input type="password" id="password" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="••••••••" required />
</div>
<div class="mt-6">
<button type="submit" class="w-full py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300">Login</button>
</div>
</form>
</div>
</div>
関連コンポーネント
ログインフォームコンポーネント
アースカラー、マテリアルデザインの影響を受けた複雑でレスポンシブなログインフォームコンポーネントで、ビジネス/企業のWebサイトに適しており、ダークモードのサポートが含まれています。
ログインフォームコンポーネント
サイバーパンクの美学とパステルカラーのネオンアクセントを備えた、ファッション/美容ブランド向けに設計された、シンプルで応答性の高いログインフォームコンポーネント。ダークモードのサポートが含まれています。
ミニマリストEコマースログインフォーム
パステルカラーのミニマリストでフラットなデザインのログインフォームで、eコマースサイト向けに設計されています。シンプルでレスポンシブで、Tailwind CSSを使用したダークモードをサポートしています。