OAuth 按钮组件

一个简单、干净、极简的组件，用于显示 OAuth 登录按钮，遵循瑞士/国际排版设计原则。具有黑白单色，具有明亮的强调色、完全响应和深色模式支持，非常适合文档或 Wiki 网站。
预览

HTML 代码

<div class="p-4 sm:p-6 lg:p-8 bg-white dark:bg-gray-950 font-sans">
  <div class="max-w-md mx-auto py-8 px-4 sm:px-6 lg:px-8 border border-gray-200 dark:border-gray-800 rounded-lg text-center shadow-sm">
    <h2 class="text-xl sm:text-2xl font-bold mb-6 text-gray-900 dark:text-white leading-tight">Sign in to your account</h2>

    <div class="space-y-4">
      <button class="flex items-center justify-center w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-950 focus:ring-blue-500">
        <img class="h-5 w-5 mr-3" src="https://www.svgrepo.com/show/475656/google-color.svg" alt="Google logo"/>
        Sign in with Google
      </button>

      <button class="flex items-center justify-center w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-950 focus:ring-blue-500">
        <img class="h-5 w-5 mr-3" src="https://www.svgrepo.com/show/448227/github.svg" alt="GitHub logo"/>
        Sign in with GitHub
      </button>

      <button class="flex items-center justify-center w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-base font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-950 focus:ring-blue-500">
        <img class="h-5 w-5 mr-3" src="https://www.svgrepo.com/show/475647/facebook-color.svg" alt="Facebook logo"/>
        Sign in with Facebook
      </button>
    </div>

    <div class="relative py-4">
      <div class="absolute inset-0 flex items-center">
        <div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
      </div>
      <div class="relative flex justify-center text-sm">
        <span class="px-2 bg-white dark:bg-gray-950 text-gray-500 dark:text-gray-400">Or continue with</span>
      </div>
    </div>

    <input type="email" placeholder="[email protected]" aria-label="Email address" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-700 rounded-md text-base text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-900 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors duration-200">

    <button class="mt-4 w-full px-4 py-3 rounded-md shadow-sm text-base font-semibold text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-950 focus:ring-blue-500 transition-colors duration-200">
      Sign In
    </button>

    <p class="mt-6 text-sm text-gray-600 dark:text-gray-400">
      Don't have an account? <a href="#" class="font-medium text-blue-500 hover:text-blue-600 focus:outline-none focus:underline">Sign up</a>
    </p>
  </div>
</div>
OAuth 按钮组件

预览

HTML 代码

相关组件

OAuth 按钮组件

OAuth 按钮组件

OAuth按钮组件
