Search Components

Social Login

Authentication using social media accounts

Social Login Component - Real Estate (Watercolor/Neon)

A simple, responsive social login component for real estate platforms, featuring a watercolor/artistic style with a neon/electric color scheme. Includes dark mode support and semantic HTML.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-lime-100 via-sky-100 to-fuchsia-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4 font-sans">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden backdrop-blur-sm bg-opacity-70 dark:bg-opacity-70 border border-lime-200 dark:border-gray-700 transform transition-all duration-300 hover:scale-105 group" style="box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), inset 0 0 50px rgba(255, 255, 255, 0.1);">
    <div class="relative p-8 text-center">
      <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10" style="background: radial-gradient(circle at center, #CCEEFF, transparent 70%), url('https://picsum.photos/600/400?blur=5') center center / cover no-repeat;"></div>
      <div class="relative z-10">
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white capitalize leading-tight mb-2">
          Find Your Dream Home
        </h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 mb-6">
          Sign in to explore properties tailored for you.
        </p>
        <div class="space-y-4">
          <button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold bg-gradient-to-r from-blue-500 to-blue-700 text-white shadow-xl hover:from-blue-600 hover:to-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition transform duration-300 active:scale-95 group-hover:drop-shadow-lg group-hover:scale-100 relative overflow-hidden group-hover:glow-blue" aria-label="Sign in with Facebook">
            <div class="absolute inset-0 bg-blue-500 opacity-20 pointer-events-none group-hover:neon-blue"></div>
            <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.812c-3.267 0-4.188 1.504-4.188 4.004v2.996z" />
            </svg>
            <span class="relative z-10">Continue with Facebook</span>
          </button>

          <button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold bg-gradient-to-r from-red-500 to-red-700 text-white shadow-xl hover:from-red-600 hover:to-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800 transition transform duration-300 active:scale-95 group-hover:drop-shadow-lg group-hover:scale-100 relative overflow-hidden group-hover:glow-red" aria-label="Sign in with Google">
            <div class="absolute inset-0 bg-red-500 opacity-20 pointer-events-none group-hover:neon-red"></div>
            <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 4.5c2.47 0 4.48 1.48 5.42 3.63L20.1 5.4C18.47 2.15 15.42 0 12 0 7.8 0 4.2 2.7 2.4 6.3l3.22 2.53C6.4 6.9 8.9 4.5 12 4.5zM24 12c0-.75-.07-1.49-.2-2.2L12 12V24h6c3.3 0 6-2.7 6-6 0-1.8-.8-3.4-2-4.5zM0 12c0 .75.07 1.49.2 2.2L12 12V0H6C2.7 0 0 2.7 0 6c0 1.8.8 3.4 2 4.5z" />
            </svg>
            <span class="relative z-10">Continue with Google</span>
          </button>
        </div>
        <p class="mt-6 text-xs text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors duration-300">
          By signing in, you agree to our <a href="#" class="text-lime-600 dark:text-lime-400 font-medium hover:underline">Terms of Service</a> and <a href="#" class="text-lime-600 dark:text-lime-400 font-medium hover:underline">Privacy Policy</a>.
        </p>
      </div>
    </div>
  </div>
</div>

<style>
  /* Neon Glow for Buttons */
  .group-hover\:neon-blue {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.8), inset 0 0 10px rgba(59, 130, 246, 0.5);
    transition: box-shadow 0.3s ease-in-out;
  }

  .group-hover\:neon-red {
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.8), inset 0 0 10px rgba(239, 68, 68, 0.5);
    transition: box-shadow 0.3s ease-in-out;
  }

  /* Optional: Light glow for the card itself on hover */
  .group:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(255, 255, 255, 0.1), 0 0 30px rgba(163, 239, 59, 0.3) !important; /* Adding a subtle lime glow */
  }

  .dark .group:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), inset 0 0 50px rgba(0, 0, 0, 0.2), 0 0 30px rgba(163, 239, 59, 0.3) !important;
  }
</style>

Art Deco Social Login Component

