Componentes Inicio de sesión social Componente de inicio de sesión social - Complejo vibrante de neumorfismo

Componente de inicio de sesión social - Complejo vibrante de neumorfismo

Un componente de formulario de inicio de sesión social complejo y receptivo con estilo Neumorphism y acentos vibrantes usando Tailwind CSS, compatible con el modo oscuro.

Vista previa

Código HTML

<!-- Main container simulating the page background -->
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">

  <!-- Neumorphic Login Form Card -->
  <div class="w-full max-w-sm p-8 bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-xl shadow-gray-300 dark:shadow-gray-950">

    <h2 class="text-3xl font-bold text-center mb-8 text-gray-800 dark:text-gray-100">Sign In</h2>

    <!-- Social Login Buttons -->
    <div class="grid grid-cols-1 gap-4 mb-6">

      <!-- Google Button -->
      <button class="w-full py-3 px-4 rounded-lg flex items-center justify-center
                     bg-gray-100 dark:bg-gray-700
                     shadow-md shadow-gray-300 dark:shadow-900
                     hover:shadow-lg hover:shadow-gray-400 dark:hover:shadow-950 dark:hover:bg-gray-600
                     active:shadow-inner active:shadow-gray-400 dark:active:shadow-950 dark:active:bg-gray-800
                     transition duration-200 ease-in-out">
        <!-- Placeholder for Google Icon -->
        <span class="font-bold mr-2">G</span>
        <span class="text-gray-800 dark:text-gray-100">Sign in with Google</span>
      </button>

      <!-- Facebook Button -->
      <button class="w-full py-3 px-4 rounded-lg flex items-center justify-center
                     bg-gray-100 dark:bg-gray-700
                     shadow-md shadow-gray-300 dark:shadow-900
                     hover:shadow-lg hover:shadow-gray-400 dark:hover:shadow-950 dark:hover:bg-gray-600
                     active:shadow-inner active:shadow-gray-400 dark:active:shadow-950 dark:active:bg-gray-800
                     transition duration-200 ease-in-out">
        <!-- Placeholder for Facebook Icon -->
        <span class="font-bold mr-2">f</span>
        <span class="text-gray-800 dark:text-gray-100">Sign in with Facebook</span>
      </button>

      <!-- Add more social buttons if needed for complexity -->
            <!-- Apple Button Example -->
            <button class="w-full py-3 px-4 rounded-lg flex items-center justify-center
                     bg-gray-100 dark:bg-gray-700
                     shadow-md shadow-gray-300 dark:shadow-900
                     hover:shadow-lg hover:shadow-gray-400 dark:hover:shadow-950 dark:hover:bg-gray-600
                     active:shadow-inner active:shadow-gray-400 dark:active:shadow-950 dark:active:bg-gray-800
                     transition duration-200 ease-in-out">
        <!-- Placeholder for Apple Icon -->
        <span class="font-bold mr-2"></span>
        <span class="text-gray-800 dark:text-gray-100">Sign in with Apple</span>
      </button>

    </div>

    <div class="text-center text-gray-500 dark:text-gray-400 mb-6">or</div>

    <!-- Email/Password Form -->
    <form>
      <div class="mb-4">
        <input type="email" placeholder="Email" class="w-full py-3 px-4 rounded-lg
               bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100
               shadow-inner shadow-gray-300 dark:shadow-900
               focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600
               placeholder-gray-500 dark:placeholder-gray-400
               transition duration-200 ease-in-out">
      </div>
      <div class="mb-6">
        <input type="password" placeholder="Password" class="w-full py-3 px-4 rounded-lg
               bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100
               shadow-inner shadow-gray-300 dark:shadow-900
               focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600
               placeholder-gray-500 dark:placeholder-gray-400
               transition duration-200 ease-in-out">
      </div>

      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center">
            <!-- Standard checkbox input -->
            <input id="remember-me" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
            <label for="remember-me" class="ml-2 block text-sm text-gray-800 dark:text-gray-200">
                Remember me
            </label>
        </div>
        <a href="#" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">Forgot Password?</a>
      </div>


      <!-- Login Button -->
      <button type="submit" class="w-full py-3 px-4 rounded-lg mb-6
              bg-blue-600 text-white font-bold
              shadow-md shadow-blue-500 dark:shadow-blue-900
              hover:bg-blue-700 dark:hover:bg-blue-700
              active:shadow-inner active:shadow-blue-700 dark:active:shadow-blue-950
              transition duration-200 ease-in-out">
        Login
      </button>
    </form>

    <div class="text-center text-sm text-gray-800 dark:text-gray-200">
      Don't have an account?
      <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-bold">Sign Up</a>
    </div>

  </div>
</div>

Componentes relacionados

SocialLoginComponent

Un componente de inicio de sesión social receptivo construido con Tailwind CSS, con sutiles microinteracciones de desplazamiento y soporte completo para el modo oscuro. Utiliza CDN de iconos simples para logotipos de redes sociales.

Abrir

Componente de inicio de sesión social retro

Un componente de inicio de sesión social simple y receptivo con una estética retro / vintage de los 80 / 90 que utiliza una paleta de colores bosque / verde. Incluye soporte para modo oscuro.

Abrir

Neumorphic_Gaming_Social_Login_Component

Un componente de inicio de sesión social complejo y receptivo en un estilo neumórfico con tonos tierra, diseñado para sitios web de juegos. Incluye múltiples opciones de inicio de sesión y soporte para el modo oscuro.

Abrir