マテリアルEarthToneLoginSignupComponent
アースカラーの配色、フォーム間のインタラクティブな切り替えによる適度な複雑さ、ダークモードをサポートするダッシュボード用に設計された、レスポンシブマテリアルデザインスタイルのログインおよびサインアップコンポーネント。
HTMLコード
<!DOCTYPE html>
<html lang='en' class='h-full bg-amber-50 dark:bg-gray-900'>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<title>Login / Signup Component</title>
<script src='https://cdn.tailwindcss.com'></script>
</head>
<body class='min-h-screen bg-amber-50 dark:bg-gray-900 flex items-center justify-center p-4'>
<div class='max-w-4xl w-full bg-stone-50 dark:bg-gray-800 rounded-lg shadow-2xl overflow-hidden grid grid-cols-1 md:grid-cols-2'>
<div class='hidden md:block'>
<img src='https://picsum.photos/id/1018/800/800' alt='Dashboard Illustration' class='object-cover w-full h-full' />
</div>
<div class='p-8'>
<input id='tabToggle' type='checkbox' class='peer sr-only' />
<div class='flex justify-center mb-6 space-x-4'>
<label for='tabToggle' class='cursor-pointer text-lg font-medium text-amber-700 peer-checked:text-stone-500 transition'>Login</label>
<label for='tabToggle' class='cursor-pointer text-lg font-medium text-stone-500 peer-checked:text-amber-700 transition'>Signup</label>
</div>
<form class='space-y-4 transition-all duration-300 ease-in peer-checked:hidden'>
<div>
<label for='loginEmail' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Email</label>
<input id='loginEmail' type='email' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
</div>
<div>
<label for='loginPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Password</label>
<input id='loginPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
</div>
<button type='submit' class='w-full py-2 px-4 bg-amber-700 text-white rounded-lg shadow hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 transition'>Login</button>
</form>
<form class='space-y-4 transition-all duration-300 ease-in hidden peer-checked:block'>
<div class='grid grid-cols-1 sm:grid-cols-2 gap-4'>
<div>
<label for='firstName' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>First Name</label>
<input id='firstName' type='text' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
</div>
<div>
<label for='lastName' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Last Name</label>
<input id='lastName' type='text' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
</div>
</div>
<div>
<label for='signupEmail' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Email</label>
<input id='signupEmail' type='email' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
</div>
<div class='grid grid-cols-1 sm:grid-cols-2 gap-4'>
<div>
<label for='signupPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Password</label>
<input id='signupPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
</div>
<div>
<label for='confirmPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Confirm Password</label>
<input id='confirmPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
</div>
</div>
<button type='submit' class='w-full py-2 px-4 bg-amber-700 text-white rounded-lg shadow hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 transition'>Sign Up</button>
</form>
</div>
</div>
</body>
</html>関連コンポーネント
ログイン/サインアップコンポーネント
マテリアルデザインの原則と、ダークテーマをサポートするビジネスおよび企業のWebサイト向けの単色の配色を使用した複雑なログイン/サインアップコンポーネント。
LoginSignupコンポーネント
ソーシャルメディアインターフェース用のNeumorphismスタイルとパステルカラースキームで設計されたレスポンシブログイン/サインアップコンポーネント。