Search Components

Login/Signup

User account access components

Minimalist Login/Signup Form - Fashion/Beauty

A minimalist and flat design login/signup form tailored for fashion/beauty brands, featuring warm neutral colors, full responsiveness, and dark mode support. It offers a clean aesthetic with a focus on user experience.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-800 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">
  <div class="w-full max-w-md bg-white dark:bg-stone-800 shadow-xl rounded-lg overflow-hidden flex flex-col md:flex-row transition-all duration-300 transform md:hover:scale-105">
    <!-- Image Section - Visible on Larger Screens -->
    <div class="hidden md:flex md:w-1/2 bg-stone-100 dark:bg-stone-700 p-4 items-center justify-center">
      <img src="https://picsum.photos/400/600?grayscale&blur=2" alt="Fashion background" class="object-cover w-full h-full rounded-md shadow-inner opacity-80">
    </div>

    <!-- Form Section -->
    <div class="w-full md:w-1/2 p-6 sm:p-8 lg:p-10 text-stone-700 dark:text-stone-300">
      <h2 id="form-title" class="text-3xl sm:text-4xl font-light text-center mb-6 dark:text-stone-100">Welcome Back</h2>
      
      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium mb-2">Email address</label>
          <input type="email" id="email" name="email" autocomplete="email" required
                 class="w-full px-4 py-2 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm
                        focus:ring-stone-500 focus:border-stone-500 dark:bg-stone-700 dark:text-stone-100
                        placeholder-stone-400 dark:placeholder-stone-500 transition-colors duration-200">
        </div>
        
        <div>
          <label for="password" class="block text-sm font-medium mb-2">Password</label>
          <input type="password" id="password" name="password" autocomplete="current-password" required
                 class="w-full px-4 py-2 border border-stone-300 dark:border-stone-600 rounded-md shadow-sm
                        focus:ring-stone-500 focus:border-stone-500 dark:bg-stone-700 dark:text-stone-100
                        placeholder-stone-400 dark:placeholder-stone-500 transition-colors duration-200">
        </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-stone-600 dark:text-stone-400 focus:ring-stone-500 dark:focus:ring-stone-500 border-stone-300 dark:border-stone-600 rounded">
            <label for="remember-me" class="ml-2 block">Remember me</label>
          </div>
          
          <a href="#" class="font-medium text-stone-600 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-200">Forgot your password?</a>
        </div>
        
        <div>
          <button type="submit"
                  class="w-full py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-medium text-white
                         bg-stone-700 hover:bg-stone-800 dark:bg-stone-500 dark:hover:bg-stone-600
                         focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500
                         dark:focus:ring-offset-stone-800 transition-all duration-200 transform hover:-translate-y-0.5">
            Sign In
          </button>
        </div>
      </form>
      
      <div class="mt-8 text-center text-sm">
        <p>Don't have an account?
          <a href="#" class="font-medium text-stone-600 hover:text-stone-800 dark:text-stone-400 dark:hover:text-stone-200 transition-colors duration-200 ml-1">Sign Up</a>
        </p>
      </div>

      <div class="relative mt-8">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-stone-300 dark:border-stone-600"></div>
        </div>
        <div class="relative flex justify-center text-sm">
          <span class="px-2 bg-white dark:bg-stone-800 text-stone-500 dark:text-stone-400">Or continue with</span>
        </div>
      </div>

      <div class="mt-6 flex justify-center space-x-4">
        <button type="button" class="inline-flex items-center justify-center p-3 border border-stone-300 dark:border-stone-600 rounded-full shadow-sm text-stone-500 dark:text-stone-400 hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:focus:ring-offset-stone-800">
          <span class="sr-only">Sign in with Google</span>
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12.48 10.92v3.28h3.36c-.19 1.14-.81 1.94-1.89 2.51v2.19h2.83c1.67-1.53 2.64-3.97 2.64-7.52 0-.91-.12-1.64-.33-2.34H12.48z"/>
            <path d="M5.25 12.00c0 .91.15 1.76.41 2.56l-3.33 2.59C1.65 15.35 1 13.78 1 12.00S1.65 8.65 2.33 7.37l3.33 2.59C5.4 10.24 5.25 11.09 5.25 12.00z"/>
            <path d="M12.48 4.73c1.83 0 3.25.79 4.35 1.7L19.5 3.5C18.06 2.22 16.27 1.5 12.48 1.5c-3.15 0-5.87 1.7-7.39 4.29l3.33 2.59C9.28 6.43 10.7 4.73 12.48 4.73z"/>
            <path d="M23.00 12.00c0-.75-.07-1.42-.2-2.07H12.48L12.48 14.28H21.0c-.23 1.29-.76 2.45-1.58 3.39l2.83 2.19c1.07-1.22 1.63-2.79 1.63-4.86z"/>
          </svg>
        </button>
        <button type="button" class="inline-flex items-center justify-center p-3 border border-stone-300 dark:border-stone-600 rounded-full shadow-sm text-stone-500 dark:text-stone-400 hover:bg-stone-50 dark:hover:bg-stone-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-stone-500 dark:focus:ring-offset-stone-800">
          <span class="sr-only">Sign in with Facebook</span>
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.776-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Login/Signup Component

A simple and responsive login/signup form designed for manufacturing/industrial companies, featuring a monochrome palette with a bright accent color, gradient transitions, and dark mode support.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-md border border-gray-200 dark:border-gray-700 transition-colors duration-300 overflow-hidden relative">
    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-indigo-300 via-purple-300 to-pink-300 opacity-20 dark:from-indigo-600 dark:via-purple-600 dark:to-pink-600 dark:opacity-10 pointer-events-none transition-all duration-500 blur-sm"></div>
    <div class="relative z-10">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-6 text-center transition-colors duration-300">
        Welcome Back
      </h2>
      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 transition-colors duration-300">
            Email Address
          </label>
          <input type="email" id="email" name="email" autocomplete="email" required class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 transition-colors duration-300">
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 transition-colors duration-300">
            Password
          </label>
          <input type="password" id="password" name="password" autocomplete="current-password" required class="appearance-none block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm bg-gray-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 transition-colors duration-300">
        </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-purple-600 focus:ring-purple-500 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300 transition-colors duration-300">
              Remember me
            </label>
          </div>

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

        <div>
          <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:bg-purple-700 dark:hover:bg-purple-600 transition-all duration-300 transform hover:scale-105 active:scale-95
          relative overflow-hidden group">
            <span class="relative z-10">Sign In</span>
            <span class="absolute inset-0 bg-gradient-to-r from-purple-500 to-pink-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 mix-blend-screen"></span>
          </button>
        </div>
      </form>

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

Login/Signup Component - Earth Tones Gradient

