ソーシャルログイン

ソーシャルログインコンポーネント - Neumorphism Vibrant Complex

Tailwind CSSを使用してNeumorphismと鮮やかなアクセントでスタイル設定された、複雑で応答性の高いソーシャルログインフォームコンポーネントで、ダークモードをサポートします。

                <!-- Main container simulating the page background -->
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">

  <!-- Neumorphic Login Form Card -->
  <div class="w-full max-w-sm p-8 bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-xl shadow-gray-300 dark:shadow-gray-950">

    <h2 class="text-3xl font-bold text-center mb-8 text-gray-800 dark:text-gray-100">Sign In</h2>

    <!-- Social Login Buttons -->
    <div class="grid grid-cols-1 gap-4 mb-6">

      <!-- Google Button -->
      <button class="w-full py-3 px-4 rounded-lg flex items-center justify-center
                     bg-gray-100 dark:bg-gray-700
                     shadow-md shadow-gray-300 dark:shadow-900
                     hover:shadow-lg hover:shadow-gray-400 dark:hover:shadow-950 dark:hover:bg-gray-600
                     active:shadow-inner active:shadow-gray-400 dark:active:shadow-950 dark:active:bg-gray-800
                     transition duration-200 ease-in-out">
        <!-- Placeholder for Google Icon -->
        <span class="font-bold mr-2">G</span>
        <span class="text-gray-800 dark:text-gray-100">Sign in with Google</span>
      </button>

      <!-- Facebook Button -->
      <button class="w-full py-3 px-4 rounded-lg flex items-center justify-center
                     bg-gray-100 dark:bg-gray-700
                     shadow-md shadow-gray-300 dark:shadow-900
                     hover:shadow-lg hover:shadow-gray-400 dark:hover:shadow-950 dark:hover:bg-gray-600
                     active:shadow-inner active:shadow-gray-400 dark:active:shadow-950 dark:active:bg-gray-800
                     transition duration-200 ease-in-out">
        <!-- Placeholder for Facebook Icon -->
        <span class="font-bold mr-2">f</span>
        <span class="text-gray-800 dark:text-gray-100">Sign in with Facebook</span>
      </button>

      <!-- Add more social buttons if needed for complexity -->
            <!-- Apple Button Example -->
            <button class="w-full py-3 px-4 rounded-lg flex items-center justify-center
                     bg-gray-100 dark:bg-gray-700
                     shadow-md shadow-gray-300 dark:shadow-900
                     hover:shadow-lg hover:shadow-gray-400 dark:hover:shadow-950 dark:hover:bg-gray-600
                     active:shadow-inner active:shadow-gray-400 dark:active:shadow-950 dark:active:bg-gray-800
                     transition duration-200 ease-in-out">
        <!-- Placeholder for Apple Icon -->
        <span class="font-bold mr-2"></span>
        <span class="text-gray-800 dark:text-gray-100">Sign in with Apple</span>
      </button>

    </div>

    <div class="text-center text-gray-500 dark:text-gray-400 mb-6">or</div>

    <!-- Email/Password Form -->
    <form>
      <div class="mb-4">
        <input type="email" placeholder="Email" class="w-full py-3 px-4 rounded-lg
               bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100
               shadow-inner shadow-gray-300 dark:shadow-900
               focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600
               placeholder-gray-500 dark:placeholder-gray-400
               transition duration-200 ease-in-out">
      </div>
      <div class="mb-6">
        <input type="password" placeholder="Password" class="w-full py-3 px-4 rounded-lg
               bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100
               shadow-inner shadow-gray-300 dark:shadow-900
               focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600
               placeholder-gray-500 dark:placeholder-gray-400
               transition duration-200 ease-in-out">
      </div>

      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center">
            <!-- Standard checkbox input -->
            <input id="remember-me" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
            <label for="remember-me" class="ml-2 block text-sm text-gray-800 dark:text-gray-200">
                Remember me
            </label>
        </div>
        <a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">Forgot Password?</a>
      </div>


      <!-- Login Button -->
      <button type="submit" class="w-full py-3 px-4 rounded-lg mb-6
              bg-blue-600 text-white font-bold
              shadow-md shadow-blue-500 dark:shadow-blue-900
              hover:bg-blue-700 dark:hover:bg-blue-700
              active:shadow-inner active:shadow-blue-700 dark:active:shadow-blue-950
              transition duration-200 ease-in-out">
        Login
      </button>
    </form>

    <div class="text-center text-sm text-gray-800 dark:text-gray-200">
      Don't have an account?
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-bold">Sign Up</a>
    </div>

  </div>
