Компоненты Вход через социальные сети Компонент входа через социальные сети

Компонент входа через социальные сети

Адаптивный компонент входа через социальные сети с микровзаимодействиями - ориентирован на небольшие, привлекательные анимации, которые реагируют на действия пользователя, дополнительная цветовая схема, простой уровень сложности, для целей блога/контента, с поддержкой темных тем.

Предварительный просмотр

HTML-код

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Social Login</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    @keyframes bounce-in {
      0% {
        transform: scale(0.5);
        opacity: 0;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    .animate-bounce-in {
      animation: bounce-in 0.5s ease-out;
    }

    @keyframes wiggle {
      0%, 100% {
        transform: rotate(-3deg);
      }
      50% {
        transform: rotate(3deg);
      }
    }

    .hover\:animate-wiggle:hover {
      animation: wiggle 0.3s ease-in-out infinite;
    }
  </style>
</head>
<body class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center min-h-screen p-4">

  <div class="bg-white dark:bg-gray-700 p-8 rounded-lg shadow-md w-full max-w-sm animate-bounce-in">
    <h2 class="text-2xl font-bold text-gray-700 dark:text-white mb-6 text-center">Login</h2>

    <div class="flex justify-center space-x-4">
      <!-- Google Login Button -->
      <button class="flex items-center justify-center w-12 h-12 rounded-full bg-red-600 hover:bg-red-700 text-white transition-all duration-300 ease-in-out transform hover:scale-110 hover:animate-wiggle">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M7 11v2.4h3.9c-.2 1-1.2 3-3.9 3-2.3 0-4.2-1.9-4.2-4.2s1.9-4.2 4.2-4.2c1.7 0 2.9.8 3.5 1.3l2.7-2.7c-1.6-1.5-3.7-2.4-6.2-2.4-5.1 0-9.3 4.2-9.3 9.3s4.2 9.3 9.3 9.3c5 0 8.5-3.5 8.5-8.5 0-.6-.1-1.1-.2-1.7H7z"/>
        </svg>
      </button>

      <!-- Facebook Login Button -->
      <button class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-600 hover:bg-blue-700 text-white transition-all duration-300 ease-in-out transform hover:scale-110 hover:animate-wiggle">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c6.016 0 11-4.032 11-9s-4.984-9-11-9zm-2 16h-3v-6h3v6zm-5-6h3v6h-3v-6zm8 0h-3v6h3v-6zm-5-6h-3v2h3v-2zm-5 0h3v.001h-3v-.001zm8 0h-3v2h3v-2zm-5-4h-3v2h3v-2zm-5 0h3v2h-3v-2zm8 0h-3v2h3v-2z"/>
          <path d="M17 8h-1.75c-.562 0-1.25.438-1.25 1.25V11h3l-.438 3H14v7h-3v-7H8v-3h3V9.25C11 7.453 12.453 6 14.25 6H17V8z"/>
        </svg>
      </button>

      
      <!-- Twitter Login Button -->
       <button class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-400 hover:bg-blue-500 text-white transition-all duration-300 ease-in-out transform hover:scale-110 hover:animate-wiggle">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path d="M23.953 4.57a10.88 10.88 0 01-3.147.813A5.44 5.44 0 0024 2.49a10.903 10.903 0 01-3.477 1.333A5.44 5.44 0 0016.567 0c-3 0-5.44 2.44-5.44 5.44 0 .427.047.84.137 1.24C7.77 6.574 4.12 4.67 1.63 1.723a5.457 5.457 0 00-.733 2.745c0 1.893.963 3.564 2.428 4.543a5.337 5.337 0 01-2.465-.679c0 .022 0 .046 0 .067 0 2.646 1.882 4.853 4.373 5.342a5.46 5.46 0 01-2.46.092c.698 2.176 2.71 3.76 5.092 3.803A10.907 10.907 0 010 20.065c2.305 1.478 5.047 2.324 7.93 2.324 9.52 0 14.76-7.894 14.76-14.76 0-.225-.005-.45-.014-.675a10.525 10.525 0 002.57-2.654z"/>
        </svg>
      </button>

    </div>

    <p class="text-center text-gray-500 dark:text-gray-400 text-sm mt-6">Or login with email and password</p>

    <!-- You would typically have email/password fields here -->
     <div class="mt-4">
      <input type="email" placeholder="Email" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-gray-600 dark:border-gray-500 dark:text-white">
    </div>
    <div class="mt-4">
      <input type="password" placeholder="Password" class="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 dark:bg-gray-600 dark:border-gray-500 dark:text-white ">
    </div>

    <button class="w-full bg-blue-600 text-white py-2 rounded-md mt-6 hover:bg-blue-700 transition-colors duration-300">Login</button>

  </div>

</body>
</html>

Связанные компоненты

SocialLoginComponent (Компонент SocialLogin)

Адаптивный компонент входа в социальные сети, созданный с помощью Tailwind CSS, с тонкими микровзаимодействиями при наведении курсора и полной поддержкой темного режима. Использует простые иконки CDN для логотипов социальных сетей.

Открытый

Компонент входа через социальные сети - Neumorphism Vibrant Complex

Сложный, отзывчивый компонент формы входа в социальные сети, стилизованный под Neumorphism и яркие акценты с использованием Tailwind CSS, поддерживающий темный режим.

Открытый

Компонент входа в социальные сети Material Design

Компонент социального входа в систему Material Design с дополнительной цветовой схемой, средней сложности, для целей блога/контента, адаптивный с поддержкой темного режима с использованием Tailwind CSS.

Открытый