Login/Signup

Login/Signup Component

A complex Login/Signup component designed with a skeuomorphic style, using a grayscale color scheme for a dashboard interface. It includes various interactive elements and is responsive with dark theme support.

Open Preview

                <div class="min-h-screen bg-white dark:bg-gray-800 flex items-center justify-center">
    <div class="bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center">Login / Signup</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="username">Username</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-100 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Enter your username">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="email">Email</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-100 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="Enter your email">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-1" for="password">Password</label>
                <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-100 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="Enter your password">
            </div>
            <div class="flex items-center justify-between mb-6">
                <div class="flex items-center">
                    <input type="checkbox" class="mr-2 leading-tight" id="remember">
                    <label class="text-gray-600 dark:text-gray-300" for="remember">Remember me</label>
                </div>
                <a class="inline-block align-baseline font-bold text-sm text-gray-600 dark:text-gray-300 hover:text-gray-800" href="#">Forgot Password?</a>
            </div>
            <div class="flex flex-col">
                <button class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mb-4" type="submit">Login</button>
                <button class="bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Signup</button>
            </div>
        </form>
        <div class="mt-4 text-center">
            <p class="text-gray-600 dark:text-gray-300">Or sign in with</p>
            <div class="flex justify-center space-x-4 mt-2">
                <img class="h-8 w-8 rounded-full" src="https://picsum.photos/seed/pic1/40/40" alt="Avatar">
                <img class="h-8 w-8 rounded-full" src="https://picsum.photos/seed/pic2/40/40" alt="Avatar">
                <img class="h-8 w-8 rounded-full" src="https://picsum.photos/seed/pic3/40/40" alt="Avatar">
            </div>
        </div>
    </div>
</div>

LoginSignupComponent

A responsive Login/Signup component designed with Neumorphism style and pastel color scheme for social media interfaces.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-800 p-6">
  <div class="bg-white dark:bg-gray-900 rounded-3xl shadow-lg p-8 max-w-md w-full">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Join Us</h2>
    <form>
      <div class="mb-4">
        <input type="text" placeholder="Username" class="w-full p-4 text-gray-700 dark:text-gray-300 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 shadow-inner" />
      </div>
      <div class="mb-6">
        <input type="email" placeholder="Email Address" class="w-full p-4 text-gray-700 dark:text-gray-300 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 shadow-inner" />
      </div>
      <div class="mb-6">
        <input type="password" placeholder="Password" class="w-full p-4 text-gray-700 dark:text-gray-300 rounded-md border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 shadow-inner" />
      </div>
      <button type="submit" class="w-full bg-blue-500 text-white rounded-md p-4 hover:bg-blue-600 shadow-xl transition duration-200">Sign Up</button>
    </form>
    <div class="text-center mt-4">
      <span class="text-gray-600 dark:text-gray-400">or</span>
    </div>
    <button class="w-full mt-4 bg-gray-200 rounded-md p-4 flex items-center justify-around hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 shadow-md transition duration-200">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Google" class="w-6 h-6 rounded-full">
      <span class="text-gray-800 dark:text-gray-200">Continue with Google</span>
    </button>
    <div class="text-center mt-4">
      <p class="text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-blue-500 hover:underline">Log In</a></p>
    </div>
  </div>
</div>

MaterialEarthToneLoginSignupComponent

A responsive Material Design style login and signup component with earth tone color scheme, moderate complexity with interactive toggling between forms, designed for dashboards with dark mode support.

Open Preview

                <!DOCTYPE html>
