Composants Connexion sociale Neumorphisme du composant Social Login

Neumorphisme du composant Social Login

Composant de connexion sociale avec conception de neumorphisme, effets réactifs et prise en charge du thème sombre.

Aperçu

HTML Code

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="container max-w-md p-8 bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl-dark">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6">Social Login</h2>
    <div class="flex flex-col space-y-4">
      <button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md shadow-md hover:shadow-lg dark:hover:shadow-lg-dark">
        <img src="https://www.svgrepo.com/show/303108/google-icon-logo.svg" alt="Google Icon" class="w-6 h-6">
        <span>Sign in with Google</span>
      </button>
      <button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md shadow-md hover:shadow-lg dark:hover:shadow-lg-dark">
        <img src="https://www.svgrepo.com/show/303114/facebook-176.svg" alt="Facebook Icon" class="w-6 h-6">
        <span>Sign in with Facebook</span>
      </button>
      <button class="flex items-center justify-center px-4 py-2 space-x-2 transition duration-200 ease-in-out bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md shadow-md hover:shadow-lg dark:hover:shadow-lg-dark">
        <img src="https://www.svgrepo.com/show/303113/twitter-social-media-logo.svg" alt="Twitter Icon" class="w-6 h-6">
        <span>Sign in with Twitter</span>
      </button>
    </div>
    <div class="mt-6 text-center text-gray-600 dark:text-gray-400">
      Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a>
    </div>
  </div>
</div>

<style>
.shadow-lg-dark {
  box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #2e2e2e;
}
</style>

Composants associés

Composant de connexion sociale

Un composant de connexion sociale réactif inspiré des principes de conception matérielle, avec des couleurs à contraste élevé et une prise en charge du mode sombre, adapté aux plateformes de divertissement et de médias.

Ouvrir

Neumorphic_Gaming_Social_Login_Component

Un composant de connexion sociale complexe et réactif dans un style neumorphe avec des tons de terre, conçu pour les sites Web de jeux. Comprend plusieurs options de connexion et la prise en charge du mode sombre.

Ouvrir

SocialLoginComponent

Un composant de connexion sociale réactif construit avec Tailwind CSS, avec des micro-interactions subtiles et une prise en charge complète du mode sombre. Utilise le CDN simple-icons pour les logos de médias sociaux.

Ouvrir