認証コンポーネント

ダークモードのサポート、ダーク背景のTailwind CSS、ログインおよびサインアップフォーム、UI要素のランダムなプレースホルダー画像を使用したレスポンシブ認証コンポーネント。

プレビュー

HTMLコード

<div class="flex items-center justify-center min-h-screen bg-gray-900 text-white">
    <div class="w-full max-w-sm">
        <div class="mb-6 text-center">
            <h1 class="text-2xl font-bold">Authentication</h1>
            <p class="text-gray-400">Please sign in or create an account</p>
        </div>
        <div class="bg-gray-800 rounded-lg shadow-lg p-6">
            <form>
                <div class="mb-4">
                    <label for="email" class="block mb-2 text-sm font-medium">Email</label>
                    <input type="email" id="email" placeholder="[email protected]" class="w-full px-3 py-2 text-gray-900 bg-gray-200 rounded focus:outline-none focus:ring focus:ring-blue-500" required>
                </div>
                <div class="mb-4">
                    <label for="password" class="block mb-2 text-sm font-medium">Password</label>
                    <input type="password" id="password" placeholder="********" class="w-full px-3 py-2 text-gray-900 bg-gray-200 rounded focus:outline-none focus:ring focus:ring-blue-500" required>
                </div>
                <div class="flex items-center justify-between mb-6">
                    <div>
                        <input type="checkbox" id="remember" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <label for="remember" class="ml-2 text-sm">Remember me</label>
                    </div>
                    <a href="#" class="text-sm text-blue-500 hover:underline">Forgot password?</a>
                </div>
                <button type="submit" class="w-full py-2 mt-2 text-white bg-blue-600 rounded hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-500">Sign In</button>
            </form>
            <div class="mt-4 text-center">
                <p class="text-gray-400">or</p>
                <button class="w-full py-2 mt-2 text-white bg-gray-700 rounded hover:bg-gray-600 focus:outline-none">Sign Up</button>
            </div>
        </div>
        <div class="mt-6 text-center">
            <img src="https://picsum.photos/100/100" alt="Random placeholder" class="rounded-full mx-auto mb-2">
            <p class="text-gray-400 text-sm">Random User Avatar</p>
        </div>
    </div>
</div>

認証コンポーネント

プレビュー

HTMLコード

関連コンポーネント

認証コンポーネント

認証コンポーネント

認証コンポーネント