CCHub Logo CCHub Tailwind Collection
コンポーネント OAuth ボタン OAuth ボタンコンポーネント

OAuth ボタンコンポーネント

3D デザインスタイル、レスポンシブエフェクト、ダークテーマのサポート、プレースホルダー画像を備えた OAuth ボタンを備えた Web コンポーネント。

プレビュー

HTMLコード 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Sign in with</h1>
  <div class="flex space-x-4">
    <a href="#" class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-blue-700 dark:text-gray-200 flex items-center">
      <img src="https://picsum.photos/20/20" alt="Google Avatar" class="rounded-full mr-2">
      Google
    </a>
    <a href="#" class="bg-gray-800 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-gray-900 dark:text-gray-200 flex items-center">
      <img src="https://picsum.photos/20/20" alt="Facebook Avatar" class="rounded-full mr-2">
      Facebook
    </a>
    <a href="#" class="bg-red-600 text-white font-semibold py-2 px-4 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl dark:bg-red-700 dark:text-gray-200 flex items-center">
      <img src="https://picsum.photos/20/20" alt="Twitter Avatar" class="rounded-full mr-2">
      Twitter
    </a>
  </div>
</div>

関連コンポーネント

OAuth ボタンコンポーネント (ダークモード、モノクロ)

Tailwind CSS を使用したダーク モードをサポートするレスポンシブ OAuth ボタン コンポーネント。単色の配色を使用し、背景は暗いです。

開ける

OAuth ボタンコンポーネント

パステルカラースキームのダークモードEコマースUI用のレスポンシブOAuthボタンコンポーネント。

開ける

OAuth ボタンコンポーネント

3D デザインスタイル、ダークテーマのサポート、プレースホルダー画像を備えたレスポンシブ OAuth ボタンコンポーネント。このコンポーネントには、Google、Facebook、Twitter、LinkedIn のボタンがあり、深度とエンゲージメントのホバー効果があります。

開ける