A complex social login component designed with an Art Deco aesthetic for CRM/Business Tools, featuring geometric patterns, warm neutrals, and full responsiveness with dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-stone-100 to-stone-200 p-4 sm:p-6 lg:p-8 flex items-center justify-center font-serif dark:from-stone-900 dark:to-stone-950">
  <div class="w-full max-w-md bg-white p-8 rounded-xl shadow-2xl dark:bg-stone-800 transition-all duration-300 transform scale-100 opacity-100">
    <div class="relative mb-8 text-center">
      <h2 class="text-4xl font-bold text-stone-800 dark:text-stone-100 mb-2 tracking-wider">Login</h2>
      <p class="text-stone-600 dark:text-stone-300 mb-6">Access your CRM dashboard</p>

      <!-- Art Deco Pattern Top -->
      <div class="absolute -top-6 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-gradient-to-r from-yellow-700 to-yellow-900 rounded-b-lg shadow-md"></div>
      <div class="absolute -top-8 left-1/2 -translate-x-1/2 w-2/3 h-1 bg-stone-300 dark:bg-stone-600 rounded-b-lg"></div>

      <!-- Art Deco geometric lines -->
      <div class="absolute inset-x-0 bottom-0 text-stone-300 dark:text-stone-600 text-sm opacity-50">
        <svg class="mx-auto" width="100%" height="20" viewBox="0 0 100 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0 10H100" stroke="currentColor" stroke-width="0.5"/>
          <path d="M10 5L90 5" stroke="currentColor" stroke-width="0.5"/>
          <path d="M20 0L80 0" stroke="currentColor" stroke-width="0.5"/>
        </svg>
      </div>
    </div>

    <div class="space-y-4 mb-6">
      <button class="w-full flex items-center justify-center py-3 px-4 rounded-lg bg-stone-100 border border-stone-300 text-stone-700 dark:bg-stone-700 dark:border-stone-600 dark:text-stone-200 shadow-sm hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors duration-300">
        <img src="https://www.svgrepo.com/show/512317/google-177.svg" alt="Google logo" class="h-5 w-5 mr-3 filter dark:invert">
        <span class="font-medium">Sign in with Google</span>
      </button>
      <button class="w-full flex items-center justify-center py-3 px-4 rounded-lg bg-stone-100 border border-stone-300 text-stone-700 dark:bg-stone-700 dark:border-stone-600 dark:text-stone-200 shadow-sm hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors duration-300">
        <img src="https://www.svgrepo.com/show/303126/facebook-1-logo.svg" alt="Facebook logo" class="h-5 w-5 mr-3 filter dark:invert">
        <span class="font-medium">Sign in with Facebook</span>
      </button>
    </div>

    <div class="relative flex py-5 items-center">
      <div class="flex-grow border-t border-stone-300 dark:border-stone-600"></div>
      <span class="flex-shrink mx-4 text-stone-500 dark:text-stone-400 font-sans text-sm">Or continue with</span>
      <div class="flex-grow border-t border-stone-300 dark:border-stone-600"></div>
    </div>

    <form class="space-y-5">
      <div>
        <label for="email" class="block text-sm font-medium text-stone-700 dark:text-stone-200 mb-1">Email Address</label>
        <input type="email" id="email" name="email" class="mt-1 block w-full px-4 py-3 rounded-lg border border-stone-300 focus:ring-yellow-800 focus:border-yellow-800 dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400 dark:focus:ring-yellow-700 dark:focus:border-yellow-700 shadow-sm text-base" placeholder="[email protected]">
      </div>
      <div>
        <label for="password" class="block text-sm font-medium text-stone-700 dark:text-stone-200 mb-1">Password</label>
        <input type="password" id="password" name="password" class="mt-1 block w-full px-4 py-3 rounded-lg border border-stone-300 focus:ring-yellow-800 focus:border-yellow-800 dark:bg-stone-700 dark:border-stone-600 dark:text-stone-100 dark:placeholder-stone-400 dark:focus:ring-yellow-700 dark:focus:border-yellow-700 shadow-sm text-base" placeholder="••••••••">
      </div>

      <div class="flex items-center justify-between text-sm">
        <div class="flex items-center">
          <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-yellow-800 focus:ring-yellow-700 border-stone-300 rounded dark:border-stone-600 dark:bg-stone-700 dark:checked:bg-yellow-700 dark:focus:ring-offset-stone-800">
          <label for="remember-me" class="ml-2 block text-stone-700 dark:text-stone-300">Remember me</label>
        </div>
        <a href="#" class="font-medium text-yellow-800 hover:text-yellow-700 dark:text-yellow-600 dark:hover:text-yellow-500 transition-colors duration-200">Forgot your password?</a>
      </div>

      <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-medium text-white bg-yellow-800 hover:bg-yellow-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-700 dark:bg-yellow-700 dark:hover:bg-yellow-800 dark:focus:ring-offset-stone-800 transition-colors duration-300 tracking-wide">
        Sign In
      </button>
    </form>

    <p class="mt-8 text-center text-sm text-stone-600 dark:text-stone-300">
      Don't have an account?
      <a href="#" class="font-medium text-yellow-800 hover:text-yellow-700 dark:text-yellow-600 dark:hover:text-yellow-500 transition-colors duration-200">Sign up</a>
    </p>

    <!-- Art Deco Pattern Bottom -->
    <div class="relative mt-8">
      <div class="absolute -bottom-6 left-1/2 -translate-x-1/2 w-3/4 h-2 bg-gradient-to-r from-yellow-700 to-yellow-900 rounded-t-lg shadow-md"></div>
      <div class="absolute -bottom-8 left-1/2 -translate-x-1/2 w-2/3 h-1 bg-stone-300 dark:bg-stone-600 rounded-t-lg"></div>

      <!-- Art Deco geometric lines -->
      <div class="absolute inset-x-0 top-0 text-stone-300 dark:text-stone-600 text-sm opacity-50 rotate-180">
        <svg class="mx-auto" width="100%" height="20" viewBox="0 0 100 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0 10H100" stroke="currentColor" stroke-width="0.5"/>
          <path d="M10 5L90 5" stroke="currentColor" stroke-width="0.5"/>
          <path d="M20 0L80 0" stroke="currentColor" stroke-width="0.5"/>
        </svg>
      </div>
    </div>

  </div>