<html lang='en' class='h-full bg-amber-50 dark:bg-gray-900'>
  <head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <title>Login / Signup Component</title>
    <script src='https://cdn.tailwindcss.com'></script>
  </head>
  <body class='min-h-screen bg-amber-50 dark:bg-gray-900 flex items-center justify-center p-4'>
    <div class='max-w-4xl w-full bg-stone-50 dark:bg-gray-800 rounded-lg shadow-2xl overflow-hidden grid grid-cols-1 md:grid-cols-2'>
      <div class='hidden md:block'>
        <img src='https://picsum.photos/id/1018/800/800' alt='Dashboard Illustration' class='object-cover w-full h-full' />
      </div>
      <div class='p-8'>
        <input id='tabToggle' type='checkbox' class='peer sr-only' />
        <div class='flex justify-center mb-6 space-x-4'>
          <label for='tabToggle' class='cursor-pointer text-lg font-medium text-amber-700 peer-checked:text-stone-500 transition'>Login</label>
          <label for='tabToggle' class='cursor-pointer text-lg font-medium text-stone-500 peer-checked:text-amber-700 transition'>Signup</label>
        </div>
        <form class='space-y-4 transition-all duration-300 ease-in peer-checked:hidden'>
          <div>
            <label for='loginEmail' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Email</label>
            <input id='loginEmail' type='email' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
          </div>
          <div>
            <label for='loginPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Password</label>
            <input id='loginPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
          </div>
          <button type='submit' class='w-full py-2 px-4 bg-amber-700 text-white rounded-lg shadow hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 transition'>Login</button>
        </form>
        <form class='space-y-4 transition-all duration-300 ease-in hidden peer-checked:block'>
          <div class='grid grid-cols-1 sm:grid-cols-2 gap-4'>
            <div>
              <label for='firstName' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>First Name</label>
              <input id='firstName' type='text' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
            </div>
            <div>
              <label for='lastName' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Last Name</label>
              <input id='lastName' type='text' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
            </div>
          </div>
          <div>
            <label for='signupEmail' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Email</label>
            <input id='signupEmail' type='email' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
          </div>
          <div class='grid grid-cols-1 sm:grid-cols-2 gap-4'>
            <div>
              <label for='signupPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Password</label>
              <input id='signupPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
            </div>
            <div>
              <label for='confirmPassword' class='block text-sm font-medium text-stone-700 dark:text-stone-300'>Confirm Password</label>
              <input id='confirmPassword' type='password' required class='mt-1 w-full px-4 py-2 bg-white dark:bg-gray-700 border border-stone-300 dark:border-gray-600 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-amber-500 transition' />
            </div>
          </div>
          <button type='submit' class='w-full py-2 px-4 bg-amber-700 text-white rounded-lg shadow hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 transition'>Sign Up</button>
        </form>
      </div>
    </div>
  </body>
</html>

Brutalism Login/Signup Component

A brutalist-style Login/Signup Component with a triadic color scheme, medium complexity, responsive design, and dark mode support. Uses picsum.photos for images and randomuser.me for avatars.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-yellow-400 dark:bg-purple-800 p-4">
  <div class="bg-white dark:bg-black text-black dark:text-white border-4 border-black dark:border-white p-8 rounded-none shadow-xl w-full max-w-md">
    <h2 class="text-2xl font-bold mb-6 text-center uppercase">Join Us</h2>
    
    <div class="mb-4">
      <label for="email" class="block text-sm font-bold mb-2">Email</label>
      <input type="email" id="email" class="w-full p-3 border-4 border-black dark:border-white bg-yellow-200 dark:bg-purple-900 focus:outline-none focus:ring-0 focus:border-red-600 dark:focus:border-red-400" placeholder="[email protected]">
    </div>
    
    <div class="mb-6">
      <label for="password" class="block text-sm font-bold mb-2">Password</label>
      <input type="password" id="password" class="w-full p-3 border-4 border-black dark:border-white bg-yellow-200 dark:bg-purple-900 focus:outline-none focus:ring-0 focus:border-red-600 dark:focus:border-red-400" placeholder="********">
    </div>
    
    <button class="w-full bg-red-600 dark:bg-red-400 text-white font-bold py-3 px-4 border-4 border-black dark:border-white uppercase">Login</button>
    
    <p class="text-center text-sm mt-4">Don't have an account? <a href="#" class="text-red-600 dark:text-red-400 font-bold">Sign up here</a>.</p>
    
    <div class="mt-8 text-center">
      <p class="text-lg font-bold mb-4">Or login with:</p>
      <div class="flex justify-center space-x-4">
        <button class="bg-blue-600 dark:bg-blue-400 text-white font-bold py-2 px-4 border-4 border-black dark:border-white">Facebook</button>
        <button class="bg-red-500 dark:bg-red-700 text-white font-bold py-2 px-4 border-4 border-black dark:border-white">Google</button>
      </div>
    </div>

  </div>
</div>

Login/Signup Component

