CCHub Logo CCHub Tailwind Collection
コンポーネント ソーシャルログイン ニューモーフィックグレースケールソーシャルログイン

ニューモーフィックグレースケールソーシャルログイン

グレースケールのNeumorphismデザインスタイルを持つレスポンシブソーシャルログインコンポーネント。ソーシャルプロバイダーのボタン、セパレーター、サインアップ/パスワードを忘れた場合のリンクが含まれています。Tailwind の dark: プレフィックスを使用したダーク モードをサポートします。ダッシュボード環境向けに設計されています。

プレビュー

HTMLコード 

<div class="max-w-sm mx-auto p-6 rounded-xl bg-gray-200 dark:bg-gray-800 shadow-[8px_8px_16px_#bebebe,-8px_-8px_16px_#ffffff] dark:shadow-[8px_8px_16px_#303030,-8px_-8px_16px_#505050]">
    <h2 class="text-2xl font-bold text-center text-gray-700 dark:text-gray-300 mb-6">Social Login</h2>

    <div class="space-y-4">
        <button class="w-full flex items-center justify-center px-4 py-3 rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 font-semibold shadow-[6px_6px_12px_#bebebe,-6px_-6px_12px_#ffffff] dark:shadow-[6px_6px_12px_#303030,-6px_-6px_12px_#505050] hover:shadow-md focus:outline-none focus:ring-2 focus:ring-gray-400/50 active:shadow-[inset_6px_6px_12px_#bebebe,inset_-6px_-6px_12px_#ffffff] dark:active:shadow-[inset_6px_6px_12px_#303030,inset_-6px_-6px_12px_#505050] transition-all duration-200 ease-in-out">
            <!-- Using simple text/icons for demonstration -->
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                <path d="M7 10v4h3v7h4v-7h3l1-4h-4V8c0-1 0-2 2-2h3V3H7a5 5 0 00-5 5v2z"></path>
            </svg>
            Login with Facebook
        </button>

        <button class="w-full flex items-center justify-center px-4 py-3 rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 font-semibold shadow-[6px_6px_12px_#bebebe,-6px_-6px_12px_#ffffff] dark:shadow-[6px_6px_12px_#303030,-6px_-6px_12px_#505050] hover:shadow-md focus:outline-none focus:ring-2 focus:ring-gray-400/50 active:shadow-[inset_6px_6px_12px_#bebebe,inset_-6px_-6px_12px_#ffffff] dark:active:shadow-[inset_6px_6px_12px_#303030,inset_-6px_-6px_12px_#505050] transition-all duration-200 ease-in-out">
             <!-- Using simple text/icons for demonstration -->
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                <path d="M20.283 10.356h-8.327v3.451h4.792c-.446 2.193-2.313 3.453-4.792 3.453a5.27 5.27 0 01-5.279-5.28c0-2.917 2.357-5.274 5.279-5.274a5.024 5.024 0 013.031 1.048l3.18-3.179A9.922 9.922 0 0012.004 2c-5.404 0-9.792 4.388-9.792 9.792s4.388 9.792 9.792 9.792c5.404 0 9.328-3.918 9.328-9.792 0-.79-.137-1.56-.395-2.29z"></path>
            </svg>
            Login with Google
        </button>
         <button class="w-full flex items-center justify-center px-4 py-3 rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 font-semibold shadow-[6px_6px_12px_#bebebe,-6px_-6px_12px_#ffffff] dark:shadow-[6px_6px_12px_#303030,-6px_-6px_12px_#505050] hover:shadow-md focus:outline-none focus:ring-2 focus:ring-gray-400/50 active:shadow-[inset_6px_6px_12px_#bebebe,inset_-6px_-6px_12px_#ffffff] dark:active:shadow-[inset_6px_6px_12px_#303030,inset_-6px_-6px_12px_#505050] transition-all duration-200 ease-in-out">
             <!-- Using simple text/icons for demonstration -->
            <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
                <path d="M22.46 6c-.82.38-1.71.64-2.65.76.95-.56 1.68-1.46 2.02-2.55-.94.56-1.98.96-3.09 1.18A5.112 5.112 0 0017.34 4c-3.37 0-6.1 2.73-6.1 6.1 0 .48.05.95.14 1.4a17.36 17.36 0 01-12.6-6.35 6.14 6.14 0 001.89 8.11 6.19 6.19 0 01-2.76-.76v.08c0 2.96 2.11 5.43 4.9 6-.52.14-1.07.21-1.64.21-.4 0-.79-.04-1.17-.11.78 2.43 3.04 4.19 5.74 4.24a12.95 12.95 0 01-8.06 2.75c-.53 0-1.06-.03-1.58-.09 10.94 6.96 23.17 3.59 27.65-7.13v-.5c.95-.69 1.77-1.57 2.42-2.58z"></path>
            </svg>
            Login with Twitter
        </button>
    </div>


    <div class="flex items-center my-6">
        <div class="flex-grow border-t border-gray-400 dark:border-gray-600"></div>
        <span class="px-3 text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800 text-sm">or</span>
        <div class="flex-grow border-t border-gray-400 dark:border-gray-600"></div>
    </div>

    <p class="text-center text-gray-600 dark:text-gray-400 text-sm">Don't have an account? <a href="#" class="font-semibold hover:underline">Sign Up</a></p>
     <p class="text-center text-gray-600 dark:text-gray-400 text-xs mt-2"><a href="#" class="hover:underline">Forgot Password?</a></p>


</div>

関連コンポーネント

ソーシャルログインコンポーネント

マイクロインタラクションを備えたレスポンシブソーシャルログインコンポーネント - ユーザーのアクションに応答する小さくて魅力的なアニメーション、補完的な配色、シンプルな複雑さのレベル、ブログ/コンテンツの目的、ダークテーマのサポートに焦点を当てています。

開ける

ソーシャルログインコンポーネント - マイクロインタラクション

Tailwind CSSを使用したソーシャルログインコンポーネントカードで、ボタンのマイクロインタラクション(ホバー/フォーカスのスケール効果)、応答性(中央揃えの最大幅)、およびダークテーマのサポートを備えています。picsum.photos のプレースホルダー画像と、ソーシャルアイコンに埋め込まれた SVG を使用します。JavaScript はありません。

開ける

ソーシャルログインコンポーネント

グレースケールカラーとMicrointeractionsデザインスタイルを使用したシンプルでレスポンシブなソーシャルログインコンポーネントで、Tailwind CSSを使用したダークテーマをサポートしています。ソーシャルアイコンの微妙なホバーアニメーションが特徴です。

開ける