ソーシャルログイン

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

Skeuomorphic デザイン、アーストーン、ダークモードをサポートするレスポンシブレイアウトを備えたシンプルなソーシャルログインコンポーネント。このコンポーネントは、ブログやコンテンツ消費Webサイトに適しており、視覚的に魅力的でユーザーフレンドリーなログインエクスペリエンスを提供します。

プレビューを開く

                <div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4">
  <div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 p-8 rounded-xl shadow-2xl border-t border-l border-stone-200 dark:border-stone-600 transform transition-all duration-300 hover:scale-105 active:scale-95">
    <h2 class="text-center text-stone-800 dark:text-stone-100 text-2xl font-semibold mb-6 drop-shadow-md">Join Us</h2>
    <div class="space-y-4">
      <button class="w-full flex items-center justify-center bg-brown-500 hover:bg-brown-600 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-brown-400 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
        <img src="https://www.google.com/images/branding/googleg/2x/googleg_standard_color_64dp.png" alt="Google icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with Google
      </button>
      <button class="w-full flex items-center justify-center bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/1024px-2021_Facebook_icon.svg.png" alt="Facebook icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with Facebook
      </button>
      <button class="w-full flex items-center justify-center bg-gray-800 hover:bg-gray-900 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/X_logo_2023.svg/512px-X_logo_2023.svg.png" alt="X icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with X
      </button>
    </div>
    <p class="text-center text-stone-700 dark:text-stone-300 text-sm mt-6">
      By joining, you agree to our <a href="#" class="text-brown-600 hover:text-brown-700 dark:text-brown-400 dark:hover:text-brown-500 font-medium">Terms of Service</a>.
    </p>
  </div>
</div>

ダッシュボード用に設計された複雑で応答性の高いソーシャルログインコンポーネント。グレースケールの配色でダークモードUIを利用します。ソーシャルプロバイダーボタン、メール/パスワードフォーム、「Remember me」トグル、代替ログインオプション付きのセパレーターを備えています。画像イラストで完全にレスポンシブで、ダークテーマのサポートにTailwind CSSとdark:プレフィックスを使用します。JavaScript は必要ありません。

プレビューを開く

                <section class="min-h-screen flex items-center justify-center px-4 py-12 bg-gray-50 dark:bg-gray-900">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden grid grid-cols-1 md:grid-cols-2">
    <!-- Illustration Section -->
    <div class="hidden md:block">
      <img src="https://picsum.photos/seed/dashboard/800/600" alt="Dashboard Illustration" class="object-cover w-full h-full">
    </div>
    <!-- Login Form Section -->
    <div class="px-6 py-8 sm:px-10">
      <h2 class="text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100">Sign in to your Dashboard</h2>
      <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">Use your social account or email</p>
      <!-- Social Login Buttons -->
      <div class="mt-8 grid grid-cols-3 gap-3">
        <button type="button" class="w-full inline-flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-sm leading-5 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
          <span class="w-5 h-5 flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full text-gray-900 dark:text-gray-100 text-sm font-semibold">G</span>
          <span class="ml-2">Google</span>
        </button>
        <button type="button" class="w-full inline-flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-sm leading-5 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
          <span class="w-5 h-5 flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full text-gray-900 dark:text-gray-100 text-sm font-semibold">T</span>
          <span class="ml-2">Twitter</span>
        </button>
        <button type="button" class="w-full inline-flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-sm leading-5 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
          <span class="w-5 h-5 flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full text-gray-900 dark:text-gray-100 text-sm font-semibold">GH</span>
          <span class="ml-2">GitHub</span>
        </button>
      </div>
      <!-- Divider -->
      <div class="relative mt-6">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span>
        </div>
      </div>
      <!-- Email & Password Form -->
      <form class="mt-6 space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
          <div class="mt-1">
            <input id="email" type="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-gray-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 sm:text-sm">
          </div>
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
          <div class="mt-1">
            <input id="password" type="password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-gray-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 sm:text-sm">
          </div>
        </div>
        <div class="flex items-center justify-between">
          <label class="flex items-center">
            <input id="remember_me" type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600 focus:ring-gray-500">
            <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Remember me</span>
          </label>
          <div class="text-sm">
            <a href="#" class="font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Forgot your password?</a>
          </div>
        </div>
        <div>
          <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">Sign in</button>
        </div>
      </form>
      <p class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Sign up</a></p>
    </div>
  </div>
