CCHub Logo CCHub Tailwind Collection
コンポーネント 認証コンポーネント AuthComponent (英語)

AuthComponent (英語)

Tailwind CSS で設計されたスキューモーフィック認証コンポーネントで、レスポンシブ エフェクトとダーク テーマのサポートが特徴です。

プレビュー

HTMLコード 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="max-w-md w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">Welcome Back</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 font-semibold mb-2" for="email">Email</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700" id="email" type="email" placeholder="[email protected]">
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300 font-semibold 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-300 leading-tight focus:outline-none focus:shadow-outline dark:bg-gray-700" id="password" type="password" placeholder="********">
            </div>
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-400">
                    <label class="ml-2 block text-gray-700 dark:text-gray-300">Remember Me</label>
                </div>
                <a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">Forgot Password?</a>
            </div>
            <div>
                <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Login</button>
            </div>
        </form>
        <div class="mt-6 text-center">
            <p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sign Up</a></p>
        </div>
        <div class="mt-6 text-center border-t pt-4">
            <p class="text-gray-600 dark:text-gray-400 text-sm">or login with</p>
            <div class="flex justify-center mt-2">
                <img class="h-8 w-8 rounded-full mx-2" src="https://picsum.photos/200/200" alt="Random user avatar">
                <img class="h-8 w-8 rounded-full mx-2" src="https://picsum.photos/200/201" alt="Random user avatar">
                <img class="h-8 w-8 rounded-full mx-2" src="https://picsum.photos/200/202" alt="Random user avatar">
            </div>
        </div>
    </div>
</div>

関連コンポーネント

認証コンポーネント

Neumorphicが設計したeコマース用の認証コンポーネントで、鮮やかな色、ダークテーマのサポート、レスポンシブデザインを備えています。

開ける

Authentication_Components_Component

Tailwind CSSを使用したマイクロインタラクション、補色配色、ダークテーマのサポートを備えたソーシャルメディア用のシンプルで応答性の高い認証コンポーネント。

開ける

認証コンポーネント

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

開ける