</div>

ミニマリストソーシャルログインコンポーネント

電子商取引のためのグレースケールのミニマリストソーシャルログインコンポーネント、シンプル、レスポンシブ、ダークテーマのサポート、JavaScriptなし

プレビューを開く

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-sm p-6 bg-white rounded-md shadow-md dark:bg-gray-800">
    <h1 class="text-2xl font-semibold text-center text-gray-700 dark:text-white">Login</h1>
    <div class="flex justify-center mt-4 space-x-4">
      <button class="px-4 py-2 text-gray-700 bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200">Facebook</button>
      <button class="px-4 py-2 text-gray-700 bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200">Google</button>
      <button class="px-4 py-2 text-gray-700 bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200">Twitter</button>
    </div>
  </div>
</div>

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

パステルカラーの配色とダークモードをサポートするeコマースプラットフォーム用に設計されたレトロ/ビンテージソーシャルログインコンポーネント。

プレビューを開く

                <div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900 p-6">
    <div class="bg-pastel-pink rounded-lg shadow-lg p-8 w-80">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Welcome Back!</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-6 text-center">Log in using your favorite social media account</p>
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center justify-center bg-blue-400 dark:bg-blue-700 text-white rounded-lg p-2 hover:bg-blue-500 dark:hover:bg-blue-600 transition duration-200 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
                Login with Facebook
            </a>
            <a href="#" class="flex items-center justify-center bg-red-400 dark:bg-red-700 text-white rounded-lg p-2 hover:bg-red-500 dark:hover:bg-red-600 transition duration-200 ease-in-out">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
                Login with Google
            </a>
            <a href="#" class="flex items-center justify-center bg-green-400 dark:bg-green-700 text-white rounded-lg p-2 hover:bg-green-500 dark:hover:bg-green-600 transition duration-200 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
                Login with Twitter
            </a>
        </div>
        <div class="mt-4 text-center">
            <p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-400 dark:text-blue-300 hover:underline">Sign up</a></p>
        </div>
    </div>
</div>

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

ビジネス/企業のWebサイト向けに設計されたミニマリストのソーシャルログインコンポーネントで、補完的な配色とダークモードのサポートを備えています。

プレビューを開く

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 w-96">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center mb-6">Login with Social Media</h2>
        <div class="flex flex-col space-y-4">
            <button class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20" alt="Google Logo"> Login with Google
            </button>
            <button class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20" alt="Facebook Logo"> Login with Facebook
            </button>
            <button class="flex items-center justify-center bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20" alt="LinkedIn Logo"> Login with LinkedIn
            </button>
        </div>
        <div class="mt-4 text-center text-gray-600 dark:text-gray-400">
            <p>Or login with your email</p>
        </div>
        <div class="mt-4 flex flex-col space-y-4">
            <input type="email" placeholder="Email" class="border dark:border-gray-700 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500" />
            <input type="password" placeholder="Password" class="border dark:border-gray-700 rounded-lg py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500" />
            <button class="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold py-2 rounded-lg transition duration-200">Login</button>
        </div>
    </div>
</div>

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

マテリアルデザイン、パステルカラー、ビジネス/企業向けの適度な複雑さを備えたソーシャルログインコンポーネント