</div>

Neumorphic_Gaming_Social_Login_Component

A complex, responsive social login component in a neumorphic style with earth tones, designed for gaming websites. Includes multiple login options and dark mode support.

Open Preview

                <div class="min-h-screen bg-stone-200 dark:bg-stone-900 flex items-center justify-center p-4 sm:p-6 font-sans antialiased text-stone-800 dark:text-stone-300">
  <div class="w-full max-w-md p-6 sm:p-8 rounded-3xl bg-stone-200 dark:bg-stone-900 shadow-neu-light dark:shadow-neu-dark transition-all duration-300 relative overflow-hidden group">
    <div class="absolute inset-0 rounded-3xl bg-gradient-to-br from-stone-300/30 to-stone-100/30 dark:from-stone-800/30 dark:to-stone-700/30 opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none"></div>

    <h2 class="text-3xl sm:text-4xl font-bold text-center mb-6 sm:mb-8 text-stone-700 dark:text-stone-200 drop-shadow-sm">
      <span class="block">Player Login</span>
      <span class="block text-sm sm:text-base font-normal mt-1 opacity-70">Join the Arena!</span>
    </h2>

    <div class="space-y-4 sm:space-y-5 mb-6">
      <button class="w-full py-3 px-6 rounded-xl flex items-center justify-center space-x-3 text-lg font-semibold bg-stone-200 dark:bg-stone-900 shadow-neu-inner-light dark:shadow-neu-inner-dark hover:shadow-neu-light hover:dark:shadow-neu-dark active:shadow-neu-inner-light active:dark:shadow-neu-inner-dark transition-all duration-300 text-stone-700 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.172 8.413 9.879v-6.988H7.078V12h2.335V9.75c0-2.322 1.41-3.592 3.49-3.592 1.002 0 1.98.074 1.98.074v2.16H13.6c-1.132 0-1.49.529-1.49 1.43v1.725h3.9L16 12h-3.328v6.988C18.343 21.172 22 16.991 22 12z" />
        </svg>
        <span>Login with Facebook</span>
      </button>

      <button class="w-full py-3 px-6 rounded-xl flex items-center justify-center space-x-3 text-lg font-semibold bg-stone-200 dark:bg-stone-900 shadow-neu-inner-light dark:shadow-neu-inner-dark hover:shadow-neu-light hover:dark:shadow-neu-dark active:shadow-neu-inner-light active:dark:shadow-neu-inner-dark transition-all duration-300 text-stone-700 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.24 10.29c-.35-.2-.79-.34-1.24-.34-1.16 0-2.22.61-2.92 1.63V7.9H5.06v8.1h2.92v-2.02c.7-.91 1.76-1.63 2.92-1.63 1.08 0 2.05.35 2.87 1.01 1.07.82 1.73 2.1 1.73 3.61c0 1.5-.66 2.79-1.73 3.61-.82.66-1.79 1.01-2.87 1.01-1.16 0-2.22-.61-2.92-1.63v2.02H5.06v-8.1h2.92V9.92c-.7.91-1.76 1.63-2.92 1.63-1.08 0-2.05-.35-2.87-1.01-1.07-.82-1.73-2.1-1.73-3.61c0-1.5.66-2.79 1.73-3.61.82-.66 1.79-1.01 2.87-1.01 1.16 0 2.22.61 2.92 1.63V4.9H5.06v8.1h2.92V7.9H5.06V4.9h2.92V2.9c0-1.72 1.34-3.12 3.01-3.12 1.34 0 2.45.69 3.05 1.76L16 2.6c-.6-.73-1.46-1.2-2.45-1.2-1.67 0-3.01 1.41-3.01 3.12z" />
        </svg>
        <span>Login with Google</span>
      </button>

      <button class="w-full py-3 px-6 rounded-xl flex items-center justify-center space-x-3 text-lg font-semibold bg-stone-200 dark:bg-stone-900 shadow-neu-inner-light dark:shadow-neu-inner-dark hover:shadow-neu-light hover:dark:shadow-neu-dark active:shadow-neu-inner-light active:dark:shadow-neu-inner-dark transition-all duration-300 text-stone-700 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M20.21 16.94c.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0 0 0 0 0 0 0 .0-.0 0-.0 0-.0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .0-.0.0-.0.0-.0.0-.0.0-.0V14.1c0 0 0-.0-.0-.0c0-.0-.0-.0-.0-.0c.0-.0-.0-.0-.0-.0.0-.0.0-.0-.0-.0.0-.0-.0-.0-.0-.0.0-.0-.0-.0-.0-.0.0-.0-.0-.0-.0-.0.0-.0-.0-.0-.0-.0.0-.0.0-.0.0-.0.0-.0.0-.0.0-.0V14.1zM12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zM12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zM12.91 16.974c-.032-.012-.064-.025-.096-.038-.035-.014-.07-.028-.105-.043-.03-.012-.06-.024-.09-.037-.035-.014-.07-.029-.105-.043-.033-.013-.066-.026-.099-.04-.04-.016-.08-.032-.12-.048-.034-.014-.068-.027-.101-.041-.04-.016-.079-.032-.119-.048-.034-.013-.069-.027-.103-.041-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.034-.013-.069-.027-.103-.041-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.034-.014-.069-.028-.103-.042-.04-.016-.08-.032-.12-.048-.035-.014-.07-.028-.105-.043-.033-.013-.067-.027-.1-.04-.04-.016-.08-.032-.12-.048-.018-.007-.036-.014-.054-.022-.02-.008-.04-.015-.06-.023C6.014 16.96 6.012 16.96 6.012 16.96h-.002c-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0 0 0 0 0 0 0 .0 0 .0-.0 .0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0C5.992 16.94 5.992 16.94 5.992 16.94h-.002c-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0 0 0 0 0 0 0 .0 0 .0-.0 .0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0-.0S6.01 16.94 6.01 16.94z" />
        </svg>
        <span>Login with Apple</span>
      </button>
    </div>

    <div class="relative flex py-5 items-center mb-6">
      <div class="flex-grow border-t border-stone-400 dark:border-stone-700"></div>
      <span class="flex-shrink mx-4 text-stone-500 dark:text-stone-400 text-sm">Or use your Player ID</span>
      <div class="flex-grow border-t border-stone-400 dark:border-stone-700"></div>
    </div>

    <form class="space-y-5">
      <div class="relative">
        <input
          type="text"
          id="username"
          name="username"
          placeholder=""
          class="peer w-full px-4 py-3 rounded-xl bg-stone-200 dark:bg-stone-900 border border-transparent shadow-neu-inner-light dark:shadow-neu-inner-dark focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900 transition-all duration-300 text-stone-800 dark:text-stone-300 placeholder-transparent"
          autocomplete="username"
        />
        <label
          for="username"
          class="absolute left-4 top-1/2 -translate-y-1/2 text-stone-500 dark:text-stone-400 text-base transition-all duration-300 ease-in-out
                   peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-stone-500 peer-placeholder-shown:dark:text-stone-400 peer-placeholder-shown:text-base
                   peer-focus:top-3 peer-focus:-translate-y-full peer-focus:text-xs peer-focus:text-amber-600 dark:peer-focus:text-amber-400"
        >
          Player ID or Email
        </label>
      </div>

      <div class="relative">
        <input
          type="password"
          id="password"
          name="password"
          placeholder=""
          class="peer w-full px-4 py-3 rounded-xl bg-stone-200 dark:bg-stone-900 border border-transparent shadow-neu-inner-light dark:shadow-neu-inner-dark focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900 transition-all duration-300 text-stone-800 dark:text-stone-300 placeholder-transparent"
          autocomplete="current-password"
        />
        <label
          for="password"
          class="absolute left-4 top-1/2 -translate-y-1/2 text-stone-500 dark:text-stone-400 text-base transition-all duration-300 ease-in-out
                   peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-stone-500 peer-placeholder-shown:dark:text-stone-400 peer-placeholder-shown:text-base
                   peer-focus:top-3 peer-focus:-translate-y-full peer-focus:text-xs peer-focus:text-amber-600 dark:peer-focus:text-amber-400"
        >
          Password
        </label>
      </div>

      <div class="flex items-center justify-between text-sm sm:text-base">
        <div class="flex items-center">
          <input
            type="checkbox"
            id="remember-me"
            name="remember-me"
            class="h-4 w-4 text-amber-600 dark:text-amber-500 rounded border-stone-300 dark:border-stone-700 bg-stone-300 dark:bg-stone-700 focus:ring-amber-500 dark:focus:ring-amber-600 mr-2 shadow-neu-inner-light dark:shadow-neu-inner-dark transform scale-90 checked:scale-100 transition-all duration-200 cursor-pointer"
          />
          <label for="remember-me" class="text-stone-600 dark:text-stone-400 select-none">Remember me</label>
        </div>
        <a href="#" class="text-amber-600 dark:text-amber-500 hover:text-amber-700 dark:hover:text-amber-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900 rounded-md py-0.5 px-1 -mx-1 -my-0.5">Forgot Password?</a>
      </div>

      <button type="submit" class="w-full py-3 px-6 rounded-xl font-bold text-lg bg-amber-600 hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600 text-white shadow-lg shadow-amber-500/50 dark:shadow-amber-700/50 hover:shadow-xl hover:shadow-amber-600/60 dark:hover:shadow-amber-800/60 transition-all duration-300 transform active:scale-98 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900">
        Login
      </button>
    </form>

    <p class="mt-8 text-center text-stone-600 dark:text-stone-400 text-sm sm:text-base">
      Don't have an account? 
      <a href="#" class="text-amber-600 dark:text-amber-500 hover:text-amber-700 dark:hover:text-amber-400 font-semibold transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-900 rounded-md py-0.5 px-1 -mx-1 -my-0.5">Sign Up</a>
    </p>

    <!-- Decorative elements from Neumorphism principles -->
    <div class="absolute -top-8 -left-8 w-24 h-24 rounded-full bg-stone-300 dark:bg-stone-800 shadow-xl opacity-30 blur-md group-hover:top-4 group-hover:left-4 transition-all duration-700 pointer-events-none"></div>
    <div class="absolute -bottom-8 -right-8 w-32 h-32 rounded-full bg-amber-300 dark:bg-amber-800 shadow-xl opacity-20 blur-md group-hover:bottom-4 group-hover:right-4 transition-all duration-700 delay-100 pointer-events-none"></div>

  </div>