A responsive login/signup component designed for job/career platforms, featuring earth tone gradients and smooth transitions. Includes dark mode support and semantic HTML.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-stone-100 to-amber-50 dark:from-stone-900 dark:to-orange-950 transition-all duration-500">
  <div class="w-full max-w-md rounded-2xl shadow-xl overflow-hidden bg-white dark:bg-stone-800 transition-all duration-500 transform hover:scale-[1.01]">
    <div class="relative p-8 sm:p-10 bg-gradient-to-tr from-stone-400 to-amber-600 dark:from-stone-700 dark:to-orange-800 text-white">
      <h2 id="form-title" class="text-3xl sm:text-4xl font-extrabold text-center drop-shadow-md leading-tight">
        Welcome,
        <br class="sm:hidden"/> 
        Future Talent!
      </h2>
      <p class="mt-3 text-center opacity-90 text-sm sm:text-base">
        Find your dream job or connect with top employers.
      </p>
      <div class="absolute inset-0 z-0 opacity-20">
        <img src="https://picsum.photos/600/400?random=1" alt="Abstract background" class="w-full h-full object-cover" />
      </div>
    </div>

    <div class="p-8 sm:p-10">
      <div class="flex mb-6 rounded-lg overflow-hidden bg-stone-100 dark:bg-stone-700 shadow-inner">
        <button
          id="login-tab"
          class="flex-1 py-3 px-4 text-center text-lg font-semibold rounded-lg
          bg-gradient-to-r from-amber-600 to-orange-700 text-white shadow-md
          dark:from-orange-700 dark:to-stone-600 transition-all duration-300 transform scale-105"
          aria-controls="login-form" role="tab" aria-selected="true"
        >
          Login
        </button>
        <button
          id="signup-tab"
          class="flex-1 py-3 px-4 text-center text-lg font-medium text-stone-600 rounded-lg
          dark:text-stone-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-300 hover:bg-stone-50 dark:hover:bg-stone-600"
          aria-controls="signup-form" role="tab" aria-selected="false"
        >
          Sign Up
        </button>
      </div>

      <form id="login-form" class="space-y-6" aria-labelledby="form-title" role="tabpanel">
        <div>
          <label for="login-email" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Email Address</label>
          <input
            type="email"
            id="login-email"
            name="email"
            autocomplete="email"
            required
            class="w-full px-4 py-3 border border-stone-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500
            dark:bg-stone-700 dark:border-stone-600 dark:text-white dark:focus:ring-amber-400 dark:focus:border-amber-400 transition-all duration-200"
            placeholder="[email protected]"
          />
        </div>
        <div>
          <label for="login-password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Password</label>
          <input
            type="password"
            id="login-password"
            name="password"
            autocomplete="current-password"
            required
            class="w-full px-4 py-3 border border-stone-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500
            dark:bg-stone-700 dark:border-stone-600 dark:text-white dark:focus:ring-amber-400 dark:focus:border-amber-400 transition-all duration-200"
            placeholder="********"
          />
        </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-amber-600 focus:ring-amber-500 border-stone-300 rounded dark:text-amber-500 dark:focus:ring-amber-400 dark:border-stone-600"
            />
            <label for="remember-me" class="ml-2 block text-sm text-stone-900 dark:text-stone-200">Remember me</label>
          </div>
          <a href="#" class="text-sm font-medium text-amber-600 hover:text-amber-800 dark:text-amber-400 dark:hover:text-amber-300 transition-colors duration-200">Forgot 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-semibold text-white
          bg-gradient-to-r from-amber-600 to-orange-700 hover:from-amber-700 hover:to-orange-800
          dark:from-orange-800 dark:to-orange-900 dark:hover:from-orange-900 dark:hover:to-stone-900
          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-stone-800 dark:focus:ring-orange-600
          transition-all duration-300 transform hover:scale-[1.01] active:scale-[0.99]"
        >
          Login
        </button>
      </form>

      <form id="signup-form" class="space-y-6 hidden" aria-labelledby="form-title" role="tabpanel">
        <div>
          <label for="signup-name" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Full Name</label>
          <input
            type="text"
            id="signup-name"
            name="name"
            autocomplete="name"
            required
            class="w-full px-4 py-3 border border-stone-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500
            dark:bg-stone-700 dark:border-stone-600 dark:text-white dark:focus:ring-amber-400 dark:focus:border-amber-400 transition-all duration-200"
            placeholder="John Doe"
          />
        </div>
        <div>
          <label for="signup-email" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Email Address</label>
          <input
            type="email"
            id="signup-email"
            name="email"
            autocomplete="email"
            required
            class="w-full px-4 py-3 border border-stone-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500
            dark:bg-stone-700 dark:border-stone-600 dark:text-white dark:focus:ring-amber-400 dark:focus:border-amber-400 transition-all duration-200"
            placeholder="[email protected]"
          />
        </div>
        <div>
          <label for="signup-password" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Password</label>
          <input
            type="password"
            id="signup-password"
            name="password"
            autocomplete="new-password"
            required
            class="w-full px-4 py-3 border border-stone-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-amber-500
            dark:bg-stone-700 dark:border-stone-600 dark:text-white dark:focus:ring-amber-400 dark:focus:border-amber-400 transition-all duration-200"
            placeholder="Minimum 8 characters"
          />
        </div>
        <button
          type="submit"
          class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-semibold text-white
          bg-gradient-to-r from-amber-600 to-orange-700 hover:from-amber-700 hover:to-orange-800
          dark:from-orange-800 dark:to-orange-900 dark:hover:from-orange-900 dark:hover:to-stone-900
          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-stone-800 dark:focus:ring-orange-600
          transition-all duration-300 transform hover:scale-[1.01] active:scale-[0.99]"
        >
          Sign Up
        </button>
      </form>

      <div class="mt-8 text-center">
        <p class="text-sm text-stone-600 dark:text-stone-400">
          Or continue with
        </p>
        <div class="mt-4 flex justify-center space-x-4">
          <button class="p-3 rounded-full bg-stone-100 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors shadow flex items-center justify-center">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12.0003 12.721C14.0506 12.721 15.6565 12.0299 16.7909 10.9234L19.4636 13.5961C17.7533 15.2259 15.2891 16.2737 12.0003 16.2737C7.4 16.2737 3.5332 13.2981 1.9996 9.27856L5.37482 6.67139C6.20817 8.8951 8.878 10.2737 12.0003 10.2737C13.2514 10.2737 14.4093 10.0245 15.4206 9.61056L18.8094 12.2797C17.4786 12.637 15.7009 12.721 12.0003 12.721Z" fill="#EA4335"/>
              <path d="M23.6393 12.0003C23.6393 11.1017 23.5701 10.4284 23.4184 9.7712L12.0003 9.7712L12.0003 14.281L18.3754 14.281C18.0487 15.7531 17.1504 16.9404 15.9381 17.7471L19.313 20.3542C21.4116 18.2307 22.8711 15.3409 23.6393 12.0003Z" fill="#4285F4"/>
              <path d="M12.0003 23.639C15.2891 23.639 18.0818 22.5694 20.0883 20.7381L16.7136 18.1309C15.8236 18.7303 14.5492 19.1678 12.0003 19.1678C8.80877 19.1678 6.13883 17.5517 4.90849 14.9446L1.5332 17.5517C3.39167 21.0506 7.4 23.639 12.0003 23.639Z" fill="#34A853"/>
              <path d="M4.90849 14.9446C4.46048 13.7918 4.22559 12.4497 4.22559 11.0002C4.22559 9.5507 4.46048 8.20857 4.90849 7.05574L1.5332 4.44856C0.540866 6.3106 0 8.5804 0 11.0002C0 13.4199 0.540866 15.6897 1.5332 17.5517L4.90849 14.9446Z" fill="#FBBC04"/>
            </svg>
          </button>
          <button class="p-3 rounded-full bg-stone-100 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors shadow flex items-center justify-center">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M19.0303 1.25H4.96963C3.06748 1.25 1.5 2.81748 1.5 4.71963V19.0303C1.5 20.9325 3.06748 22.5 4.96963 22.5H19.0303C20.9325 22.5 22.5 20.9325 22.5 19.0303V4.96963C22.5 3.06748 20.9325 1.5 19.0303 1.5V1.25ZM11.9999 18.0002C8.70992 18.0002 6 15.2903 6 11.9999C6 8.70992 8.70992 6 11.9999 6C15.2903 6 18.0002 8.70992 18.0002 11.9999C18.0002 15.2903 15.2903 18.0002 11.9999 18.0002ZM19.5 7.275C18.8407 7.275 18.3 6.73427 18.3 6.075C18.3 5.41573 18.8407 4.875 19.5 4.875C20.1593 4.875 20.7 5.41573 20.7 6.075C20.7 6.73427 20.1593 7.275 19.5 7.275ZM11.9999 16.5C14.4852 16.5 16.5002 14.4852 16.5002 11.9999C16.5002 9.5146 14.4852 7.5 11.9999 7.5C9.5146 7.5 7.5 9.5146 7.5 11.9999C7.5 14.4852 9.5146 16.5 11.9999 16.5Z" fill="#C13584"/>
            </svg>
          </button>
          <button class="p-3 rounded-full bg-stone-100 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors shadow flex items-center justify-center">
            <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M22.28 6.02C21.69 5.09 20.59 4.34 19.34 4.08C17.76 3.75 12 3.75 12 3.75C12 3.75 6.24 3.75 4.66 4.08C3.41 4.34 2.31 5.09 1.72 6.02C1.29 6.64 1.05 7.42 1.05 8.23C1.05 9.04 1.29 9.82 1.72 10.45L12 19.64L22.28 10.45C22.71 9.82 22.95 9.04 22.95 8.23C22.95 7.42 22.71 6.64 22.28 6.02Z" fill="#FF0000"/>
              <path d="M9.75 15.22L7.31 12.78L6.2 13.91L9.75 17.45L17.81 9.39L16.7 8.28L9.75 15.22Z" fill="#FFFFFF"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  const loginTab = document.getElementById('login-tab');
  const signupTab = document.getElementById('signup-tab');
  const loginForm = document.getElementById('login-form');
  const signupForm = document.getElementById('signup-form');

  loginTab.addEventListener('click', () => {
    loginTab.classList.remove('bg-stone-100', 'dark:bg-stone-700', 'text-stone-600', 'dark:text-stone-300', 'hover:text-amber-800', 'dark:hover:text-amber-300', 'hover:bg-stone-50', 'dark:hover:bg-stone-600', 'font-medium');
    loginTab.classList.add('bg-gradient-to-r', 'from-amber-600', 'to-orange-700', 'text-white', 'shadow-md', 'dark:from-orange-700', 'dark:to-stone-600', 'font-semibold', 'scale-105');
    loginTab.setAttribute('aria-selected', 'true');

    signupTab.classList.remove('bg-gradient-to-r', 'from-amber-600', 'to-orange-700', 'text-white', 'shadow-md', 'dark:from-orange-700', 'dark:to-stone-600', 'font-semibold', 'scale-105');
    signupTab.classList.add('bg-stone-100', 'dark:bg-stone-700', 'text-stone-600', 'dark:text-stone-300', 'hover:text-amber-800', 'dark:hover:text-amber-300', 'hover:bg-stone-50', 'dark:hover:bg-stone-600', 'font-medium');
    signupTab.setAttribute('aria-selected', 'false');

    loginForm.classList.remove('hidden');
    signupForm.classList.add('hidden');
  });

  signupTab.addEventListener('click', () => {
    signupTab.classList.remove('bg-stone-100', 'dark:bg-stone-700', 'text-stone-600', 'dark:text-stone-300', 'hover:text-amber-800', 'dark:hover:text-amber-300', 'hover:bg-stone-50', 'dark:hover:bg-stone-600', 'font-medium');
    signupTab.classList.add('bg-gradient-to-r', 'from-amber-600', 'to-orange-700', 'text-white', 'shadow-md', 'dark:from-orange-700', 'dark:to-stone-600', 'font-semibold', 'scale-105');
    signupTab.setAttribute('aria-selected', 'true');

    loginTab.classList.remove('bg-gradient-to-r', 'from-amber-600', 'to-orange-700', 'text-white', 'shadow-md', 'dark:from-orange-700', 'dark:to-stone-600', 'font-semibold', 'scale-105');
    loginTab.classList.add('bg-stone-100', 'dark:bg-stone-700', 'text-stone-600', 'dark:text-stone-300', 'hover:text-amber-800', 'dark:hover:text-amber-300', 'hover:bg-stone-50', 'dark:hover:bg-stone-600', 'font-medium');
    loginTab.setAttribute('aria-selected', 'false');

    signupForm.classList.remove('hidden');
    loginForm.classList.add('hidden');
  });

  // Initial state for dark mode (if system prefers dark mode)
  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.documentElement.classList.add('dark');
  }
</script>

RetroVibrantCryptoAuth