</section>

マテリアルデザインソーシャルログインコンポーネント

マテリアルデザインソーシャルログインコンポーネント、補色配色、適度な複雑さ、ブログ/コンテンツ用、Tailwind CSSを使用したダークモードサポートによるレスポンシブ。

プレビューを開く

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md w-96">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6">Login</h2>
    <div class="flex flex-col space-y-4">
      <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
        <img class="h-5 w-5 mr-2" src="https://fonts.gstatic.com/s/i/productlogos/google/v6/24px.svg" alt="Google logo">
        Sign in with Google
      </button>
      <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
        <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 0C5.373 0 0 5.373 0 12c0 5.083 3.791 9.362 8.75 10l-.002-.002v-.001l.002.001V17h-3v-5h3V9c0-3.306 1.976-5.164 4.936-5.164C15.232 3.836 16.5 4 16.5 4v3h-2.473c-1.742 0-2.527.873-2.527 2.075V12h4.999l-.649 5h-4.35v5.999c5-.638 8.75-4.918 8.75-10C24 5.373 18.627 0 12 0z" />
        </svg>
        Sign in with Facebook
      </button>
    </div>
    <div class="mt-6 text-center text-gray-600 dark:text-gray-400 text-sm">
      Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a>
    </div>
  </div>
</div>

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

単色の配色を使用したダークモード用に設計されたレスポンシブソーシャルログインコンポーネント。インタラクティブな機能を備えたブログやコンテンツの消費に適しています。

プレビューを開く

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-bold mb-4 text-center">Log in with Social Media</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Twitter</span>
        </a>
    </div>
    <p class="mt-4 text-center text-gray-400">Or, <a href="#" class="text-gray-300 hover:underline">create a new account</a></p>
</div>

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

Glassmorphismスタイル、鮮やかな色、ダークテーマのサポートを備えたレスポンシブソーシャルログインコンポーネント。

プレビューを開く

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative px-4 py-10 bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg w-full max-w-md">
    <div class="mb-8 text-center">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Social Login</h2>
      <p class="text-gray-600 dark:text-gray-300">Connect with your social media accounts</p>
    </div>
    <div class="space-y-4">
      <button class="flex items-center justify-center w-full py-3 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.846 17.01h-2.192v-5.535h2.192v5.535zm-1.098-6.814h-2.192V6.66h2.192v3.536zM12 2a10 10 0 0 1 10 10 9.93 9.93 0 0 1-.868 4.463l-4.406-4.406A2.99 2.99 0 0 0 12 8c-1.657 0-3 1.343-3 3v4H6V9h3V6h3v3h3v2h-3v6.01z"/>
        </svg>
        Sign in with Google
      </button>
      <button class="flex items-center justify-center w-full py-3 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M22.675 0h-21.35C.595 0 0 .595 0 1.325v21.351C0 23.405.596 24 1.325 24h11.08C13.105 24 13.5 23.604 13.5 23.125V16.3h2.451l.368-2.848h-2.819l.001-1.404c0-.816.227-1.374 1.397-1.374h1.497V7.328c-.269-.036-1.13-.105-2.14-.105-2.114 0-3.564 1.29-3.564 3.659v1.998H8.39v2.848h2.407v6.822c-.7-.052-1.388-.181-2.045-.372H1.325C.595 22.675 0 22.08 0 21.35v-21.35C0 .595.596 0 1.325 0h21.35z"/>
        </svg>
        Sign in with Facebook
      </button>
      <button class="flex items-center justify-center w-full py-3 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M23.954 4.569a8.005 8.005 0 0 1-2.277.623A4.006 4.006 0 0 0 23.622 2.34c-.843.5-1.786.879-2.775 1.08a4.006 4.006 0 0 0-6.81-.878 4.007 4.007 0 0 0-1.122 3.163A11.372 11.372 0 0 1 1.466 2.977a4.007 4.007 0 0 0 1.242 5.332 3.988 3.988 0 0 1-1.81-.5V9.22c0 1.958 1.395 3.598 3.243 3.97V13.42c-1.18.323-2.44.495-3.795.493-.542-.002-1.073-.032-1.594-.098S.945 13.785 0 13.89c1.832 1.16 4.002 1.855 6.33 1.84A11.372 11.372 0 0 1 0 14.55c1.923 2.196 4.551 3.702 7.588 3.814a11.372 11.372 0 0 1-6.29 1.84c-.405 0-.8-.025-1.194-.072C1.915 21.113 4.523 22 7.393 22 12.266 22 18 18.926 18 12.283c0-.1-.002-.198-.006-.296A8.006 8.006 0 0 0 23.954 4.57z"/>
        </svg>
        Sign in with Twitter
      </button>
    </div>
  </div>