A simple Login/Signup component designed for dark mode with a pastel color scheme, suitable for a portfolio.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-900 text-gray-200">
    <div class="bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl font-semibold mb-6 text-center">Welcome to My Portfolio</h2>
        <form>
            <div class="mb-4">
                <label class="block text-sm mb-2" for="email">Email</label>
                <input type="email" id="email" placeholder="[email protected]" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-gray-500" required />
            </div>
            <div class="mb-6">
                <label class="block text-sm mb-2" for="password">Password</label>
                <input type="password" id="password" placeholder="your password" class="w-full px-4 py-2 rounded bg-gray-700 border border-gray-600 focus:outline-none focus:border-gray-500" required />
            </div>
            <button type="submit" class="w-full py-2 bg-green-600 hover:bg-green-500 text-white rounded">Login</button>
        </form>
        <div class="text-center mt-4">
            <p class="text-sm">Don't have an account? <a href="#" class="text-green-400 hover:underline">Sign Up</a></p>
        </div>
    </div>
</div>
<!-- Dark Mode Styles -->
<div class="dark:bg-gray-900 dark:text-gray-200">
    <div class="dark:bg-gray-800 dark:border-gray-700">
        <input type="email" class="dark:bg-gray-700 dark:border-gray-600">
        <input type="password" class="dark:bg-gray-700 dark:border-gray-600">
    </div>
</div>

Login/Signup Component

A Login/Signup component designed in Neumorphism style with a pastel color scheme, suitable for business/corporate websites, and supporting dark mode.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
    <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-6">Welcome Back</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2">Email</label>
                <input type="email" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2">Password</label>
                <input type="password" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
            </div>
            <button type="submit" class="w-full bg-gradient-to-r from-indigo-400 to-blue-500 hover:from-indigo-500 hover:to-blue-600 text-white font-semibold rounded-lg py-2 focus:outline-none focus:ring-2 focus:ring-indigo-400 dark:focus:ring-indigo-600 transition duration-300">Login</button>
        </form>
        <div class="text-center mt-4">
            <p class="text-gray-600 dark:text-gray-300">or</p>
            <button class="text-indigo-500 dark:text-indigo-400 hover:text-indigo-400 dark:hover:text-indigo-300 mt-2">Sign Up</button>
        </div>
    </div>
</div>

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
    <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg p-8 max-w-sm w-full">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 text-center mb-6">Create an Account</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2">Full Name</label>
                <input type="text" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2">Email</label>
                <input type="email" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2">Password</label>
                <input type="password" required class="w-full bg-gray-200 dark:bg-gray-700 border border-transparent rounded-lg shadow-inner focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600 p-2" />
            </div>
            <button type="submit" class="w-full bg-gradient-to-r from-indigo-400 to-blue-500 hover:from-indigo-500 hover:to-blue-600 text-white font-semibold rounded-lg py-2 focus:outline-none focus:ring-2 focus:ring-indigo-400 dark:focus:ring-indigo-600 transition duration-300">Sign Up</button>
        </form>
        <div class="text-center mt-4">
            <p class="text-gray-600 dark:text-gray-300">or</p>
            <button class="text-indigo-500 dark:text-indigo-400 hover:text-indigo-400 dark:hover:text-indigo-300 mt-2">Login</button>
        </div>
    </div>
</div>

Login/Signup Component

Responsive Login/Signup Component with Dark Mode

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-900">
  <div class="bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-md">
    <div class="tabs mb-6">
      <button class="w-1/2 py-2 text-lg font-semibold text-center text-white border-b-2 border-pink-500">Login</button>
      <button class="w-1/2 py-2 text-lg font-semibold text-center text-gray-400 hover:text-white">Sign Up</button>
    </div>
    <form>
      <div class="mb-4">
        <label for="email" class="block text-gray-400 text-sm font-bold mb-2">Email</label>
        <input type="email" id="email" class="shadow appearance-none border border-gray-700 rounded w-full py-2 px-3 text-white bg-gray-700 focus:outline-none focus:ring-pink-500 focus:border-pink-500" placeholder="Email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-400 text-sm font-bold mb-2">Password</label>
        <input type="password" id="password" class="shadow appearance-none border border-gray-700 rounded w-full py-2 px-3 text-white bg-gray-700 focus:outline-none focus:ring-pink-500 focus:border-pink-500" placeholder="Password">
      </div>
      <div class="flex items-center justify-between">
        <button class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
          Login
        </button>
        <a class="inline-block align-baseline font-bold text-sm text-pink-500 hover:text-pink-600" href="#">
          Forgot Password?
        </a>
      </div>
    </form>
  </div>
</div>

Login/Signup Component