</div>

<style>
  /* Custom CSS for Neumorphism shadows */
  .shadow-neu-light {
    box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neu-light {
    box-shadow: none; /* Disable light shadow in dark mode */
  }
  .shadow-neu-dark {
    box-shadow: none; /* Disable dark shadow in light mode */
  }
  .dark .shadow-neu-dark {
    box-shadow: 6px 6px 12px #1c1c1c, -6px -6px 12px #2a2a2a;
  }

  .shadow-neu-inner-light {
    box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-neu-inner-light {
    box-shadow: none;
  }
  .shadow-neu-inner-dark {
    box-shadow: none;
  }
  .dark .shadow-neu-inner-dark {
    box-shadow: inset 5px 5px 10px #1c1c1c, inset -5px -5px 10px #2a2a2a;
  }

  /* Animated Label for input fields */
  .group.relative input:placeholder-shown + label,
  .peer:placeholder-shown + label {
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem; /* Base size */
    color: theme('colors.stone.500');
  }

  .dark .group.relative input:placeholder-shown + label,
  .dark .peer:placeholder-shown + label {
    color: theme('colors.stone.400');
  }

  .group.relative input:focus + label,
  .peer:focus + label {
    top: 0.75rem; /* 12px from top */
    transform: translateY(-100%);
    font-size: 0.75rem; /* text-xs */
    color: theme('colors.amber.600');
  }

  .dark .group.relative input:focus + label,
  .dark .peer:focus + label {
    color: theme('colors.amber.400');
  }

   .peer:focus ~ .text-stone-500 {
      color: theme('colors.amber.600'); /* Change label color on focus */
   }
   .dark .peer:focus ~ .text-stone-500 {
      color: theme('colors.amber.400');
   }
</style>

Social Login Component

A complex social login component for a marketplace, featuring social login buttons, email/password fields, and 'forgot password'/'sign up' links. Designed with Material Design principles using jewel tones, full responsiveness, and dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden md:max-w-xl lg:max-w-lg">
    <div class="p-6 sm:p-8 lg:p-10">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-2 text-center">
        Welcome Back!
      </h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-8 text-center">
        Log in to your marketplace account
      </p>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
        <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900 focus:ring-emerald-600 transition-colors duration-200">
          <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="currentColor">
            <path d="M22 12c0-1.04-.09-2.05-.25-3.03H12v6h5.8c-.28 1.95-1.16 3.59-2.66 4.67v3.08h2.64c1.55-1.46 2.45-3.54 2.45-5.92z" fill="#4285F4"/>
            <path d="M12 22c3.24 0 5.96-1.08 7.95-2.92l-2.64-3.08c-1.07.72-2.45 1.15-4.11 1.15-3.14 0-5.83-2.11-6.79-4.87H2.89v3.08C4.84 19.38 8.1 22 12 22z" fill="#34A853"/>
            <path d="M5.21 15.02c-.17-.5-.27-1.04-.27-1.61s.1-.94.27-1.44V8.89H2.89C2.26 10.15 2 11.51 2 13s.26 2.85.89 4.11L5.21 15.02z" fill="#FBBC05"/>
            <path d="M12 4.01c1.76 0 3.32.6 4.54 1.76l2.31-2.31C17.97 1.83 15.22 0 12 0 8.1 0 4.84 2.62 2.89 6.09l2.32 1.8C6.17 4.58 8.86 2.47 12 2.47z" fill="#EA4335"/>
          </svg>
          Google
        </button>
        <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900 focus:ring-emerald-600 transition-colors duration-200">
          <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="currentColor">
            <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.96 3.65 9.09 8.42 9.87V14.6h-2.54V12h2.54V9.78c0-2.5 1.5-3.88 3.77-3.88 1.09 0 2.05.08 2.32.12v2.1l-1.24.01c-1.22 0-1.45.58-1.45 1.42V12h2.89l-.45 2.6h-2.44v7.27C18.35 21.09 22 16.96 22 12z" fill="#1877F2"/>
          </svg>
          Facebook
        </button>
      </div>

      <div class="relative flex py-5 items-center mb-6">
        <div class="flex-grow border-t border-gray-300 dark:border-gray-700"></div>
        <span class="flex-shrink mx-4 text-gray-400 dark:text-gray-500 text-sm">Or continue with</span>
        <div class="flex-grow border-t border-gray-300 dark:border-gray-700"></div>
      </div>

      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Email address
          </label>
          <div class="mt-1">
            <input id="email" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-colors duration-200">
          </div>
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
            Password
          </label>
          <div class="mt-1">
            <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-emerald-500 focus:border-emerald-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-colors duration-200">
          </div>
        </div>

        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 transition-colors duration-200">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">
              Remember me
            </label>
          </div>

          <div class="text-sm">
            <a href="#" class="font-medium text-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300 transition-colors duration-200">
              Forgot your password?
            </a>
          </div>
        </div>

        <div>
          <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-sapphire-600 hover:bg-sapphire-700 dark:bg-sapphire-700 dark:hover:bg-sapphire-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sapphire-500 transition-colors duration-200" style="@apply bg-blue-700 hover:bg-blue-800 dark:bg-blue-600;">
            Sign in
          </button>
        </div>
      </form>

      <p class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
        Don't have an account? 
        <a href="#" class="font-medium text-emerald-600 hover:text-emerald-500 dark:text-emerald-400 dark:hover:text-emerald-300 transition-colors duration-200">
          Sign up
        </a>
      </p>
    </div>
  </div>
</div>

<style>
  /* Custom colors for jewel tones (tailwind.config.js usually handles this) */
  .bg-sapphire-600 {
    background-color: #2F599A; /* Example: A deep blue */
  }
  .hover\:bg-sapphire-700:hover {
    background-color: #264A81; /* Darker on hover */
  }
  .dark\:bg-sapphire-700 {
    background-color: #264A81;
  }
  .dark\:hover\:bg-sapphire-800:hover {
    background-color: #1D3A68;
  }
  .focus\:ring-sapphire-500:focus {
    --tw-ring-color: #3F6DAF;
  }

  .text-emerald-600 {
    color: #048C54; /* Example: A rich emerald green */
  }
  .hover\:text-emerald-500:hover {
    color: #037A47;
  }
  .dark\:text-emerald-400 {
    color: #12B377;
  }
  .dark\:hover\:text-emerald-300:hover {
    color: #0FB16C;
  }
</style>

Social Login Component

A simple, skeumorphic social login component with complementary colors, suitable for a blog or content site, designed to be responsive and support dark mode.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm p-6 rounded-3xl shadow-xl bg-gradient-to-br from-indigo-200 to-purple-300 dark:from-indigo-800 dark:to-purple-900 border border-indigo-300 dark:border-purple-700
              transform transition-all duration-300 hover:scale-105 hover:shadow-2xl
              relative overflow-hidden group">

    <!-- Background Blips for Skeuomorphism -->
    <div class="absolute top-[-20px] left-[-20px] w-20 h-20 bg-indigo-400 dark:bg-purple-600 rounded-full opacity-30 blur-2xl group-hover:scale-150 transition-transform"></div>
    <div class="absolute bottom-[-20px] right-[-20px] w-24 h-24 bg-purple-400 dark:bg-indigo-600 rounded-full opacity-30 blur-2xl group-hover:scale-150 transition-transform"></div>

    <h2 class="text-center text-3xl font-extrabold text-indigo-900 dark:text-white mb-6
               relative drop-shadow-md">
      <span class="relative z-10">Login</span>
      <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full opacity-10 blur-xl"></span>
    </h2>

    <p class="text-center text-gray-700 dark:text-gray-300 mb-8">
      Join us to access exclusive content and features.
    </p>

    <div class="space-y-4">
      <!-- Google Button -->
      <button class="w-full flex items-center justify-center py-3 px-4 rounded-xl
                     bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200
                     shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2
                     focus:ring-indigo-500 dark:focus:ring-purple-500
                     transform transition-all duration-200
                     hover:-translate-y-0.5 active:translate-y-0 active:shadow-md
                     border border-gray-200 dark:border-gray-700
                     relative overflow-hidden">
        <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-gray-50 to-gray-200 dark:from-gray-700 dark:to-gray-900 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3 z-10" viewBox="0 0 24 24" fill="currentColor">
          <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h6.15c-.24 1.34-.9 2.45-1.92 3.23v2.8h3.69c2.16-2 3.42-4.93 3.42-8.24z" fill="#4285F4"></path>
          <path d="M12 23c3.27 0 6.02-1.08 8.03-2.91l-3.69-2.8c-1 .67-2.3 1.07-4.34 1.07-3.33 0-6.1-2.22-7.12-5.21H.9v2.87C2.98 20.58 7.15 23 12 23z" fill="#34A853"></path>
          <path d="M4.88 14.16c-.1-.3-.16-.62-.16-.96s.06-.66.16-.96V9.33H.9C.33 10.44 0 11.68 0 12.97s.33 2.53.9 3.64l3.98-3.9z" fill="#FBBC05"></path>
          <path d="M12 5.03c1.77 0 3.3.61 4.54 1.79l3.24-3.24C18.02 1.84 15.27 0 12 0 7.15 0 2.98 2.42.9 6.01l3.98 3.09c1.02-2.99 3.79-5.21 7.12-5.21z" fill="#EA4335"></path>
        </svg>
        <span class="font-semibold z-10">Sign in with Google</span>
      </button>

      <!-- Facebook Button -->
      <button class="w-full flex items-center justify-center py-3 px-4 rounded-xl
                     bg-blue-600 dark:bg-blue-800 text-white
                     shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2
                     focus:ring-blue-500 dark:focus:ring-blue-700
                     transform transition-all duration-200
                     hover:-translate-y-0.5 active:translate-y-0 active:shadow-md
                     border border-blue-700 dark:border-blue-900
                     relative overflow-hidden">
        <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-blue-700 to-blue-500 dark:from-blue-900 dark:to-blue-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3 z-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
          <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.909c0-.818.062-1.491 1.092-1.491h2.908v-5h-4c-4.473 0-5 3.159-5 5.258v2.742z"></path>
        </svg>
        <span class="font-semibold z-10">Sign in with Facebook</span>
      </button>

      <!-- Email login option -->
      <div class="relative flex py-5 items-center">
        <div class="flex-grow border-t border-gray-400 dark:border-gray-600"></div>
        <span class="flex-shrink mx-4 text-gray-600 dark:text-gray-400 font-medium">Or</span>
        <div class="flex-grow border-t border-gray-400 dark:border-gray-600"></div>
      </div>

      <button class="w-full flex items-center justify-center py-3 px-4 rounded-xl
                     bg-indigo-600 dark:bg-purple-600 text-white
                     shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2
                     focus:ring-indigo-700 dark:focus:ring-purple-700
                     transform transition-all duration-200
                     hover:-translate-y-0.5 active:translate-y-0 active:shadow-md
                     border border-indigo-700 dark:border-purple-700
                     relative overflow-hidden">
        <span class="absolute inset-0 w-full h-full bg-gradient-to-r from-indigo-700 to-purple-500 dark:from-purple-800 dark:to-indigo-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        <svg class="w-5 h-5 mr-3 z-10" 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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
        </svg>
        <span class="font-semibold z-10">Sign in with Email</span>
      </button>
    </div>

    <p class="mt-8 text-center text-gray-700 dark:text-gray-300 text-sm">
      Don't have an account? 
      <a href="#" class="font-bold text-indigo-700 dark:text-purple-400 hover:underline
                          transform transition-colors duration-200 hover:text-indigo-900 dark:hover:text-purple-300">
        Sign up
      </a>
    </p>
  </div>
</div>

Social Login Component

A Glassmorphism-styled social login component in grayscale, with support for dark mode, suitable for e-commerce sites. The design is responsive and includes frosted glass effects and blur. No JavaScript is included.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-full max-w-md p-8 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-2xl shadow-5xl border border-opacity-30 border-white dark:bg-gray-800 dark:bg-opacity-20 dark:border-gray-700 mx-4">
    <div class="absolute inset-0 rounded-2xl pointer-events-none" style="background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);"></div>
    <div class="relative z-10">
      <h2 class="text-3xl font-bold text-gray-800 dark:text-white text-center mb-6">Social Login</h2>
      <p class="text-gray-600 dark:text-gray-300 text-center mb-8">Sign in to unlock exclusive shopping features.</p>

      <div class="space-y-4">
        <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-gray-800 dark:text-white bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 hover:bg-opacity-60 dark:hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition duration-200 ease-in-out backdrop-filter backdrop-blur-lg">
          <img src="https://www.google.com/images/branding/googleg/1x/googleg_standard_color_64dp.png" alt="Google icon" class="h-6 w-6 mr-3">
          Sign in with Google
        </button>
        <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-gray-800 dark:text-white bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 hover:bg-opacity-60 dark:hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition duration-200 ease-in-out backdrop-filter backdrop-blur-lg">
          <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Facebook_Logo_%282019%29.png" alt="Facebook icon" class="h-6 w-6 mr-3">
          Sign in with Facebook
        </button>
        <button class="w-full flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-gray-800 dark:text-white bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 hover:bg-opacity-60 dark:hover:bg-opacity-60 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition duration-200 ease-in-out backdrop-filter backdrop-blur-lg">
          <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Twitter-logo.png" alt="Twitter icon" class="h-6 w-6 mr-3">
          Sign in with Twitter
        </button>
      </div>

      <div class="mt-8 text-center">
        <p class="text-gray-600 dark:text-gray-300">Don't have an account? <a href="#" class="text-gray-800 dark:text-white font-medium hover:underline">Sign up</a></p>
      </div>
    </div>
  </div>
</div>

Social Login Component

A simple social login component with a Skeuomorphic design, earth tones, and a responsive layout with dark mode support. This component is suitable for blog or content consumption websites, offering a visually appealing and user-friendly login experience.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4">
  <div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 p-8 rounded-xl shadow-2xl border-t border-l border-stone-200 dark:border-stone-600 transform transition-all duration-300 hover:scale-105 active:scale-95">
    <h2 class="text-center text-stone-800 dark:text-stone-100 text-2xl font-semibold mb-6 drop-shadow-md">Join Us</h2>
    <div class="space-y-4">
      <button class="w-full flex items-center justify-center bg-brown-500 hover:bg-brown-600 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-brown-400 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
        <img src="https://www.google.com/images/branding/googleg/2x/googleg_standard_color_64dp.png" alt="Google icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with Google
      </button>
      <button class="w-full flex items-center justify-center bg-blue-700 hover:bg-blue-800 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/1024px-2021_Facebook_icon.svg.png" alt="Facebook icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with Facebook
      </button>
      <button class="w-full flex items-center justify-center bg-gray-800 hover:bg-gray-900 text-white font-bold py-3 px-4 rounded-lg shadow-lg hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-gray-700 focus:ring-opacity-75 transform transition-all duration-200 active:translate-y-0.5">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/X_logo_2023.svg/512px-X_logo_2023.svg.png" alt="X icon" class="w-6 h-6 mr-3 filter drop-shadow-md">Sign in with X
      </button>
    </div>
    <p class="text-center text-stone-700 dark:text-stone-300 text-sm mt-6">
      By joining, you agree to our <a href="#" class="text-brown-600 hover:text-brown-700 dark:text-brown-400 dark:hover:text-brown-500 font-medium">Terms of Service</a>.
    </p>
  </div>
</div>

Social Login Component

A complex, responsive social login component designed for dashboards. Utilizes a dark mode UI with a grayscale color scheme. Features social provider buttons, an email/password form, a "Remember me" toggle, and separator with alternate login options. Fully responsive with image illustration and uses Tailwind CSS with dark: prefix for dark theme support. No JavaScript needed.

Open Preview

                <section class="min-h-screen flex items-center justify-center px-4 py-12 bg-gray-50 dark:bg-gray-900">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden grid grid-cols-1 md:grid-cols-2">
    <!-- Illustration Section -->
    <div class="hidden md:block">
      <img src="https://picsum.photos/seed/dashboard/800/600" alt="Dashboard Illustration" class="object-cover w-full h-full">
    </div>
    <!-- Login Form Section -->
    <div class="px-6 py-8 sm:px-10">
      <h2 class="text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100">Sign in to your Dashboard</h2>
      <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">Use your social account or email</p>
      <!-- Social Login Buttons -->
      <div class="mt-8 grid grid-cols-3 gap-3">
        <button type="button" class="w-full inline-flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-sm leading-5 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
          <span class="w-5 h-5 flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full text-gray-900 dark:text-gray-100 text-sm font-semibold">G</span>
          <span class="ml-2">Google</span>
        </button>
        <button type="button" class="w-full inline-flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-sm leading-5 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
          <span class="w-5 h-5 flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full text-gray-900 dark:text-gray-100 text-sm font-semibold">T</span>
          <span class="ml-2">Twitter</span>
        </button>
        <button type="button" class="w-full inline-flex items-center justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 text-sm leading-5 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
          <span class="w-5 h-5 flex items-center justify-center bg-gray-200 dark:bg-gray-600 rounded-full text-gray-900 dark:text-gray-100 text-sm font-semibold">GH</span>
          <span class="ml-2">GitHub</span>
        </button>
      </div>
      <!-- Divider -->
      <div class="relative mt-6">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">Or continue with</span>
        </div>
      </div>
      <!-- Email & Password Form -->
      <form class="mt-6 space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email address</label>
          <div class="mt-1">
            <input id="email" type="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-gray-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 sm:text-sm">
          </div>
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
          <div class="mt-1">
            <input id="password" type="password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-gray-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 sm:text-sm">
          </div>
        </div>
        <div class="flex items-center justify-between">
          <label class="flex items-center">
            <input id="remember_me" type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-400 border-gray-300 dark:border-gray-600 focus:ring-gray-500">
            <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Remember me</span>
          </label>
          <div class="text-sm">
            <a href="#" class="font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Forgot your password?</a>
          </div>
        </div>
        <div>
          <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">Sign in</button>
        </div>
      </form>
      <p class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Sign up</a></p>
    </div>
  </div>
</section>

Material Design Social Login Component

Material Design Social Login Component with Complementary color scheme, moderate complexity, for Blog/Content purpose, responsive with dark mode support using Tailwind CSS.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md w-96">
    <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white mb-6">Login</h2>
    <div class="flex flex-col space-y-4">
      <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
        <img class="h-5 w-5 mr-2" src="https://fonts.gstatic.com/s/i/productlogos/google/v6/24px.svg" alt="Google logo">
        Sign in with Google
      </button>
      <button class="flex items-center justify-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
        <svg class="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 0C5.373 0 0 5.373 0 12c0 5.083 3.791 9.362 8.75 10l-.002-.002v-.001l.002.001V17h-3v-5h3V9c0-3.306 1.976-5.164 4.936-5.164C15.232 3.836 16.5 4 16.5 4v3h-2.473c-1.742 0-2.527.873-2.527 2.075V12h4.999l-.649 5h-4.35v5.999c5-.638 8.75-4.918 8.75-10C24 5.373 18.627 0 12 0z" />
        </svg>
        Sign in with Facebook
      </button>
    </div>
    <div class="mt-6 text-center text-gray-600 dark:text-gray-400 text-sm">
      Don't have an account? <a href="#" class="text-blue-500 hover:underline">Sign up</a>
    </div>
  </div>
</div>

Social Login Component

A responsive social login component designed for dark mode using a monochromatic color scheme. Suitable for blog and content consumption with interactive features.

Open Preview

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-bold mb-4 text-center">Log in with Social Media</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Google</span>
        </a>
        <a href="#" class="flex items-center justify-center bg-gray-700 hover:bg-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800 text-white font-semibold py-2 rounded-lg shadow transition duration-200">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            <span>Log in with Twitter</span>
        </a>
    </div>
    <p class="mt-4 text-center text-gray-400">Or, <a href="#" class="text-gray-300 hover:underline">create a new account</a></p>
</div>

Search Components

Categories

Social Login