组件 社交登录 简约社交登录组件

简约社交登录组件

用于电子商务的极简主义社交登录组件,采用灰度风格,简单、响应式,支持暗模式,不需要 JavaScript。

预览

HTML 代码

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

相关组件

社交登录组件

一个使用Tailwind CSS构建的响应式社交登录组件,具有细微的悬停微交互和完全的暗模式支持。使用简单图标CDN获取社交媒体标志。

打开

社交登录组件

专为控制面板设计的复杂响应式社交登录组件。使用具有灰度配色方案的深色模式 UI。具有社交提供商按钮、电子邮件/密码表单、“记住我”切换和带有备用登录选项的分隔符。完全响应图像插图,并使用带有 dark: 前缀的 Tailwind CSS 来支持深色主题。无需 JavaScript。

打开

社交登录组件

一个响应式社交登录组件,专为使用单色配色方案的深色模式而设计。适合使用具有交互式功能的博客和内容。

打开