CCHub Logo CCHub Tailwind Collection
コンポーネント ログインフォーム ログイン・フォーム・コンポーネント 37

ログイン・フォーム・コンポーネント 37

マテリアルデザインスタイルで設計されたレスポンシブログインフォームコンポーネントで、Tailwind CSSを使用し、ダークモードをサポートします。

プレビュー

HTMLコード 

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-96 p-6">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white text-center mb-6">Login</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="username">Username</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Enter your username">
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="password">Password</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="Enter your password">
            </div>
            <div class="flex items-center justify-between">
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Login</button>
                <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">Forgot Password?</a>
            </div>
        </form>
        <div class="mt-4 text-center">
            <p class="text-gray-600 dark:text-gray-300 text-sm">Or login with</p>
            <div class="flex justify-center mt-2">
                <img class="h-8 w-8 rounded-full border-2 border-gray-600 dark:border-gray-400" src="https://picsum.photos/seed/user1/40/40" alt="User Avatar">
                <img class="h-8 w-8 rounded-full border-2 border-gray-600 dark:border-gray-400 ml-2" src="https://picsum.photos/seed/user2/40/40" alt="User Avatar">
                <img class="h-8 w-8 rounded-full border-2 border-gray-600 dark:border-gray-400 ml-2" src="https://picsum.photos/seed/user3/40/40" alt="User Avatar">
            </div>
        </div>
    </div>
</div>

関連コンポーネント

ログインフォームコンポーネント

シンプルで応答性の高いログインフォームは、鮮やかな配色を使用して現実世界の要素を模倣するスキューモーフィックスタイルで設計されています。ソーシャルメディアのインターフェースに適しており、ダークモードをサポートしています。

開ける

スキューモーフィックログインフォーム

ダッシュボード用のトライアドカラーを使用したシンプルなSkeuomorphicログインフォームで、レスポンシブデザインとTailwind CSSを使用したダークモードのサポートが特徴です。

開ける

スキューモーフィックログインフォーム

Skeuomorphismデザイン、単色の配色、適度な複雑さを備えたレスポンシブログインフォームで、ソーシャルメディアプラットフォーム向けに設計されています。Tailwind CSS を使用したダーク モードのサポートが含まれています。

開ける