A complex, retro-inspired login/signup component with vibrant colors, designed for cryptocurrency/blockchain applications, featuring responsive layout and dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-purple-800 via-pink-600 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4 sm:p-8 flex items-center justify-center font-mono">
  <div class="w-full max-w-md bg-gradient-to-br from-purple-200 via-pink-100 to-red-100 dark:bg-gradient-to-br dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 rounded-3xl shadow-2xl overflow-hidden transform duration-500 hover:scale-105 border-4 border-purple-400 dark:border-gray-600 relative group">
    <!-- Old TV Scanline Overlay -->
    <div class="absolute inset-0 z-10 pointer-events-none opacity-10 group-hover:opacity-20 transition-opacity duration-300" style="background-image: linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px); background-size: 2px 2px;"></div>

    <!-- Top Retro Banner -->
    <div class="bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 dark:from-purple-800 dark:via-pink-700 dark:to-red-800 text-white text-center py-4 px-6 relative overflow-hidden">
      <h1 class="text-3xl sm:text-4xl font-extrabold tracking-wide uppercase drop-shadow-lg [text-shadow:_3px_3px_#ff00ff, _-3px_-3px_#00ffff]">CYPHER_NET</h1>
      <p class="text-sm text-yellow-300 italic mt-1 drop-shadow [text-shadow:_1px_1px_#000]">Login Sequence Initiated</p>
      <div class="absolute -bottom-4 -left-4 w-12 h-12 bg-pink-400 rounded-full mix-blend-screen opacity-50 duration-500 group-hover:scale-150"></div>
      <div class="absolute -top-4 -right-4 w-16 h-16 bg-blue-400 rounded-full mix-blend-screen opacity-50 duration-500 group-hover:scale-150"></div>
    </div>

    <div class="p-6 sm:p-8 space-y-6">
      <!-- Toggle Switch for Login/Signup -->
      <div class="flex justify-center mb-6">
        <div class="relative inline-flex bg-gray-300 dark:bg-gray-600 rounded-full p-1 shadow-inner">
          <input type="radio" name="auth_type" id="login_tab" class="hidden peer/login" checked>
          <label for="login_tab" class="relative z-20 px-6 py-2 text-sm sm:text-base font-bold rounded-full cursor-pointer transition-colors duration-300 text-gray-800 dark:text-gray-200 peer-checked/login:bg-green-500 peer-checked/login:text-white peer-checked/login:shadow-md">
            LOGIN
          </label>

          <input type="radio" name="auth_type" id="signup_tab" class="hidden peer/signup">
          <label for="signup_tab" class="relative z-20 px-6 py-2 text-sm sm:text-base font-bold rounded-full cursor-pointer transition-colors duration-300 text-gray-800 dark:text-gray-200 peer-checked/signup:bg-orange-500 peer-checked/signup:text-white peer-checked/signup:shadow-md">
            SIGNUP
          </label>
          <div class="absolute inset-y-1 left-1 w-1/2 h-auto bg-green-500 rounded-full shadow-md transition-transform duration-300 ease-in-out peer-checked/signup:translate-x-full dark:bg-cyan-600"></div>
        </div>
      </div>

      <!-- Form Fields -->
      <div class="relative space-y-4">
        <div class="relative">
          <label for="email" class="block text-xs uppercase font-bold text-gray-600 dark:text-gray-300 mb-1 [text-shadow:_0.5px_0.5px_#fff]">USERNAME / E-MAIL</label>
          <input type="email" id="email" placeholder="[email protected]" class="w-full p-3 pl-10 bg-gray-100 dark:bg-gray-700 rounded-lg border-2 border-purple-400 dark:border-purple-600 focus:outline-none focus:ring-4 focus:ring-pink-400 dark:focus:ring-pink-600 text-gray-800 dark:text-white font-medium placeholder-gray-500 dark:placeholder-gray-400 [text-shadow:_0.5px_0.5px_#fff]"
                 style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05);">
          <span class="absolute left-3 top-1/2 transform -translate-y-1/2 mt-2 text-purple-600 dark:text-purple-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" /><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" /></svg></span>
        </div>

        <div class="relative">
          <label for="password" class="block text-xs uppercase font-bold text-gray-600 dark:text-gray-300 mb-1 [text-shadow:_0.5px_0.5px_#fff]">ACCESS CODE</label>
          <input type="password" id="password" placeholder="********" class="w-full p-3 pl-10 bg-gray-100 dark:bg-gray-700 rounded-lg border-2 border-pink-400 dark:border-pink-600 focus:outline-none focus:ring-4 focus:ring-red-400 dark:focus:ring-red-600 text-gray-800 dark:text-white font-medium placeholder-gray-500 dark:placeholder-gray-400 [text-shadow:_0.5px_0.5px_#fff]"
                 style="box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05);">
          <span class="absolute left-3 top-1/2 transform -translate-y-1/2 mt-2 text-pink-600 dark:text-pink-400"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2h2a2 2 0 012 2v5a2 2 0 01-2 2H3a2 2 0 01-2-2v-5a2 2 0 012-2h2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" /></svg></span>
        </div>

        <div class="flex justify-between items-center text-xs">
          <a href="#" class="text-purple-600 dark:text-purple-400 font-bold hover:text-green-600 dark:hover:text-green-400 transition duration-300 [text-shadow:_0.5px_0.5px_#fff]">FORGOT ACCESS CODE?</a>
          <div class="flex items-center">
            <input type="checkbox" id="remember" class="hidden peer">
            <label for="remember" class="relative w-10 h-6 bg-gray-300 dark:bg-gray-600 rounded-full cursor-pointer transition-colors duration-300 peer-checked:bg-cyan-500 dark:peer-checked:bg-cyan-700 shadow-inner mr-2"></label>
            <span class="text-gray-600 dark:text-gray-300 [text-shadow:_0.5px_0.5px_#fff]">REMEMBER ME</span>
          </div>
        </div>
      </div>

      <!-- Submit Button -->
      <button type="submit" class="w-full mt-6 bg-gradient-to-r from-green-500 to-cyan-500 dark:from-green-700 dark:to-cyan-700 text-white py-3 rounded-xl uppercase font-extrabold text-lg tracking-wide shadow-lg transform active:scale-95 transition duration-200 ease-in-out hover:from-green-600 hover:to-cyan-600 dark:hover:from-green-800 dark:hover:to-cyan-800 border-2 border-green-300 dark:border-green-500 [text-shadow:_2px_2px_#000]">
        INITIATE LOGIN
      </button>

      <!-- Divider -->
      <div class="relative flex justify-center py-4">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-400 dark:border-gray-600 border-dashed"></div>
        </div>
        <div class="relative z-10 px-4 bg-gradient-to-br from-purple-200 via-pink-100 to-red-100 dark:bg-gradient-to-br dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 text-sm italic text-gray-600 dark:text-gray-300 rounded-full [text-shadow:_0.5px_0.5px_#fff]">
          OR LINK ACCESS
        </div>
      </div>

      <!-- Social/Crypto Login Buttons -->
      <div class="grid grid-cols-2 gap-4">
        <button class="flex items-center justify-center p-3 rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-bold transform active:scale-95 transition duration-200 shadow-md border-2 border-blue-400 dark:border-blue-700 ">
          <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.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6S17 7.57 17 9.5V12h3l-1 3h-2v6.95c3.25-1.58 5.5-4.83 5.5-8.95z"/></svg>
          <span class="hidden sm:inline">FACEBOOK</span>
        </button>
        <button class="flex items-center justify-center p-3 rounded-xl bg-gray-800 hover:bg-gray-900 text-white font-bold transform active:scale-95 transition duration-200 shadow-md border-2 border-gray-600 dark:border-gray-500 ">
          <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.477 2 12c0 4.418 2.866 8.148 6.84 9.49C9.043 21.6 9 21.419 9 21.05c0-.097.009-.4.014-.72c-2.775.602-3.366-1.34-3.366-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.618.068-.607.068-.607 1.004.07 1.532 1.03 1.532 1.03.89 1.528 2.336 1.085 2.903.827.09-.645.35-1.085.636-1.334-2.218-.25-4.555-1.107-4.555-4.912 0-1.085.39-1.977 1.03-2.67-.103-.25-.447-1.26.098-2.63c0 0 .84-.268 2.75 1.025a9.558 9.558 0 012.5-.325c.875 0 1.76.11 2.5.325 1.91-1.293 2.75-1.025 2.75-1.025.545 1.37.202 2.38.098 2.63.64.693 1.03 1.585 1.03 2.67 0 3.811-2.34 4.66-4.562 4.902.358.309.678.918.678 1.85V21.1c0 .332-.008.57-.014.72.784-.19 1.528-.48 2.215-.826C20.134 20.148 23 16.418 23 12c0-5.523-4.477-10-10-10z"/></svg>
          <span class="hidden sm:inline">GITHUB</span>
        </button>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <button class="flex items-center justify-center p-3 rounded-xl bg-orange-500 hover:bg-orange-600 text-white font-bold transform active:scale-95 transition duration-200 shadow-md border-2 border-orange-300 dark:border-orange-600 ">
          <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.svg?v=023" alt="Bitcoin" class="w-5 h-5 mr-2 filter invert dark:filter-none">
          <span class="hidden sm:inline">BITCOIN WALLET</span>
        </button>
        <button class="flex items-center justify-center p-3 rounded-xl bg-purple-600 hover:bg-purple-700 text-white font-bold transform active:scale-95 transition duration-200 shadow-md border-2 border-purple-400 dark:border-purple-700 ">
          <img src="https://cryptologos.cc/logos/ethereum-eth-logo.svg?v=023" alt="Ethereum" class="w-5 h-5 mr-2 filter invert dark:filter-none">
          <span class="hidden sm:inline">ETHEREUM WALLET</span>
        </button>
      </div>

      <!-- Footer Text -->
      <div class="text-center text-sm text-gray-500 dark:text-gray-400 pt-4">
        <p>© 198BIT. All Rights Reserved. <span class="font-bold text-gray-600 dark:text-gray-300">BLOCKCHAIN SECURED.</span></p>
        <p class="mt-1 text-xs">For optimal experience, connect via <span class="text-yellow-500 font-bold">METAMASK</span> on desktop.</p>
      </div>

    </div>
  </div>