プレビューを開く

                <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 dark:bg-gray-800 shadow-lg rounded-lg">
    <h3 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Login</h3>
    <div class="mt-4">
      <div>
        <label class="block text-gray-700 dark:text-gray-200" for="email">Email</label>
        <input type="email" placeholder="Email" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600">
      </div>
      <div class="mt-4">
        <label class="block text-gray-700 dark:text-gray-200" for="password">Password</label>
        <input type="password" placeholder="Password" class="w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-600">
      </div>
      <div class="flex items-baseline justify-between">
        <button class="px-6 py-2 mt-4 text-white bg-blue-600 rounded-lg hover:bg-blue-900">Login</button>
        <a href="#" class="text-sm text-blue-600 hover:underline">Forgot password?</a>
      </div>
      <div class="mt-6 text-center">
        <p class="text-gray-700 dark:text-gray-200">Or login with:</p>
        <div class="flex justify-center gap-4 mt-2">
          <button class="px-4 py-2 border rounded-md flex items-center gap-2 hover:bg-gray-200 dark:hover:bg-gray-700">
            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" class="h-5">
            Google
          </button>
          <button class="px-4 py-2 border rounded-md flex items-center gap-2 hover:bg-gray-200 dark:hover:bg-gray-700">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/1200px-2021_Facebook_icon.svg.png" alt="Facebook" class="h-5">
            Facebook
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

SocialLoginコンポーネント

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

プレビューを開く

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

ソーシャルログインコンポーネントのニューモーフィズム

ニューモーフィズムデザイン、レスポンシブエフェクト、ダークテーマのサポートを備えたソーシャルログインコンポーネント。

プレビューを開く

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="container max-w-md p-8 bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl-dark">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6">Social Login</h2>
    <div class="flex flex-col space-y-4">
      <button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md shadow-md hover:shadow-lg dark:hover:shadow-lg-dark">
        <img src="https://www.svgrepo.com/show/303108/google-icon-logo.svg" alt="Google Icon" class="w-6 h-6">
        <span>Sign in with Google</span>
      </button>
      <button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md shadow-md hover:shadow-lg dark:hover:shadow-lg-dark">
        <img src="https://www.svgrepo.com/show/303114/facebook-176.svg" alt="Facebook Icon" class="w-6 h-6">
        <span>Sign in with Facebook</span>
      </button>
      <button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md shadow-md hover:shadow-lg dark:hover:shadow-lg-dark">
        <img src="https://www.svgrepo.com/show/303113/twitter-social-media-logo.svg" alt="Twitter Icon" class="w-6 h-6">
        <span>Sign in with Twitter</span>
      </button>
    </div>
    <div class="mt-6 text-center text-gray-600 dark:text-gray-400">
      Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a>
    </div>
  </div>
</div>

<style>
.shadow-lg-dark {
  box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #2e2e2e;
}
</style>

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

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

プレビューを開く

                <div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
  <img src="https://picsum.photos/400/200" alt="Login Header" class="w-full h-32 object-cover rounded-t-lg">
  <div class="p-6">
    <h2 class="text-center text-2xl font-bold text-gray-800 dark:text-white mb-6">Login or Sign Up</h2>
    <div class="flex flex-col gap-4">

      <!-- Google Button -->
      <button class="flex items-center justify-center w-full 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:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 ease-in-out transform hover:scale-105 focus:scale-105">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M19 9.4v2.9h-4.6V14h4.6c-.2 1.6-1.5 2.9-3.1 3.4-.9.3-1.9.5-2.9.5-3.5 0-6.4-2.3-7.4-5.6-.3-1.1-.5-2.3-.5-3.5s.2-2.4.5-3.5C6.6 5.3 9.5 3 13 3c1.1 0 2.1.2 3.1.5 1.7.6 3 1.9 3.1 3.4h-2.9c-.2-.9-.8-1.6-1.7-2-1.1-.5-2.3-.7-3.4-.7-2.3 0-4.3 1.5-5 3.5-.2.6-.3 1.2-.3 1.9s.1 1.3.3 1.9c.8 2 2.7 3.5 5 3.5 1.1 0 2-.2 2.9-.6.9-.4 1.6-1.1 1.8-2z"/>
        </svg>
        Login with Google
      </button>

      <!-- Facebook Button -->
      <button class="flex items-center justify-center w-full 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:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 ease-in-out transform hover:scale-105 focus:scale-105">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.505 1.492-3.89 3.776-3.89 1.095 0 2.245.195 2.245.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22.001c4.78-.75 8.437-4.888 8.437-9.879z"/>
        </svg>
        Login with Facebook
      </button>

      <!-- Twitter Button -->
      <button class="flex items-center justify-center w-full 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:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 ease-in-out transform hover:scale-105 focus:scale-105">
        <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
          <path d="M23.643 4.937c-.835.37-1.732.62-2.675.733 1.013-.6 1.793-1.553 2.153-2.67.952-.1 1.851-.244 2.728-.46-.928 1.23-2.2 2.122-3.652 2.614C16.683 3.914 15.022 3 13.104 3c-3.54 0-6.417 2.877-6.417 6.417 0 .505.057.995.167 1.47-.573-.028-1.134-.178-1.67-.442-1.827 2.942-4.597 4.916-7.742 5.553-.2.042-.395.072-.592.103.794 2.485 3.04 4.317 5.694 4.729C5.33 20.65 4.06 21 2.7 21c-.18 0-.356-.01-.53-.025 2.36 1.493 5.177 2.373 8.197 2.373 9.895 0 15.304-8.203 15.304-15.31 0-.234-.005-.468-.014-.7C22.056 6.61 22.963 5.834 23.643 4.937z"/>
        </svg>
        Login with Twitter
      </button>

    </div>
  </div>
