About

The SimpleLogin component is a simple, accessible login form designed to collect user email and password information. It features a clean design that adjusts for light and dark modes.

Tips/Instructions

1. Usage: Import the SimpleLogin component and include it in your application where a login form is required.
2. Customization: You can customize the input placeholders, labels, and button text to match your application's branding and requirements.
3. Accessibility: Proper label elements and input types are used to ensure accessibility and improve the user experience.

import React from 'react';

export default function SimpleLogin() {
    return (
        <div className='bg-white dark:bg-zinc-900 border border-zinc-300 dark:border-zinc-600 p-4 max-w-xs w-full mx-auto rounded-lg flex flex-col gap-6'>
            <div>
                <h2 className='text-black dark:text-white text-2xl font-bold'>Login</h2>
                <p className='text-sm text-zinc-600 dark:text-zinc-400 font-normal mb-4'>Please enter your details</p>
            </div>

            <form className='flex flex-col gap-4'>
                <div className="flex flex-col gap-1">
                    <label htmlFor="email" className='text-xs text-black dark:text-white font-semibold'>Email</label>
                    <input
                        type="email"
                        id="email"
                        name="email"
                        placeholder="Enter your email"
                        className='rounded px-3 py-2 bg-white dark:bg-zinc-800 text-sm text-black dark:text-white placeholder-zinc-600 dark:placeholder-zinc-400 w-full border border-zinc-300 dark:border-zinc-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400'
                    />
                </div>

                <div className="flex flex-col gap-1">
                    <label htmlFor="password" className='text-xs text-black dark:text-white font-semibold'>Password</label>
                    <input
                        type="password"
                        id="password"
                        name="password"
                        placeholder="Enter your password"
                        className='rounded px-3 py-2 bg-white dark:bg-zinc-800 text-sm text-black dark:text-white placeholder-zinc-600 dark:placeholder-zinc-400 w-full border border-zinc-300 dark:border-zinc-700 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400'
                    />
                </div>

                <button
                    className='rounded bg-black dark:bg-white h-10 text-white dark:text-black text-sm w-full mt-2 transition-colors duration-200 hover:bg-zinc-800 dark:hover:bg-zinc-200'
                    type="submit"
                >
                    Log In
                </button>
            </form>
        </div>
    );
}

// Usage
<div className="App">
    <SimpleLogin />
</div>

Files Included

• NA