CCHub Logo CCHub Tailwind Collection
コンポーネント 認証コンポーネント 認証コンポーネント

認証コンポーネント

マイクロインタラクションで設計されたレスポンシブでインタラクティブなログインおよびサインアップコンポーネントで、ダークテーマをサポートするブログコンテンツインターフェイスに補色を使用します。

プレビュー

HTMLコード 

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
    <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white text-center">Welcome Back!</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" class="mt-1 block w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-600 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-500 transition-all duration-300 ease-in-out" placeholder="[email protected]" required />
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" class="mt-1 block w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-600 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-500 transition-all duration-300 ease-in-out" placeholder="••••••••" required />
            </div>
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <input type="checkbox" id="remember" class="mr-2 leading-tight">
                    <label for="remember" class="text-gray-700 dark:text-gray-300">Remember me</label>
                </div>
                <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Forgot Password?</a>
            </div>
            <button class="w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400">Login</button>
        </form>
        <div class="mt-6 text-center">
            <span class="text-gray-700 dark:text-gray-300">Don't have an account? </span>
            <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Sign Up</a>
        </div>
    </div>
</div>

関連コンポーネント

スキューモーフィック認証コンポーネント

トライアドカラースキーム、中程度の複雑さ、レスポンシブデザイン、およびダークモードをサポートするスキューモーフィック認証コンポーネント。ポートフォリオの目的で設計されています。Tailwind CSSを使用します。

開ける

認証コンポーネント

ダークモードUI用に設計されたレスポンシブ認証コンポーネントで、Tailwind CSSスタイルを使用したログインおよびサインアップフォームを備えています。

開ける

認証コンポーネント

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

開ける