</div>

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

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

プレビューを開く

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-md p-8 space-y-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
    <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white">Sign in to your account</h2>
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
      <button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
        <img src="https://www.svgrepo.com/show/512319/github-142.svg" alt="GitHub" class="w-5 h-5">
        <span>GitHub</span>
      </button>
      <button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
        <img src="https://www.svgrepo.com/show/512100/google-177.svg" alt="Google" class="w-5 h-5">
        <span>Google</span>
      </button>
      <button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
        <img src="https://www.svgrepo.com/show/512099/facebook-176.svg" alt="Facebook" class="w-5 h-5">
        <span>Facebook</span>
      </button>
      <button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:bg-gray-600">
        <img src="https://www.svgrepo.com/show/512107/twitter-153.svg" alt="Twitter" class="w-5 h-5">
        <span>Twitter</span>
      </button>
    </div>
    <div class="relative">
      <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="bg-white px-2 text-gray-500 dark:bg-gray-800 dark:text-gray-400">Or continue with</span>
      </div>
    </div>
    <form class="space-y-4">
      <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" name="email" type="email" autocomplete="email" required class="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500">
        </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" name="password" type="password" autocomplete="current-password" required class="block w-full px-3 py-2 placeholder-gray-400 border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-500">
        </div>
      </div>
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700 dark:checked:bg-indigo-600">
          <label for="remember-me" class="block ml-2 text-sm text-gray-900 dark:text-gray-300">Remember me</label>
        </div>
        <div class="text-sm">
          <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300">Forgot your password?</a>
        </div>
      </div>
      <div>
        <button type="submit" class="flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-600">
          Sign in
        </button>
      </div>
    </form>
  </div>
</div>

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

ダークモードUIとレスポンシブエフェクトを備えたソーシャルログインコンポーネント