</div>

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

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

プレビューを開く

                <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>

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

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

プレビューを開く

                <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Social Login</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @keyframes bounce-in {
      0% {
        transform: scale(0.5);
        opacity: 0;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .animate-bounce-in {
      animation: bounce-in 0.5s ease-out;
    }

    @keyframes wiggle {
      0%, 100% {
        transform: rotate(-3deg);
      }
      50% {
        transform: rotate(3deg);
      }
    }

    .hover\:animate-wiggle:hover {
      animation: wiggle 0.3s ease-in-out infinite;
    }
  </style>
</head>
<body class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center min-h-screen p-4">

  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-md w-full max-w-sm animate-bounce-in">
    <h2 class="text-2xl font-bold text-gray-700 dark:text-white mb-6 text-center">Login</h2>

    <div class="flex justify-center space-x-4">
      <!-- Google Login Button -->
      <button class="flex items-center justify-center w-12 h-12 rounded-full bg-red-600 hover:bg-red-700 text-white transition-all duration-300 ease-in-out transform hover:scale-110 hover:animate-wiggle">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M7 11v2.4h3.9c-.2 1-1.2 3-3.9 3-2.3 0-4.2-1.9-4.2-4.2s1.9-4.2 4.2-4.2c1.7 0 2.9.8 3.5 1.3l2.7-2.7c-1.6-1.5-3.7-2.4-6.2-2.4-5.1 0-9.3 4.2-9.3 9.3s4.2 9.3 9.3 9.3c5 0 8.5-3.5 8.5-8.5 0-.6-.1-1.1-.2-1.7H7z"/>
        </svg>
      </button>

      <!-- Facebook Login Button -->
      <button class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-600 hover:bg-blue-700 text-white transition-all duration-300 ease-in-out transform hover:scale-110 hover:animate-wiggle">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c6.016 0 11-4.032 11-9s-4.984-9-11-9zm-2 16h-3v-6h3v6zm-5-6h3v6h-3v-6zm8 0h-3v6h3v-6zm-5-6h-3v2h3v-2zm-5 0h3v.001h-3v-.001zm8 0h-3v2h3v-2zm-5-4h-3v2h3v-2zm-5 0h3v2h-3v-2zm8 0h-3v2h3v-2z"/>
          <path d="M17 8h-1.75c-.562 0-1.25.438-1.25 1.25V11h3l-.438 3H14v7h-3v-7H8v-3h3V9.25C11 7.453 12.453 6 14.25 6H17V8z"/>
        </svg>
      </button>

      
      <!-- Twitter Login Button -->
       <button class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-400 hover:bg-blue-500 text-white transition-all duration-300 ease-in-out transform hover:scale-110 hover:animate-wiggle">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M23.953 4.57a10.88 10.88 0 01-3.147.813A5.44 5.44 0 0024 2.49a10.903 10.903 0 01-3.477 1.333A5.44 5.44 0 0016.567 0c-3 0-5.44 2.44-5.44 5.44 0 .427.047.84.137 1.24C7.77 6.574 4.12 4.67 1.63 1.723a5.457 5.457 0 00-.733 2.745c0 1.893.963 3.564 2.428 4.543a5.337 5.337 0 01-2.465-.679c0 .022 0 .046 0 .067 0 2.646 1.882 4.853 4.373 5.342a5.46 5.46 0 01-2.46.092c.698 2.176 2.71 3.76 5.092 3.803A10.907 10.907 0 010 20.065c2.305 1.478 5.047 2.324 7.93 2.324 9.52 0 14.76-7.894 14.76-14.76 0-.225-.005-.45-.014-.675a10.525 10.525 0 002.57-2.654z"/>
        </svg>
      </button>

    </div>

    <p class="text-center text-gray-500 dark:text-gray-400 text-sm mt-6">Or login with email and password</p>

    <!-- You would typically have email/password fields here -->
     <div class="mt-4">
      <input type="email" placeholder="Email" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-gray-600 dark:border-gray-500 dark:text-white">
    </div>
    <div class="mt-4">
      <input type="password" placeholder="Password" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-gray-600 dark:border-gray-500 dark:text-white ">
    </div>

    <button class="w-full bg-blue-600 text-white py-2 rounded-md mt-6 hover:bg-blue-700 transition-colors duration-300">Login</button>

  </div>

</body>
</html>

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

マテリアルデザインソーシャルログインコンポーネント、類似の配色、シンプルな複雑さ、ポートフォリオ目的、ダークテーマのサポートによるレスポンシブ。

プレビューを開く

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="px-8 py-6 mt-4 text-left bg-white shadow-lg dark:bg-gray-800 md:w-1/3">
    <div class="flex justify-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-20 h-20 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24"
        stroke="currentColor">
        <path d="M12 14l9-5-9-5-9 5 9 5z" />
        <path
          d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
      </svg>
    </div>
    <h3 class="text-2xl font-bold text-center dark:text-white">Social Login</h3>
    <form action="">
      <div class="mt-4">
        <div class="flex justify-around">
          <button type="button" class="text-white bg-[#4285F4] hover:bg-[#4285F4]/90 focus:ring-4 focus:ring-[#4285F4]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-[#4285F4]/55 mr-2 mb-2">
            <svg class="w-4 h-4 mr-2 -ml-1" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512"><path fill="currentColor" d="M488 261.8C488 278.6 472.9 291.9 455.7 291.9H258.9V349.4H377.6C374.7 366.8 364.8 380.6 350.2 390.2C368.5 403.5 392.1 412.2 418.8 412.2C450.9 412.2 477.5 401 490.6 382.7L488 261.8z"></path></svg>
            Sign in with Google
          </button>
          <button type="button" class="text-white bg-[#3b5998] hover:bg-[#3b5998]/90 focus:ring-4 focus:ring-[#3b5998]/50 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-[#3b5998]/55 mr-2 mb-2">
            <svg class="w-4 h-4 mr-2 -ml-1" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M279.1 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.4 0 225.4 0c-73.22 0-121.1 44.38-121.1 115.7v66.91H64v92.66h80.07V512h96.93V288z"></path></svg>
            Sign in with Facebook
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

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

ダッシュボード用に設計されたレスポンシブなダークモードソーシャルログインコンポーネントで、トライアドの配色と豊富なインタラクティブ要素が特徴です。これには、さまざまなソーシャルプラットフォーム、ユーザーデータの視覚化、およびコントロールを備えたログインオプションが含まれます。

プレビューを開く

                <div class="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-6">
    <h2 class="text-3xl font-bold mb-6">Login to Your Dashboard</h2>
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 w-full max-w-sm">
        <div class="flex justify-between mb-4">
            <span class="text-lg font-semibold">Sign in with:</span>
            <img src="https://picsum.photos/30/30?random=1" alt="Avatar" class="rounded-full">
        </div>
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center justify-center bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 transition duration-300">
                <img class="mr-2" src="https://picsum.photos/30/30?random=2" alt="Facebook" /> Facebook
            </a>
            <a href="#" class="flex items-center justify-center bg-green-700 text-white font-bold py-2 px-4 rounded hover:bg-green-600 transition duration-300">
                <img class="mr-2" src="https://picsum.photos/30/30?random=3" alt="Google" /> Google
            </a>
            <a href="#" class="flex items-center justify-center bg-red-700 text-white font-bold py-2 px-4 rounded hover:bg-red-600 transition duration-300">
                <img class="mr-2" src="https://picsum.photos/30/30?random=4" alt="Twitter" /> Twitter
            </a>
        </div>
        <div class="mt-6 text-center">
            <span class="text-sm">Don't have an account? <a href="#" class="text-blue-400 hover:underline">Sign up</a></span>
        </div>
    </div>
    <footer class="mt-6 text-gray-400 text-xs">
        &copy; 2023 Your Company. All rights reserved.
    </footer>
</div>

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

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

プレビューを開く

                <div class="flex min-h-screen items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm rounded-lg bg-white dark:bg-gray-800 p-6 shadow-md">
    <h2 class="text-center text-2xl font-bold text-gray-800 dark:text-white mb-6">Login with Social Media</h2>
    <div class="flex justify-center space-x-4">
      <button aria-label="Login with Google" class="group flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700 p-3 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200">
        <svg class="h-6 w-6 text-gray-700 dark:text-gray-300 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M7.189 12.001l-4.51 2.28L1.45 10.089zM10 12.001v3.15l5.735 3.175-.007-3.092zM10 8.85L15.728 5.725 15.735 2.634zM7.189 12.001H2.689v-3.15h4.5z" fill="#FFCC4D"></path><path d="M7.189 12.001l2.811-1.621v3.235zM15.735 12.001l-5.735 3.175-5.749-2.907z" fill="#1976D2"></path><path d="M7.189 12.001H2.689v-3.15h4.5z" fill="#4CAF50"></path><path d="M15.728 5.725L10 8.85 7.189 7.229zM15.735 12.001v3.15l-5.735 3.175z" fill="#F44336"></path><path d="M10 8.85l5.728-3.125 5.743 3.125L10 8.85z" fill="#E53935"></path><path d="M10 12.001l-2.811 1.621v3.235L10 18.488l5.735-3.175L10 12.001z" fill="#FFCC4D"></path><path d="M10 12.001l2.811 1.621v3.235L10 18.488l-5.749-2.907L10 12.001z" fill="#4CAF50"></path><path d="M10 8.85L4.265 5.725 4.258 2.634l5.742 3.125 5.728-3.125L10 8.85z" fill="#1976D2"></path>
        </svg>
      </button>
      <button aria-label="Login with Facebook" class="group flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700 p-3 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200">
        <svg class="h-6 w-6 text-gray-700 dark:text-gray-300 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.0228 5.65715 21.2108 10.4319 21.9491V14.8906H7.53379V12H10.4319V9.31156C10.4319 6.33506 12.2252 4.61273 14.9875 4.61273C16.3815 4.61273 17.6106 4.86996 17.9986 4.90543V7.56192L16.3412 7.56298C14.9162 7.56298 14.6415 8.24465 14.6415 9.16964V12H17.85L17.3426 14.8894H14.6415V21.9491C19.354 21.1944 22 17.0516 22 12Z"></path>
        </svg>
      </button>
      <button aria-label="Login with Twitter" class="group flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700 p-3 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200">
        <svg class="h-6 w-6 text-gray-700 dark:text-gray-300 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M18.244 2.25h3.308l-7.227 8.26 8.714 11.24H16.92L10.59 11.702 2.1 22.75H8.413l5.182-7.17L6.547 2.25H2.416L10.719 13.3L18.244 2.25zM17.291 19.75H15.026L5.41 4.25H7.68L17.291 19.75z"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

カテゴリ