</div>

Login/Signup Component

A responsive login/signup component with a gradient ocean/blue theme, smooth transitions, and dark mode support, suitable for event and conference websites.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-blue-100 to-blue-300 dark:from-gray-900 dark:to-blue-950 transition-all duration-500 ease-in-out font-sans">
  <div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden md:max-w-xl lg:max-w-4xl flex flex-col md:flex-row transition-all duration-500 ease-in-out transform hover:scale-105">
    <!-- Left Side: Image/Info Section (Visible on MD and larger) -->
    <div class="relative hidden md:flex md:w-1/2 lg:w-2/3 bg-gradient-to-br from-blue-600 to-indigo-800 dark:from-blue-900 dark:to-purple-950 p-8 flex-col justify-center items-center text-white transition-all duration-500 ease-in-out">
      <div class="absolute inset-0 bg-cover bg-center opacity-20" style="background-image: url('https://picsum.photos/800/600?random=1');"></div>
      <div class="relative z-10 text-center opacity-0 md:opacity-100 transition-opacity duration-1000 ease-in-out">
        <h2 class="text-4xl lg:text-5xl font-extrabold mb-4 drop-shadow-lg">Welcome to Horizon Events</h2>
        <p class="text-lg lg:text-xl font-light leading-relaxed">Connect, learn, and grow. Your gateway to unforgettable experiences and valuable networking opportunities.</p>
        <div class="mt-8">
          <button class="px-6 py-3 bg-white text-blue-700 dark:bg-gray-700 dark:text-white rounded-full font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-75">
            Learn More
          </button>
        </div>
      </div>
    </div>

    <!-- Right Side: Form Section -->
    <div class="w-full md:w-1/2 lg:w-1/3 p-6 sm:p-8 md:p-10 lg:p-12 flex flex-col justify-center bg-white dark:bg-gray-800 transition-all duration-500 ease-in-out">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-200 mb-6 text-center md:text-left transition-colors duration-300">
        <span class="block md:inline">Join Us</span> <span class="hidden md:inline text-blue-600 dark:text-blue-400">Now</span>
      </h2>

      <form class="space-y-6">
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transition-colors duration-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-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-base bg-gray-50 dark:bg-gray-700 dark:text-white transition-all duration-300 ease-in-out placeholder:text-sm md:placeholder:text-base">
          </div>
        </div>

        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 transition-colors duration-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-4 py-3 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-base bg-gray-50 dark:bg-gray-700 dark:text-white transition-all duration-300 ease-in-out placeholder:text-sm md:placeholder:text-base">
          </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-blue-600 focus:ring-blue-500 border-gray-300 dark:bg-gray-700 dark:border-gray-600 rounded cursor-pointer">
            <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300 transition-colors duration-300">Remember me</label>
          </div>

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

        <div>
          <button type="submit"
                  class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-base font-semibold text-white bg-gradient-to-r from-blue-600 to-indigo-700 dark:from-blue-700 dark:to-indigo-800 hover:from-blue-700 hover:to-indigo-800 dark:hover:from-blue-800 dark:hover:to-indigo-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300 ease-in-out transform hover:scale-105">
            Sign In
          </button>
        </div>
      </form>

      <div class="mt-6 text-center">
        <p class="text-sm text-gray-600 dark:text-gray-400 transition-colors duration-300">
          New to Horizon Events?
          <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-300">Sign Up Today!</a>
        </p>
      </div>

      <div class="mt-8 relative">
        <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 transition-colors duration-300">Or continue with</span>
        </div>
      </div>

      <div class="mt-6 grid grid-cols-2 gap-3">
        <div>
          <button class="w-full inline-flex justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-all duration-300 ease-in-out transform hover:-translate-y-px">
            <img src="https://www.svgrepo.com/show/355037/google.svg" alt="Google icon" class="h-5 w-5 mr-2"/>
            Google
          </button>
        </div>
        <div>
          <button class="w-full inline-flex justify-center py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600 transition-all duration-300 ease-in-out transform hover:-translate-y-px">
            <img src="https://www.svgrepo.com/show/475656/facebook-color.svg" alt="Facebook icon" class="h-5 w-5 mr-2"/>
            Facebook
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Brutalist_Agri_Auth_Component

A brutalist-style login/signup component for agriculture/farming websites, featuring warm sunset tones, high contrast, and a complex layout with dark mode support.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-yellow-100 dark:bg-yellow-950 font-mono transition-colors duration-300">
  <div class="w-full max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-0 relative border-4 border-red-900 dark:border-red-600 shadow-brutalist overflow-hidden">

    <!-- Image Side (Left on Desktop, Top on Mobile) -->
    <div class="relative min-h-[200px] md:min-h-[600px] flex items-end p-4 md:p-8 bg-red-800 dark:bg-red-950">
      <img src="https://picsum.photos/1200/900?grayscale&blur=2" alt="Agricultural landscape" class="absolute inset-0 w-full h-full object-cover opacity-50 dark:opacity-30 mix-blend-color-burn">
      <div class="relative z-10 w-full text-yellow-300 dark:text-orange-200">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold leading-tight uppercase mb-2 drop-shadow-lg">
          Cultivate Your Future
        </h2>
        <p class="text-lg sm:text-xl font-medium mb-4 italic leading-snug">
          Join the harvest. Grow connections. Yield success.
        </p>
        <p class="text-sm sm:text-base font-light border-l-4 border-yellow-500 pl-3 md:pl-4 text-orange-100 dark:text-orange-300">
          "The farmer is the only man in our economy who buys retail, sells wholesale, and pays the freight both ways." <br>— John F. Kennedy
        </p>
      </div>
      <!-- Brutalist Overlay Element -->
      <div class="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-yellow-500 to-red-600 dark:from-yellow-700 dark:to-red-800 transform rotate-45 translate-x-8 -translate-y-8 md:w-24 md:h-24"></div>
    </div>

    <!-- Form Side (Right on Desktop, Bottom on Mobile) -->
    <div class="p-6 sm:p-8 md:p-10 bg-orange-200 dark:bg-orange-900 text-red-900 dark:text-yellow-100 relative">
      <h3 class="text-2xl sm:text-3xl font-extrabold uppercase mb-6 text-center border-b-4 border-red-700 dark:border-yellow-300 pb-2">
        Access Your Farm Hub
      </h3>

      <!-- Tabs for Login/Signup -->
      <div class="flex mb-6 space-x-2">
        <button class="flex-1 py-3 bg-red-700 dark:bg-red-800 text-yellow-100 dark:text-yellow-200 border-2 border-red-900 dark:border-yellow-400 font-bold uppercase tracking-wider text-sm sm:text-base transition-all duration-200 hover:bg-red-900 dark:hover:bg-red-950 shadow-md active:bg-red-500 active:shadow-none">
          Login
        </button>
        <button class="flex-1 py-3 bg-orange-300 dark:bg-orange-700 text-red-900 dark:text-yellow-300 border-2 border-red-600 dark:border-yellow-500 font-bold uppercase tracking-wider text-sm sm:text-base transition-all duration-200 hover:bg-orange-400 dark:hover:bg-orange-800 shadow-md active:bg-orange-200 active:shadow-none">
          Signup
        </button>
      </div>

      <form class="space-y-5">
        <div>
          <label for="email" class="block text-sm font-bold uppercase mb-2 text-red-800 dark:text-yellow-200">Email Address</label>
          <input type="email" id="email" placeholder="[email protected]" class="w-full px-5 py-3 border-2 border-red-700 dark:border-yellow-400 bg-yellow-50 dark:bg-orange-950 text-red-900 dark:text-yellow-50 placeholder-red-400 dark:placeholder-orange-400 focus:outline-none focus:border-red-900 dark:focus:border-yellow-200 focus:ring-4 focus:ring-red-200 dark:focus:ring-orange-700 transition-all duration-200 text-base sm:text-lg tracking-wide"
          aria-label="Email Address">
        </div>
        <div>
          <label for="password" class="block text-sm font-bold uppercase mb-2 text-red-800 dark:text-yellow-200">Password</label>
          <input type="password" id="password" placeholder="Minimum 8 characters" class="w-full px-5 py-3 border-2 border-red-700 dark:border-yellow-400 bg-yellow-50 dark:bg-orange-950 text-red-900 dark:text-yellow-50 placeholder-red-400 dark:placeholder-orange-400 focus:outline-none focus:border-red-900 dark:focus:border-yellow-200 focus:ring-4 focus:ring-red-200 dark:focus:ring-orange-700 transition-all duration-200 text-base sm:text-lg tracking-wide"
          aria-label="Password">
        </div>

        <div class="flex items-center justify-between text-sm sm:text-base">
          <label class="flex items-center text-red-800 dark:text-yellow-200">
            <input type="checkbox" class="h-5 w-5 bg-yellow-200 dark:bg-orange-800 text-red-700 dark:text-yellow-500 border-2 border-red-700 dark:border-yellow-400 focus:ring-red-500 dark:focus:ring-yellow-300 checked:bg-red-700 dark:checked:bg-yellow-500 transition-colors duration-200">
            <span class="ml-2 font-medium">Remember me</span>
          </label>
          <a href="#" class="text-red-700 dark:text-yellow-300 font-bold uppercase hover:underline underline-offset-2 transition-colors duration-200 hover:text-red-900 dark:hover:text-yellow-100">Forgot Password?</a>
        </div>

        <button type="submit" class="w-full py-4 bg-red-900 dark:bg-yellow-500 text-yellow-100 dark:text-red-900 font-extrabold uppercase tracking-widest text-lg sm:text-xl border-4 border-red-700 dark:border-yellow-400 transition-all duration-200 hover:bg-red-700 dark:hover:bg-yellow-400 active:bg-orange-400 active:shadow-none shadow-brutalist-button focus:outline-none focus:ring-4 focus:ring-red-500 dark:focus:ring-yellow-300">
          Login to Dashboard
          <span class="ml-2">&#x27A4;</span>
        </button>

        <div class="pt-4 text-center text-sm sm:text-base text-red-700 dark:text-yellow-200">
          Don't have an account? <a href="#" class="text-red-900 dark:text-yellow-300 font-bold uppercase hover:underline underline-offset-2">Sign up now!</a>
        </div>
      </form>

      <!-- Brutalist Corner Accent -->
      <div class="absolute bottom-0 left-0 w-12 h-12 bg-gradient-to-tr from-red-600 to-yellow-500 dark:from-red-800 dark:to-yellow-700 transform -translate-x-6 translate-y-6 md:w-16 md:h-16"></div>
    </div>

  </div>
