CCHub Logo CCHub Tailwind Collection
コンポーネント ソーシャルログイン SocialLoginコンポーネント

SocialLoginコンポーネント

Tailwind CSSで構築されたレスポンシブソーシャルログインコンポーネントで、微妙なホバーマイクロインタラクションと完全なダークモードのサポートを特徴としています。ソーシャルメディアのロゴにはsimple-icons CDNを使用します。

プレビュー

HTMLコード 

<div class="max-w-sm mx-auto p-6 bg-white rounded-lg shadow-xl dark:bg-gray-800 dark:shadow-lg sm:max-w-md">
  <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white mb-6">Login with Socials</h2>
  <div class="space-y-4">
    <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 transition transform hover:scale-105 duration-200 ease-in-out">
      <img class="mr-2 h-5 w-5" src="https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/google.svg" alt="Google">
      Sign in with Google
    </button>
    <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 transition transform hover:scale-105 duration-200 ease-in-out">
      <img class="mr-2 h-5 w-5" src="https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/facebook.svg" alt="Facebook">
      Sign in with Facebook
    </button>
    <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 transition transform hover:scale-105 duration-200 ease-in-out">
      <img class="mr-2 h-5 w-5" src="https://cdn.jsdelivr.net/npm/simple-icons@v5/icons/twitter.svg" alt="Twitter">
      Sign in with Twitter
    </button>
  </div>
</div>

関連コンポーネント

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

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

開ける

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

ソーシャルログインコンポーネント、Microinteractionsデザイン、レスポンシブエフェクト、およびTailwind CSSを使用したダークテーマのサポート。

開ける

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

Tailwind CSSで設計されたミニマリストのソーシャルログインコンポーネントで、明るいテーマと暗いテーマの両方でクリーンなスペースとレスポンシブエフェクトを備えています。

開ける