3D Monochromatic Login/Signup Form

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 px-8 py-10 mx-auto bg-white rounded-lg shadow-xl dark:bg-gray-800 lg:w-1/3">
    <div class="absolute inset-0 w-full h-full transform scale-95 translate-x-1 translate-y-1 bg-gray-200 dark:bg-gray-700 rounded-lg blur-md"></div>
    <div class="relative">
      <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-white">Login/Signup</h2>
      <div class="mt-6">
        <div class="relative mt-4">
          <input type="text" id="email" name="email" class="block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-200 focus:border-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Email Address">
        </div>
        <div class="relative mt-4">
          <input type="password" id="password" name="password" class="block w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-200 focus:border-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white" placeholder="Password">
        </div>
        <div class="flex items-center justify-between mt-6">
          <div class="flex items-center">
            <input type="checkbox" id="remember_me" name="remember_me" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600">
            <label for="remember_me" class="block ml-2 text-sm text-gray-900 dark:text-gray-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">Forgot your password?</a>
          </div>
        </div>
        <div class="mt-6">
          <button type="submit" class="w-full px-4 py-3 text-white bg-blue-600 rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-200 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800">Sign in</button>
        </div>
        <div class="mt-6 text-center">
          <p class="text-sm text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Sign up</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

Login/Signup Component

A responsive Login/Signup component designed in Material Design style with dark theme support and complementary color scheme, tailored for social media interfaces.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Welcome</h2>
        <p class="text-center text-gray-600 dark:text-gray-400 mb-4">Sign in to continue or create a new account.</p>
        <div class="space-y-4">
            <form>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="email">Email</label>
                    <input type="email" id="email" class="input-class" placeholder="[email protected]" required />
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="password">Password</label>
                    <input type="password" id="password" class="input-class" placeholder="********" required />
                </div>
                <div>
                    <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400">Login</button>
                </div>
                <div class="text-center text-gray-600 dark:text-gray-400">
                    <p>Or</p>
                </div>
                <div>
                    <button type="button" class="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-green-500 dark:hover:bg-green-400">Sign Up</button>
                </div>
            </form>
            <div class="flex items-center justify-center space-x-4">
                <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-700 shadow-sm hover:shadow-lg transform transition duration-300">
                    <img src="https://picsum.photos/50" alt="Google" class="rounded-full" />
                </a>
                <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-700 shadow-sm hover:shadow-lg transform transition duration-300">
                    <img src="https://picsum.photos/50" alt="Facebook" class="rounded-full" />
                </a>
                <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-700 shadow-sm hover:shadow-lg transform transition duration-300">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Twitter" class="rounded-full" />
                </a>
            </div>
        </div>
    </div>
</div>

<style>
    .input-class {
        display: block;
        width: 100%;
        padding: 0.5rem;
        margin-top: 0.25rem;
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        transition: border-color 0.2s;
        color: #4b5563;
    }
    .input-class:focus {
        outline: none;
        border-color: #3b82f6;
    }
</style>

Login/Signup Component

A complex login/signup component using Material Design principles and a monochromatic color scheme for business and corporate websites with dark theme support.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
    <div class="w-full max-w-md p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 text-center mb-6">Welcome</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-4">Please login or signup to continue.</p>
        <div class="flex flex-col space-y-4">
            <!-- Login Form -->
            <form class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="login-email">Email</label>
                    <input type="email" id="login-email" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="[email protected]" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="login-password">Password</label>
                    <input type="password" id="login-password" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" required>
                </div>
                <button type="submit" class="w-full bg-blue-600 text-white p-2 rounded-md shadow hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition duration-300">Login</button>
            </form>
            <!-- Separator -->
            <div class="flex items-center justify-center space-x-2">
                <div class="w-full h-0.5 bg-gray-300 dark:bg-gray-600"></div>
                <span class="text-gray-500 dark:text-gray-400">OR</span>
                <div class="w-full h-0.5 bg-gray-300 dark:bg-gray-600"></div>
            </div>
            <!-- Signup Form -->
            <form class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="signup-name">Full Name</label>
                    <input type="text" id="signup-name" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="Your Name" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="signup-email">Email</label>
                    <input type="email" id="signup-email" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" placeholder="[email protected]" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="signup-password">Password</label>
                    <input type="password" id="signup-password" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 p-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-600" required>
                </div>
                <button type="submit" class="w-full bg-blue-600 text-white p-2 rounded-md shadow hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition duration-300">Signup</button>
            </form>
            <!-- Avatar Image -->
            <div class="flex justify-center mt-6">
                <img src="https://picsum.photos/100/100" alt="Avatar" class="rounded-full border-4 border-blue-500"> 
            </div>
        </div>
    </div>
</div>

Categories