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

Componente de inicio de sesión social de Material Design

Componente de inicio de sesión social de Material Design con esquema de color complementario, complejidad moderada, para fines de blog / contenido, receptivo con soporte de modo oscuro usando Tailwind CSS.

Abrir

Componente de inicio de sesión social

Un componente de inicio de sesión social de modo oscuro receptivo diseñado para un tablero, con un esquema de color triádico y elementos interactivos enriquecidos. Incluye opciones de inicio de sesión con varias plataformas sociales, visualización de datos de usuario y controles.

Abrir

Componente de inicio de sesión social

Componente de inicio de sesión social con diseño de materiales, colores pastel y complejidad moderada para negocios / corporativos

Abrir