プレビューを開く

                <div class="flex items-center justify-center min-h-screen bg-gray-900">
 <div class="w-full max-w-md p-8 space-y-6 bg-gray-800 rounded-xl shadow-lg">
 <h2 class="text-2xl font-bold text-center text-white">Sign in to your account</h2>
 <form class="space-y-4">
 <div>
 <label for="email" class="block text-sm font-medium text-gray-300">Email address</label>
 <input id="email" name="email" type="email" autocomplete="email" required class="w-full px-3 py-2 mt-1 border border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-gray-900 text-white">
 </div>
 <div>
 <label for="password" class="block text-sm font-medium text-gray-300">Password</label>
 <input id="password" name="password" type="password" autocomplete="current-password" required class="w-full px-3 py-2 mt-1 border border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-gray-900 text-white">
 </div>
 <div class="flex items-center justify-between">
 <div class="flex items-center">
 <input id="remember-me" name="remember-me" type="checkbox" class="w-4 h-4 text-blue-600 border-gray-700 rounded focus:ring-blue-500 bg-gray-900">
 <label for="remember-me" class="block ml-2 text-sm text-gray-300">Remember me</label>
 </div>
 <div class="text-sm">
 <a href="#" class="font-medium text-blue-500 hover:text-blue-400">Forgot your password?</a>
 </div>
 </div>
 <div>
 <button type="submit" class="w-full px-4 py-2 font-bold text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Sign in</button>
 </div>
 </form>
 <div class="relative">
 <div class="absolute inset-0 flex items-center">
 <div class="w-full border-t border-gray-700"></div>
 </div>
 <div class="relative flex justify-center text-sm">
 <span class="px-2 text-gray-400 bg-gray-800">Or continue with</span>
 </div>
 </div>
 <div class="flex mt-6 space-x-4">
 <button type="button" class="w-full px-4 py-2 flex items-center justify-center text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
 <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
 <path d="M6.29 0H3.45L0 3.53V8.5H2.5V20H6V8.5H9.5V3.53H6.29V0Z" fill="currentColor"></path>
 </svg>
 Facebook
 </button>
 <button type="button" class="w-full px-4 py-2 flex items-center justify-center text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-100 dark:hover:bg-gray-600">
 <svg viewBox="0 0 24 24" class="w-4 h-4 mr-2" fill="currentColor" aria-hidden="true">
 <path d="M12.0003 4.75C9.3703 4.75 7.17031 6.87031 7.17031 9.5C7.17031 11.1203 8.0003 12.5303 9.19031 13.4703L8.29031 14.3703C1.54031 9.5 -3.62969 18.5403 5.16031 22.2203C13.6303 25.9303 21.8303 15.3603 19.0403 9.59031C18.9203 9.33031 18.7803 9.07031 18.6403 8.82031C17.7303 7.25031 16.1703 6.01031 14.3503 5.38031L15.9703 6.73031C15.8103 6.85031 15.6603 6.98031 15.5103 7.11031C13.9903 8.45031 13.0003 9.86031 13.0003 11.5C13.0003 12.1003 13.1003 12.6703 13.2803 13.2103C13.8903 15.0203 15.4003 16.3103 17.1203 16.4103C17.4403 16.4303 17.7603 16.4403 18.0903 16.4403C18.4803 16.4403 18.8603 16.4303 19.2403 16.4C20.2303 16.3503 21.0503 15.5703 21.1103 14.5903C21.1103 14.3303 21.1103 14.0803 21.0903 13.8303C21.0903 13.7203 21.0803 13.5903 21.0803 13.4603C21.0703 13.0903 21.0503 12.7103 21.0303 12.3403L23.4403 11.3L22.7603 9.68031C21.9703 9.96031 21.1103 10.2303 20.2203 10.4303C19.8103 9.04031 18.7103 7.99031 17.3603 7.63031L16.1103 8.90031C16.1003 8.96031 16.1003 9.02031 16.0903 9.08031C15.2303 8.51031 13.9203 8.16031 12.4903 8.16031C10.0803 8.16031 8.17031 9.87031 7.56031 12.1103L6.45031 11.5803C6.24031 10.2603 6.47031 8.86031 7.14031 7.67031C8.06031 6.02031 9.89031 4.92031 11.8303 4.77031L12.0003 4.75ZM12.0003 6.75031C10.2303 6.75031 8.75031 8.23031 8.75031 10.0003C8.75031 10.8403 9.09031 11.6003 9.62031 12.1203L10.1503 11.5803L11.2903 12.7303L12.4403 13.8803C12.4403 13.8803 12.4403 13.8803 12.4303 13.8903C12.3403 13.9803 12.1903 14.1303 12.0003 14.1303C11.4503 14.1303 11.0003 13.6803 11.0003 13.1303C11.0003 12.7703 11.1403 12.4403 11.4003 12.2003C10.9703 10.5703 9.57031 9.37031 7.91031 9.13031L6.61031 8.90031C7.09031 6.69031 9.30031 5.00031 11.8303 5.00031C13.4703 5.00031 14.9803 5.87031 15.8503 7.17031L15.8703 7.19031L14.6903 8.35031L14.6903 8.35031C14.2003 7.67031 13.2103 6.75031 12.0003 6.75031V6.75031Z" fill="currentColor"></path>
 </svg>
 Google
 </button>
 </div>
 <p class="mt-8 text-sm text-center text-gray-400">
 Don't have an account?
 <a href="#" class="font-medium text-blue-500 hover:text-blue-400">Sign up</a>
 </p>
 </div>
</div>

カテゴリ