Composants Boutons OAuth Composant Boutons OAuth

Composant Boutons OAuth

Un composant Web complexe pour les boutons OAuth stylisé avec un morphisme de verre et des tons de terre, conçu pour les sites Web d’entreprise/d’entreprise avec réactivité et prise en charge du mode sombre.

Aperçu

HTML Code

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-800 dark:bg-gray-900 p-6">
  <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg backdrop-blur-md border border-opacity-10 border-gray-300 dark:border-gray-600 p-8 max-w-md w-full">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6 text-center">Sign in with</h2>
    <div class="flex flex-col space-y-4">
      <a href="#" class="flex items-center justify-between bg-green-500 dark:bg-green-600 text-white rounded-lg py-3 px-4 shadow-md border border-transparent hover:bg-green-600 dark:hover:bg-green-500 transition duration-200 ease-in-out">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Google Avatar" />
        <span>Google</span>
        <svg class="w-6 h-6 text-white ml-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 12c0 1.104-.896 2-2 2s-2-.896-2-2 2-2 2-2 2 .896 2 2zm0 0c0 1.104 2 2 2 2s2-2 2-2-2-2-2-2-2 0-2 2zm0 0c0-1.104-1.896-2-2-2s-2 .896-2 2 2 2 2 2 1 0 2-2z" />
        </svg>
      </a>
      <a href="#" class="flex items-center justify-between bg-blue-600 dark:bg-blue-700 text-white rounded-lg py-3 px-4 shadow-md border border-transparent hover:bg-blue-700 dark:hover:bg-blue-600 transition duration-200 ease-in-out">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Facebook Avatar" />
        <span>Facebook</span>
        <svg class="w-6 h-6 text-white ml-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 2a2 2 0 00-2 2v2H9a2 2 0 00-2 2v6a2 2 0 002 2h7v8h2V14h3.586l.414-2H16V6a1 1 0 011-1h1a2 2 0 002-2z" />
        </svg>
      </a>
      <a href="#" class="flex items-center justify-between bg-red-600 dark:bg-red-700 text-white rounded-lg py-3 px-4 shadow-md border border-transparent hover:bg-red-700 dark:hover:bg-red-600 transition duration-200 ease-in-out">
        <img class="w-8 h-8 rounded-full mr-2" src="https://picsum.photos/200/200?random=3" alt="Twitter Avatar" />
        <span>Twitter</span>
        <svg class="w-6 h-6 text-white ml-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 19s-1 0-1-1 1-2 2-1 2-1 3 0 1 2-1 2-1-1-1-1zm1-1s2-1 3-2-3-9-1-7 5 6-1 5zm11-6s1-2-2-3-2 4-3 3 1 3 2 3 2-1 2-1 2 1 2-2z" />
        </svg>
      </a>
    </div>
  </div>
</div>

Composants associés

Boutons OAuth Composant 1

Un composant qui affiche des boutons OAuth avec des animations attrayantes et la prise en charge du mode sombre, en utilisant Tailwind CSS pour la conception. Les boutons réagissent aux actions de l’utilisateur par des micro-interactions subtiles, et les images sont incluses à partir de sources d’espace réservé aléatoires.

Ouvrir