</div>

<!-- Custom Brutalist Shadow Style -->
<style>
  .shadow-brutalist {
    box-shadow: 12px 12px 0px -2px var(--tw-border-color, #B91C1C), 12px 12px 0px 0px var(--tw-border-color, #7D260D);
    /* Border-color from border-red-900 */
  }
  .dark .shadow-brutalist {
    box-shadow: 12px 12px 0px -2px var(--tw-border-color, #FACC15), 12px 12px 0px 0px var(--tw-border-color, #CA8A04);
    /* Border-color from dark:border-red-600 -> dark:border-yellow-600 (modified for stronger contrast) */
  }

  .shadow-brutalist-button {
    box-shadow: 6px 6px 0px -1px var(--tw-border-color, #B91C1C);
  }
  .dark .shadow-brutalist-button {
    box-shadow: 6px 6px 0px -1px var(--tw-border-color, #FACC15);
  }
</style>

Industrial_Candy_Login_Signup_Component

A responsive login/signup component with an industrial raw aesthetic combined with bright candy colors. Features exposed elements, utilitarian design, and full dark mode support, suitable for a blog or content platform.

Open Preview

                <div class="min-h-screen bg-pink-100 flex items-center justify-center p-4 dark:bg-gray-900 duration-300">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl overflow-hidden max-w-4xl w-full flex flex-col md:flex-row border-4 border-gray-300 dark:border-gray-700 relative">
    <!-- Decorative Industrial Elements -->
    <div class="absolute inset-0 pointer-events-none opacity-10 dark:opacity-5" style="background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,.05) 10px, rgba(0,0,0,.05) 11px), repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(0,0,0,.05) 10px, rgba(0,0,0,.05) 11px);">
    </div>

    <!-- Image Section -->
    <div class="md:w-1/2 p-6 flex flex-col items-center justify-center bg-pink-200 dark:bg-gray-700 relative overflow-hidden">
      <img src="https://picsum.photos/600/400?random=1" alt="Industrial Candy Aesthetic" class="w-full h-auto object-cover rounded-md shadow-lg border-2 border-pink-300 dark:border-gray-600 mb-4 transform hover:scale-105 transition-transform duration-300">
      <h2 class="text-2xl font-extrabold text-pink-700 dark:text-pink-300 mb-2 font-mono">Access Your Content</h2>
      <p class="text-pink-600 dark:text-pink-400 text-center text-sm px-4">Discover a new world of articles and stories. Join our community!</p>
      <div class="absolute bottom-2 left-2 text-pink-500 dark:text-pink-400 text-xs opacity-70">V1.0</div>
    </div>

    <!-- Forms Section -->
    <div class="md:w-1/2 p-8 flex flex-col justify-center dark:bg-gray-800">
      <div class="flex mb-6 space-x-4">
        <button class="flex-1 py-3 px-4 rounded-lg font-semibold text-pink-700 dark:text-pink-200 bg-pink-300 dark:bg-pink-600 hover:bg-pink-400 dark:hover:bg-pink-700 focus:outline-none focus:ring-4 focus:ring-pink-400 dark:focus:ring-pink-500 transition-all duration-200 shadow-md transform hover:-translate-y-0.5">
          Login
        </button>
        <button class="flex-1 py-3 px-4 rounded-lg font-semibold text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 transition-all duration-200 shadow-md transform hover:-translate-y-0.5">
          Signup
        </button>
      </div>

      <!-- Login Form (Visible by default, can be toggled via JS if implemented) -->
      <form class="space-y-6">
        <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 text-center font-mono">Welcome Back!</h3>
        <div>
          <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
          <input type="email" id="email" name="email" placeholder="[email protected]" autocomplete="email" required class="mt-1 block w-full px-4 py-2 border-2 border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-mint-500 focus:border-mint-500 dark:bg-gray-700 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 transition duration-200">
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
          <input type="password" id="password" name="password" placeholder="••••••••" autocomplete="current-password" required class="mt-1 block w-full px-4 py-2 border-2 border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-mint-500 focus:border-mint-500 dark:bg-gray-700 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 transition duration-200">
        </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-mint-600 border-gray-300 rounded dark:border-gray-600 dark:bg-gray-700 focus:ring-mint-500">
            <label for="remember_me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
          </div>
          <a href="#" class="font-medium text-mint-600 hover:text-mint-500 text-sm dark:text-mint-400 dark:hover:text-mint-300 transition 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-bold text-white bg-mint-500 dark:bg-mint-600 hover:bg-mint-600 dark:hover:bg-mint-700 focus:outline-none focus:ring-4 focus:ring-mint-500 dark:focus:ring-mint-400 transition-all duration-200 transform hover:scale-105">
          Sign in
        </button>
      </form>

      <div class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
        Or continue with
      </div>
      <div class="mt-4 flex justify-center space-x-4">
        <button class="flex items-center justify-center p-3 rounded-full bg-blue-500 hover:bg-blue-600 text-white shadow-md transform hover:scale-110 transition-transform duration-200 focus:outline-none focus:ring-4 focus:ring-blue-400" aria-label="Login with Facebook">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.79c0-2.508 1.493-3.891 3.776-3.891 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="flex items-center justify-center p-3 rounded-full bg-red-500 hover:bg-red-600 text-white shadow-md transform hover:scale-110 transition-transform duration-200 focus:outline-none focus:ring-4 focus:ring-red-400" aria-label="Login with Google">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12.24 10.23L12 10l-6-1.5V10c0 .6.4 1 1 1h5.5l.5-.23zM21 12h-8v-2h8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
            <path d="M12 4.41l-.7-.7-.7-.7h-1.2V3h3.5v2.41zM12 19.59l.7.7.7.7h1.2v-2.41zM20 12h-8v-2h8z"/>
          </svg>
        </button>
        <button class="flex items-center justify-center p-3 rounded-full bg-gray-700 hover:bg-gray-800 text-white shadow-md transform hover:scale-110 transition-transform duration-200 focus:outline-none focus:ring-4 focus:ring-gray-400" aria-label="Login with GitHub">
          <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.47.087.68-.233.68-.522 0-.257-.01-1.055-.016-2.056-2.78-.62-3.37-1.39-3.37-1.39-.454-1.15-1.11-1.455-1.11-1.455-.908-.62.067-.607.067-.607 1.005.07 1.532 1.03 1.532 1.03.89 1.488 2.33 1.056 2.897.807.09-.624.34-1.056.62-1.3-2.22-.25-4.555-1.11-4.555-4.93 0-1.088.39-1.979 1.029-2.678-.103-.255-.446-1.272.098-2.646 0 0 .84-.27 2.75 1.025A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.295 2.747-1.025 2.747-1.025.546 1.374.203 2.391.098 2.646.64.699 1.029 1.59 1.029 2.678 0 3.832-2.339 4.68-4.566 4.92.359.307.678.915.678 1.849 0 1.334-.012 2.41-.012 2.727 0 .29.21.613.695.516C19.137 20.103 22 16.364 22 12.017 22 6.484 17.523 2 12 2z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Login/Signup Component

A simple, clean, and minimalist login/signup component with a Swiss/International typography style and a cheerful candy/sweet color scheme, designed for business/corporate websites. It is fully responsive and includes dark mode support.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-pink-50 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden md:max-w-lg lg:max-w-xl transition-all duration-300 transform hover:scale-[1.01] hover:shadow-2xl">
    <div class="md:flex">
      <div class="w-full p-8 px-6 md:px-8">
        <div class="text-center mb-8">
          <h2 class="text-3xl font-extrabold text-pink-600 dark:text-pink-400 leading-tight tracking-tighter mb-2 transition-colors duration-300">
            Welcome
          </h2>
          <p class="text-gray-600 dark:text-gray-400 text-lg transition-colors duration-300">
            Join or sign in to continue
          </p>
        </div>

        <div class="relative flex flex-col items-center justify-center mb-6">
          <div class="absolute inset-x-0 top-1/2 h-px bg-gray-200 dark:bg-gray-700 w-full transform -translate-y-1/2"></div>
          <button class="relative px-4 py-2 bg-pink-100 dark:bg-gray-700 text-pink-700 dark:text-gray-300 rounded-full text-sm font-semibold transition-colors duration-300 z-10">
            Log In
          </button>
          <button class="relative px-4 py-2 ml-4 bg-mint-green-100 dark:bg-gray-700 text-mint-green-700 dark:text-gray-300 rounded-full text-sm font-semibold transition-colors duration-300 z-10">
            Sign Up
          </button>
        </div>

        <form>
          <div class="mb-6">
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Email Address</label>
            <input type="email" id="email" name="email" placeholder="[email protected]" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-mint-green-500 focus:border-mint-green-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition-colors duration-300 outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
          </div>

          <div class="mb-6">
            <div class="flex justify-between items-center">
              <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2 transition-colors duration-300">Password</label>
              <a href="#" class="text-sm text-pink-600 dark:text-pink-400 hover:underline transition-colors duration-300">Forgot Password?</a>
            </div>
            <input type="password" id="password" name="password" placeholder="••••••••" class="mt-1 block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-mint-green-500 focus:border-mint-green-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 transition-colors duration-300 outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
          </div>

          <button type="submit" class="w-full py-3 px-6 bg-mint-green-500 text-white font-semibold rounded-md shadow-lg hover:bg-mint-green-600 focus:outline-none focus:ring-2 focus:ring-mint-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-all duration-300 transform hover:-translate-y-0.5">
            Login
          </button>

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

<style>
  /* Custom colors for 'candy/sweet' palette if not directly in Tailwind config */
  /* Add to your tailwind.config.js for full integration: */
  /*
  module.exports = {
    theme: {
      extend: {
        colors: {
          'pink-50': '#FFF0F5',   // Lavender Blush
          'pink-100': '#FFE4E1',  // Misty Rose
          'pink-600': '#FF69B4',  // Hot Pink
          'pink-700': '#C71585',  // Medium Violet Red
          'mint-green-100': '#F0FFF4', // Mint Cream
          'mint-green-500': '#98FB98', // Pale Green
          'mint-green-600': '#3CB371'  // Medium Sea Green
        }
      }
    },
    // ... other config
  }
  */
</style>

Cyberpunk Sepia Login/Signup Component

A complex, responsive login/signup component with cyberpunk-inspired neon aesthetics using sepia/brown tones, suitable for a forum or community platform. Includes dark mode support and interactive elements.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-gray-900 dark:bg-gray-950 font-mono relative overflow-hidden">

  <!-- Background Grid/Pattern -->
  <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10 pointer-events-none">
    <div class="absolute inset-0 bg-repeat bg-[size:16px_16px] animate-[pulse_10s_infinite] dark:animate-[pulse_15s_infinite]" style="background-image: linear-gradient(to right, #2a1b0c 1px, transparent 1px), linear-gradient(to bottom, #2a1b0c 1px, transparent 1px);"></div>
    <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(42,27,12,0.5)_0%,transparent_70%)]"></div>
  </div>

  <!-- Main Card Container -->
  <div class="relative z-10 w-full max-w-md mx-auto rounded-xl shadow-2xl overflow-hidden
              bg-gradient-to-br from-[#2a1b0c] to-[#1a0f05] 
              dark:from-[#1a0f05] dark:to-black 
              border border-[#4a2e0e] dark:border-[#2a1b0c] 
              transform perspective-1000 rotateX-3 rotateY-1 
              animate-[glow_3s_infinite_alternate]">

    <!-- Cyberpunk Border Effect -->
    <div class="absolute inset-0 pointer-events-none rounded-xl" style="box-shadow: inset 0 0 15px rgba(255,165,0,0.3), 0 0 25px rgba(255,165,0,0.2) neon-glow-effect;"></div>
    <div class="absolute inset-0 rounded-xl border border-transparent animate-[borderPulse_5s_infinite] dark:animate-[borderPulse_7s_infinite]" style="background: linear-gradient(45deg, rgba(255,165,0,0.5) 0%, rgba(200,100,0,0.5) 50%, rgba(255,165,0,0.5) 100%) border-box; mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;"></div>

    <div class="p-8 sm:p-10 relative z-20">
      <div class="text-center mb-8">
        <h1 class="text-4xl sm:text-5xl font-bold text-[#f7c58f] dark:text-[#ffd29e] mb-2 leading-tight tracking-wider flicker-text">
          ACCESS TERMINAL
        </h1>
        <p class="text-[#a07a53] dark:text-[#c4ae93] text-sm sm:text-base">Initiate Protocol Login / Registration</p>
      </div>

      <!-- Tab Navigation -->
      <div class="flex mb-8 border-b-2 border-[#4a2e0e] dark:border-[#2a1b0c]">
        <button id="login-tab" class="flex-1 py-3 text-lg font-semibold text-[#f7c58f] dark:text-[#ffd29e] 
                                     border-b-4 border-[#ffab4a] dark:border-[#ff9933] 
                                     hover:text-white dark:hover:text-white 
                                     transition-colors duration-300 
                                     tab-active"
                onclick="toggleTabs(this, 'login-form')">
          LOGIN
        </button>
        <button id="signup-tab" class="flex-1 py-3 text-lg font-semibold text-[#a07a53] dark:text-[#c4ae93] 
                                      border-b-4 border-transparent 
                                      hover:text-white dark:hover:text-white 
                                      transition-colors duration-300"
                onclick="toggleTabs(this, 'signup-form')">
          SIGNUP
        </button>
      </div>

      <!-- Login Form -->
      <form id="login-form" class="space-y-6 tab-content">
        <div>
          <label for="username" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
            <span class="text-[#ffab4a]">//</span> USERNAME
          </label>
          <input type="text" id="username" class="w-full p-3 rounded-md 
                                    bg-[#3a2612] dark:bg-[#2a1b0c] 
                                    text-[#e0c29f] dark:text-[#f2e6d9] 
                                    border border-[#5a3b1a] dark:border-[#3a2612] 
                                    focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent 
                                    placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c] 
                                    shadow-inner-glow leading-normal" 
                 placeholder="Enter your ID" aria-label="Username">
        </div>
        <div>
          <label for="password" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
            <span class="text-[#ffab4a]">//</span> PASSWORD
          </label>
          <input type="password" id="password" class="w-full p-3 rounded-md 
                                    bg-[#3a2612] dark:bg-[#2a1b0c] 
                                    text-[#e0c29f] dark:text-[#f2e6d9] 
                                    border border-[#5a3b1a] dark:border-[#3a2612] 
                                    focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent 
                                    placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c] 
                                    shadow-inner-glow leading-normal" 
                 placeholder="Access Key" aria-label="Password">
        </div>
        <div class="flex items-center justify-between text-sm">
          <a href="#" class="text-[#ffab4a] hover:underline transition-colors duration-300">Forgot Password?</a>
          <div class="flex items-center">
            <input type="checkbox" id="remember" class="hidden peer">
            <label for="remember" class="relative flex items-center cursor-pointer mr-2">
              <span class="w-5 h-5 border-2 border-[#ffab4a] dark:border-[#ff9933] rounded 
                           flex-shrink-0 mr-2 flex items-center justify-center 
                           peer-checked:bg-[#ffab4a] dark:peer-checked:bg-[#ff9933] 
                           peer-checked:border-[#ffab4a] dark:peer-checked:border-[#ff9933] 
                           transition-all duration-200">
                <svg class="w-3 h-3 text-[#3a2612] peer-checked:opacity-100 opacity-0 transition-opacity duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg>
              </span>
              <span class="text-white dark:text-[#ffd29e]">Remember Me</span>
            </label>


          </div>
        </div>
        <button type="submit" class="w-full py-3 rounded-md text-xl font-bold 
                                   bg-[#ffab4a] dark:bg-[#ff9933] 
                                   text-[#3a2612] dark:text-[#2a1b0c] 
                                   hover:bg-[#ffc58a] dark:hover:bg-[#ffb066] 
                                   transition-all duration-300 
                                   shadow-lg shadow-[#ffab4a]/30 dark:shadow-[#ff9933]/30 
                                   neon-button-effect">ENTER SYSTEM</button>
      </form>

      <!-- Signup Form (Hidden by default) -->
      <form id="signup-form" class="space-y-6 tab-content hidden">
        <div>
          <label for="new-username" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
            <span class="text-[#ffab4a]">//</span> NEW USERNAME
          </label>
          <input type="text" id="new-username" class="w-full p-3 rounded-md 
                                    bg-[#3a2612] dark:bg-[#2a1b0c] 
                                    text-[#e0c29f] dark:text-[#f2e6d9] 
                                    border border-[#5a3b1a] dark:border-[#3a2612] 
                                    focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent 
                                    placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c] 
                                    shadow-inner-glow leading-normal" 
                 placeholder="Designate your ID" aria-label="New Username">
        </div>
        <div>
          <label for="new-email" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
            <span class="text-[#ffab4a]">//</span> EMAIL ADDRESS
          </label>
          <input type="email" id="new-email" class="w-full p-3 rounded-md 
                                    bg-[#3a2612] dark:bg-[#2a1b0c] 
                                    text-[#e0c29f] dark:text-[#f2e6d9] 
                                    border border-[#5a3b1a] dark:border-[#3a2612] 
                                    focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent 
                                    placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c] 
                                    shadow-inner-glow leading-normal" 
                 placeholder="Provide Matrix Coordinates" aria-label="Email Address">
        </div>
        <div>
          <label for="new-password" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
            <span class="text-[#ffab4a]">//</span> NEW PASSWORD
          </label>
          <input type="password" id="new-password" class="w-full p-3 rounded-md 
                                    bg-[#3a2612] dark:bg-[#2a1b0c] 
                                    text-[#e0c29f] dark:text-[#f2e6d9] 
                                    border border-[#5a3b1a] dark:border-[#3a2612] 
                                    focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent 
                                    placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c] 
                                    shadow-inner-glow leading-normal" 
                 placeholder="Set Access Key" aria-label="New Password">
        </div>
        <div>
          <label for="confirm-password" class="block text-sm font-medium text-[#f7c58f] dark:text-[#ffd29e] mb-2">
            <span class="text-[#ffab4a]">//</span> CONFIRM PASSWORD
          </label>
          <input type="password" id="confirm-password" class="w-full p-3 rounded-md 
                                    bg-[#3a2612] dark:bg-[#2a1b0c] 
                                    text-[#e0c29f] dark:text-[#f2e6d9] 
                                    border border-[#5a3b1a] dark:border-[#3a2612] 
                                    focus:ring-2 focus:ring-[#ffab4a] focus:border-transparent 
                                    placeholder:text-[#8d6a4a] dark:placeholder:text-[#b0987c] 
                                    shadow-inner-glow leading-normal" 
                 placeholder="Re-enter Access Key" aria-label="Confirm Password">
        </div>
        <button type="submit" class="w-full py-3 rounded-md text-xl font-bold 
                                   bg-[#ffab4a] dark:bg-[#ff9933] 
                                   text-[#3a2612] dark:text-[#2a1b0c] 
                                   hover:bg-[#ffc58a] dark:hover:bg-[#ffb066] 
                                   transition-all duration-300 
                                   shadow-lg shadow-[#ffab4a]/30 dark:shadow-[#ff9933]/30 
                                   neon-button-effect">INITIATE REGISTRATION</button>
      </form>

      <p class="mt-8 text-center text-sm text-[#a07a53] dark:text-[#c4ae93]">
        <span class="text-[#ffab4a] mr-1">//</span> STATUS: ONLINE. SYSTEM READY FOR INTERACTION.
      </p>

      <!-- Futuristic Social Login Section -->
      <div class="mt-8 pt-6 border-t-2 border-[#4a2e0e] dark:border-[#2a1b0c] text-center">
        <p class="text-sm text-[#f7c58f] dark:text-[#ffd29e] mb-4">Or Connect Via Integrated Networks:</p>
        <div class="flex justify-center space-x-4">
          <button class="flex items-center justify-center p-3 rounded-md 
                         bg-[#3a2612] dark:bg-[#2a1b0c] 
                         text-[#ffab4a] dark:text-[#ff9933] 
                         border border-[#5a3b1a] dark:border-[#3a2612] 
                         hover:bg-[#4a2e0e] dark:hover:bg-[#3a2612] 
                         hover:text-white dark:hover:text-white 
                         transition-colors duration-300 
                         shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[#ffab4a]">
            <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.25 18H10.5V9h3.75v9zM12 6.75a1.5 1.5 0 110-3 1.5 1.5 0 010 3z"></path>
            </svg>
            <span class="hidden sm:inline">Network_ID</span>
          </button>
          <button class="flex items-center justify-center p-3 rounded-md 
                         bg-[#3a2612] dark:bg-[#2a1b0c] 
                         text-[#ffab4a] dark:text-[#ff9933] 
                         border border-[#5a3b1a] dark:border-[#3a2612] 
                         hover:bg-[#4a2e0e] dark:hover:bg-[#3a2612] 
                         hover:text-white dark:hover:text-white 
                         transition-colors duration-300 
                         shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[#ffab4a]">
            <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M22.54 6.75H1.46C.66 6.75 0 7.41 0 8.21v7.58c0 .8.66 1.46 1.46 1.46h21.08c.8 0 1.46-.66 1.46-1.46V8.21c0-.8-.66-1.46-1.46-1.46zM8.88 15.69c-3.13 0-5.68-.38-5.68-.38S2.22 13.56 2.22 12s1.08-3.31 1.08-3.31c0 0 2.55-.38 5.68-.38 2.06 0 4.1.28 5.86.81 1.03.31 2.37.89 3.01 1.34 1.33.91 1.63 2.15 1.63 2.15s-.35 1.33-1.63 2.15c-.64.45-1.98 1.03-3.01 1.34-1.76.53-3.8.81-5.86.81z"></path>
            </svg>
            <span class="hidden sm:inline">Data_Stream</span>
          </button>
        </div>
      </div>

    </div>
  </div>

  <!-- Global Styles & JS for component functionality -->
  <style>
    @keyframes flicker-text {
      0%, 19.99%, 22%, 24%, 28%, 30%, 36%, 38% {
        opacity: 1;
        text-shadow: 0 0 7px #ffab4a, 0 0 10px #ffab4a, 0 0 15px #ffab4a;
      }
      20%, 21.99%, 24.01%, 27.99%, 30.01%, 35.99%, 38.01%, 100% {
        opacity: 0.9;
        text-shadow: none;
      }
    }

    .flicker-text {
      animation: flicker-text 3s infinite alternate;
    }

    @keyframes glow {
      0% {
        box-shadow: 0 0 10px rgba(255,165,0,0.4), 0 0 20px rgba(255,165,0,0.3);
      }
      50% {
        box-shadow: 0 0 15px rgba(255,165,0,0.6), 0 0 30px rgba(255,165,0,0.4);
      }
      100% {
        box-shadow: 0 0 10px rgba(255,165,0,0.4), 0 0 20px rgba(255,165,0,0.3);
      }
    }

    .shadow-inner-glow {
      box-shadow: inset 0 0 8px rgba(255,165,0,0.1);
    }
    
    .dark .shadow-inner-glow {
      box-shadow: inset 0 0 8px rgba(255,165,0,0.05);
    }

    .neon-button-effect {
      box-shadow: 0 0 10px rgba(255,165,0,0.4), 0 0 20px rgba(255,165,0,0.3), 0 0 30px rgba(255,165,0,0.2);
    }

    .dark .neon-button-effect {
      box-shadow: 0 0 10px rgba(255,153,51,0.4), 0 0 20px rgba(255,153,51,0.3), 0 0 30px rgba(255,153,51,0.2);
    }

    @keyframes borderPulse {
      0% {
        border-color: rgba(255,165,0,0.5);
      }
      50% {
        border-color: rgba(255,165,0,0.8);
      }
      100% {
        border-color: rgba(255,165,0,0.5);
      }
    }

    /* Tailwind utility for perspective transformation */
    .perspective-1000 {
      perspective: 1000px;
    }

    .rotateX-3 {
      transform: rotateX(3deg);
    }

    .rotateY-1 {
      transform: rotateY(1deg);
    }

    @keyframes pulse {
      0% {
        background-position: 0 0;
      }
      100% {
        background-position: 100% 100%;
      }
    }

    @media (prefers-color-scheme: dark) {
        body {
            background-color: #0d0905;
        }
    }

  </style>

  <script>
    function toggleTabs(activeTab, formId) {
      // Deactivate all tabs and hide all forms
      document.querySelectorAll('.tab-active').forEach(tab => {
        tab.classList.remove('tab-active', 'border-[#ffab4a]', 'dark:border-[#ff9933]', 'text-[#f7c58f]', 'dark:text-[#ffd29e]');
        tab.classList.add('border-transparent', 'text-[#a07a53]', 'dark:text-[#c4ae93]');
      });
      document.querySelectorAll('.tab-content').forEach(form => {
        form.classList.add('hidden');
      });

      // Activate the clicked tab and show its corresponding form
      activeTab.classList.add('tab-active', 'border-[#ffab4a]', 'dark:border-[#ff9933]', 'text-[#f7c58f]', 'dark:text-[#ffd29e]');
      activeTab.classList.remove('border-transparent', 'text-[#a07a53]', 'dark:text-[#c4ae93]');
      document.getElementById(formId).classList.remove('hidden');
    }

    // Initial setup: activate login tab on load
    document.addEventListener('DOMContentLoaded', () => {
        const loginTab = document.getElementById('login-tab');
        if (loginTab) {
            toggleTabs(loginTab, 'login-form');
        }
    });
  </script>
</div>

Cyberpunk Login/Signup Form

A complex, responsive login/signup component with a cyberpunk aesthetic, featuring dark backgrounds, neon gradients, and interactive elements, designed for educational platforms.

Open Preview

                <div class="min-h-screen bg-gray-950 text-gray-200 flex items-center justify-center p-4 sm:p-6 lg:p-8 dark:bg-gray-950 font-mono">
  <div class="relative w-full max-w-md mx-auto rounded-xl overflow-hidden shadow-2xl transition-all duration-300 transform hover:scale-105">
    <div class="absolute inset-0 bg-gradient-to-br from-purple-600 via-pink-600 to-red-600 opacity-20 animate-pulse-slow dark:opacity-30"></div>
    <div class="absolute inset-0 border-2 rounded-xl border-transparent glow-border dark:border-transparent"></div>
    
    <div class="relative p-8 backdrop-blur-sm bg-gray-900/80 dark:bg-gray-950/80 rounded-xl">
      <h2 class="text-4xl font-bold mb-6 text-center tracking-wider neon-glow-text dark:neon-glow-text-darker transition-colors duration-300">
        <span id="form-title">ACCESS_NEURAL_NET</span>
      </h2>

      <div class="flex justify-center mb-6">
        <button id="login-tab" class="px-6 py-2 mx-2 text-lg font-semibold rounded-full focus:outline-none transition-all duration-300 transform tab-button active-tab-button">
          LOGIN
        </button>
        <button id="signup-tab" class="px-6 py-2 mx-2 text-lg font-semibold rounded-full focus:outline-none transition-all duration-300 transform tab-button">
          REGISTER
        </button>
      </div>

      <form id="login-form" class="space-y-6">
        <div>
          <label for="login-email" class="block text-sm font-medium mb-2 text-purple-300 dark:text-purple-400">// DATA STREAM: EMAIL</label>
          <input type="email" id="login-email" class="w-full p-3 rounded-md bg-gray-800 border border-purple-700 focus:border-pink-500 focus:ring-1 focus:ring-pink-500 text-purple-200 placeholder-purple-400 transition-all duration-300 dark:bg-gray-850 dark:border-purple-600 dark:focus:border-pink-400" placeholder="[email protected]">
        </div>
        <div>
          <label for="login-password" class="block text-sm font-medium mb-2 text-purple-300 dark:text-purple-400">// ENCRYPTED KEY: PASSWORD</label>
          <input type="password" id="login-password" class="w-full p-3 rounded-md bg-gray-800 border border-purple-700 focus:border-pink-500 focus:ring-1 focus:ring-pink-500 text-purple-200 placeholder-purple-400 transition-all duration-300 dark:bg-gray-850 dark:border-purple-600 dark:focus:border-pink-400" placeholder="••••••••">
        </div>
        <button type="submit" class="w-full p-3 rounded-md font-bold text-lg text-white glowing-button transform hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-red-500 dark:focus:ring-red-400">
          INITIATE_CONNECTION
        </button>
        <p class="text-center text-sm text-gray-400 mt-4">
          <a href="#" class="text-purple-400 hover:underline transition-colors duration-300 neon-text-hover">FORGOT_ACCESS_CODE?</a>
        </p>
      </form>

      <form id="signup-form" class="space-y-6 hidden">
        <div>
          <label for="signup-username" class="block text-sm font-medium mb-2 text-pink-300 dark:text-pink-400">// USER_ALIAS</label>
          <input type="text" id="signup-username" class="w-full p-3 rounded-md bg-gray-800 border border-pink-700 focus:border-green-500 focus:ring-1 focus:ring-green-500 text-pink-200 placeholder-pink-400 transition-all duration-300 dark:bg-gray-850 dark:border-pink-600 dark:focus:border-green-400" placeholder="cyber_nomad_77">
        </div>
        <div>
          <label for="signup-email" class="block text-sm font-medium mb-2 text-pink-300 dark:text-pink-400">// DATA STREAM: EMAIL</label>
          <input type="email" id="signup-email" class="w-full p-3 rounded-md bg-gray-800 border border-pink-700 focus:border-green-500 focus:ring-1 focus:ring-green-500 text-pink-200 placeholder-pink-400 transition-all duration-300 dark:bg-gray-850 dark:border-pink-600 dark:focus:border-green-400" placeholder="[email protected]">
        </div>
        <div>
          <label for="signup-password" class="block text-sm font-medium mb-2 text-pink-300 dark:text-pink-400">// ENCRYPTED KEY: PASSWORD</label>
          <input type="password" id="signup-password" class="w-full p-3 rounded-md bg-gray-800 border border-pink-700 focus:border-green-500 focus:ring-1 focus:ring-green-500 text-pink-200 placeholder-pink-400 transition-all duration-300 dark:bg-gray-850 dark:border-pink-600 dark:focus:border-green-400" placeholder="••••••••">
        </div>
        <div>
          <label for="signup-confirm-password" class="block text-sm font-medium mb-2 text-pink-300 dark:text-pink-400">// CONFIRM_ENCRYPTED_KEY</label>
          <input type="password" id="signup-confirm-password" class="w-full p-3 rounded-md bg-gray-800 border border-pink-700 focus:border-green-500 focus:ring-1 focus:ring-green-500 text-pink-200 placeholder-pink-400 transition-all duration-300 dark:bg-gray-850 dark:border-pink-600 dark:focus:border-green-400" placeholder="••••••••">
        </div>
        <button type="submit" class="w-full p-3 rounded-md font-bold text-lg text-white glowing-button transform hover:scale-105 active:scale-95 transition-transform duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-green-500 dark:focus:ring-green-400">
          ESTABLISH_NEW_PROTOCOL
        </button>
      </form>

      <div class="mt-8 text-center">
        <p class="text-sm text-gray-500 mb-4">// ALTERNATIVE_AUTHENTICATION_METHODS</p>
        <div class="flex justify-center space-x-4">
          <button class="p-3 rounded-full bg-gray-800 border border-blue-700 hover:border-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-blue-500 transition-all duration-300 transform hover:scale-110 active:scale-90">
            <svg class="w-6 h-6 text-blue-400 dark:text-blue-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.25 18H9.75v-6.75H7.5V9h2.25V7.5c0-2.25 1.5-3.75 4.125-3.75h3v2.25h-2.25c-.75 0-1.5.75-1.5 1.5V9h3.75l-.75 3h-3V18z" />
            </svg>
          </button>
          <button class="p-3 rounded-full bg-gray-800 border border-red-700 hover:border-red-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-red-500 transition-all duration-300 transform hover:scale-110 active:scale-90">
            <svg class="w-6 h-6 text-red-400 dark:text-red-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm.012 21.036c-5.07-1.127-8.913-5.748-8.913-11.036V12.01c0-5.06 3.967-9.28 9.02-9.28 4.975 0 8.98 4.093 8.98 9.17 0 4.8-3.743 8.877-8.966 9.136-.02-.007-.04-.017-.063-.02l-.004-.002zm-5.086-13.064h9.946v1.921H6.92V7.972zm0 2.472h9.946V12.36H6.92v-1.916zm0 2.443h7.172v1.924H6.92v-1.924z"/>
            </svg>
          </button>
          <button class="p-3 rounded-full bg-gray-800 border border-green-700 hover:border-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-green-500 transition-all duration-300 transform hover:scale-110 active:scale-90">
            <svg class="w-6 h-6 text-green-400 dark:text-green-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm1.75 18h-3.5A.75.75 0 019.5 17.25v-3.5H6.25a.75.75 0 01-.75-.75V9.5a.75.75 0 01.75-.75h3.5V5.25A.75.75 0 0110.25 4.5h3.5a.75.75 0 01.75.75v3.5h3.25a.75.75 0 01.75.75v3.5a.75.75 0 01-.75.75h-3.25v3.5a.75.75 0 01-.75.75z"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Base cyberpunk styling for neon effects */
  .neon-glow-text {
    text-shadow: 0 0 5px #e11d48, 0 0 10px #e11d48, 0 0 20px #e11d48, 0 0 40px #a21238, 0 0 80px #a21238;
    color: #f7d7df; /* A light pink for text color */
  }

  .dark .neon-glow-text-darker {
    text-shadow: 0 0 5px #f43f5e, 0 0 10px #f43f5e, 0 0 20px #f43f5e, 0 0 40px #fda4af, 0 0 80px #fda4af;
    color: #fce7f3; /* A lighter pink in dark mode */
  }

  .neon-text-hover:hover {
    text-shadow: 0 0 3px #a78bfa, 0 0 6px #a78bfa, 0 0 10px #a78bfa;
    color: #c4b5fd; /* Light purple on hover */
  }

  /* Animated glowing border */
  .glow-border {
    border-image-slice: 1;
    border-image-source: linear-gradient(to right, #8b5cf6, #ec4899, #ef4444);
    animation: glow-border-animation 6s infinite alternate;
  }

  @keyframes glow-border-animation {
    0% { border-image-source: linear-gradient(to right, #8b5cf6, #ec4899, #ef4444); }
    25% { border-image-source: linear-gradient(to right, #ec4899, #ef4444, #8b5cf6); }
    50% { border-image-source: linear-gradient(to right, #ef4444, #8b5cf6, #ec4899); }
    75% { border-image-source: linear-gradient(to right, #8b5cf6, #ef4444, #ec4899); }
    100% { border-image-source: linear-gradient(to right, #8b5cf6, #ec4899, #ef4444); }
  }

  /* Pulse glow for background */
  @keyframes pulse-slow {
    0% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.02); }
    100% { opacity: 0.2; transform: scale(1); }
  }

  .animate-pulse-slow {
    animation: pulse-slow 10s infinite ease-in-out;
  }

  /* Button gradient and glow */
  .glowing-button {
    background: linear-gradient(90deg, #ec4899, #8b5cf6);
    box-shadow: 0 0 10px #ec4899, 0 0 20px #8b5cf6;
    transition: background 0.3s ease, box-shadow 0.3s ease;
  }

  .glowing-button:hover {
    background: linear-gradient(90deg, #8b5cf6, #ec4899);
    box-shadow: 0 0 15px #8b5cf6, 0 0 30px #ec4899;
  }

  /* Tab Button Styling */
  .tab-button {
    background: transparent;
    border: 2px solid transparent;
    color: #a78bfa; /* Default tab text color */
    position: relative;
    overflow: hidden;
  }

  .tab-button::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(to right, #a78bfa, #f472b6, #ef4444);
    transition: all 0.3s ease-out;
    transform: translateX(-50%);
  }

  .tab-button.active-tab-button {
    color: #fff; /* Active tab text color */
    text-shadow: 0 0 5px #a78bfa, 0 0 10px #a78bfa;
  }

  .tab-button.active-tab-button::before {
    width: 100%;
  }

  .tab-button:not(.active-tab-button):hover::before {
     width: 50%; /* Smaller underline on hover for inactive */
  }

  .tab-button:not(.active-tab-button):hover {
    color: #d1d5db; /* Lighter text on hover for inactive */
  }

  /* Dark mode specific adjustments for general elements */
  @media (prefers-color-scheme: dark) {
    .dark\:bg-gray-950 {
      background-color: #030712 !important;
    }
    .dark\:bg-gray-950\/80 {
      background-color: rgba(3, 7, 18, 0.8) !important;
    }
    .dark\:bg-gray-850 {
      background-color: #1f2937 !important;
    }
  }
</style>

<script>
  // This script is for demonstration and functional purposes of the component.
  // In a real application, you would integrate with a framework or backend.
  document.addEventListener('DOMContentLoaded', () => {
    const loginTab = document.getElementById('login-tab');
    const signupTab = document.getElementById('signup-tab');
    const loginForm = document.getElementById('login-form');
    const signupForm = document.getElementById('signup-form');
    const formTitle = document.getElementById('form-title');

    loginTab.addEventListener('click', () => {
      loginTab.classList.add('active-tab-button');
      signupTab.classList.remove('active-tab-button');
      loginForm.classList.remove('hidden');
      signupForm.classList.add('hidden');
      formTitle.textContent = 'ACCESS_NEURAL_NET';
    });

    signupTab.addEventListener('click', () => {
      signupTab.classList.add('active-tab-button');
      loginTab.classList.remove('active-tab-button');
      signupForm.classList.remove('hidden');
      loginForm.classList.add('hidden');
      formTitle.textContent = 'INITIATE_PROTOCOL';
    });
  });
</script>

Search Components

Categories

Login/Signup