Login SaaS Minimal

                <!--
@type: Login
@industry: SaaS
@style: Minimal
@category: Page Section, Navigation
@framework: HTML/CSS
@license: Free
-->

<style>
/* CSS Custom Properties */
:root {
    --color-white: #ffffff;
    --color-gray-300: #d1d5db;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-900: #111827;
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-blue-700: #1d4ed8;
    
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
}

/* Reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Base styles */
.login-section {
    min-height: 100vh;
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4);
    font-family: var(--font-sans);
}

.login-container {
    width: 100%;
    max-width: 28rem;
}

.login-header {
    text-align: center;
    margin-bottom: var(--spacing-8);
}

.login-title {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--color-gray-900);
}

.login-subtitle {
    margin-top: var(--spacing-2);
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

.login-link {
    color: var(--color-blue-600);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.login-link:hover {
    color: var(--color-blue-500);
}

/* Form styles */
.login-form {
    margin-top: var(--spacing-8);
}

.form-group {
    margin-bottom: var(--spacing-4);
}

.form-input {
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px solid var(--color-gray-300);
    border-radius: 0.375rem;
    color: var(--color-gray-900);
}

.form-input::placeholder {
    color: var(--color-gray-500);
}

.form-input:focus {
    outline: none;
    border-color: transparent;
    box-shadow: 0 0 0 2px var(--color-blue-500);
}

.form-checkbox-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-6);
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
}

.form-checkbox {
    height: 1rem;
    width: 1rem;
    color: var(--color-blue-600);
    border: 1px solid var(--color-gray-300);
    border-radius: 0.25rem;
}

.form-checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-blue-500);
}

.checkbox-label {
    margin-left: var(--spacing-2);
    font-size: 0.875rem;
    color: var(--color-gray-900);
}

.submit-button {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: var(--spacing-2) var(--spacing-4);
    border: 1px solid transparent;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-white);
    background-color: var(--color-blue-600);
    transition: background-color 0.2s;
    cursor: pointer;
}

.submit-button:hover {
    background-color: var(--color-blue-700);
}

.submit-button:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-blue-500);
}

/* Social login section */
.social-login {
    margin-top: var(--spacing-6);
    position: relative;
    text-align: center;
}

.divider {
    position: relative;
    margin: var(--spacing-6) 0;
}

.divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid var(--color-gray-300);
}

.divider-text {
    position: relative;
    display: inline-block;
    padding: 0 var(--spacing-2);
    color: var(--color-gray-500);
    font-size: 0.875rem;
    background-color: var(--color-white);
}

.social-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.social-button {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    padding: var(--spacing-2) var(--spacing-4);
    border: 1px solid var(--color-gray-300);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-500);
    background-color: var(--color-white);
    transition: background-color 0.2s;
    cursor: pointer;
}

.social-button:hover {
    background-color: #f9fafb;
}

.social-icon {
    height: 1.25rem;
    width: 1.25rem;
}

/* Sign up section */
.signup-text {
    margin-top: var(--spacing-8);
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

/* Responsive adjustments */
@media (min-width: 640px) {
    .login-section {
        padding: var(--spacing-8);
    }
}
</style>

<section class="login-section">
    <div class="login-container">
        <!-- Login header -->
        <div class="login-header">
            <h2 class="login-title">
                Sign in to your account
            </h2>
            <p class="login-subtitle">
                Or
                <a href="#" class="login-link">
                    start your 14-day free trial
                </a>
            </p>
        </div>

        <!-- Login form -->
        <form class="login-form" action="#" method="POST">
            <div class="form-group">
                <label for="email" class="sr-only">Email address</label>
                <input id="email" name="email" type="email" autocomplete="email" required 
                    class="form-input"
                    placeholder="Email address">
            </div>
            <div class="form-group">
                <label for="password" class="sr-only">Password</label>
                <input id="password" name="password" type="password" autocomplete="current-password" required 
                    class="form-input"
                    placeholder="Password">
            </div>

            <div class="form-checkbox-group">
                <div class="checkbox-wrapper">
                    <input id="remember-me" name="remember-me" type="checkbox" 
                        class="form-checkbox">
                    <label for="remember-me" class="checkbox-label">
                        Remember me
                    </label>
                </div>

                <div>
                    <a href="#" class="login-link">
                        Forgot your password?
                    </a>
                </div>
            </div>

            <button type="submit" class="submit-button">
                Sign in
            </button>
        </form>

        <!-- Social login -->
        <div class="social-login">
            <div class="divider">
                <span class="divider-text">
                    Or continue with
                </span>
            </div>

            <div class="social-buttons">
                <button type="button" class="social-button">
                    <img src="https://landinggo.com/assets/img/stock/login/google.svg" alt="Google" class="social-icon">
                </button>

                <button type="button" class="social-button">
                    <img src="https://landinggo.com/assets/img/stock/login/github.svg" alt="GitHub" class="social-icon">
                </button>

                <button type="button" class="social-button">
                    <img src="https://landinggo.com/assets/img/stock/login/linkedin.svg" alt="LinkedIn" class="social-icon">
                </button>
            </div>
        </div>

        <!-- Sign up link -->
        <p class="signup-text">
            Not a member?
            <a href="#" class="login-link">
                Create your account now
            </a>
        </p>
    </div>
</section>

<!-- Simple form validation script -->
<script>
document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    
    if (!email || !password) {
        alert('Please fill in all fields');
        return;
    }
    
    if (!email.includes('@')) {
        alert('Please enter a valid email address');
        return;
    }
    
    // Here you would typically handle the form submission
    console.log('Form submitted:', { email, password });
});
</script>             

                <!--
@type: Login
@industry: SaaS
@style: Minimal
@category: Page Section, Navigation
@framework: Tailwind
@license: Free
-->

<section class="min-h-screen bg-white flex items-center justify-center p-4 sm:p-8">
    <div class="w-full max-w-md space-y-8">
        <!-- Login header -->
        <div class="text-center">
            <h2 class="text-3xl font-bold tracking-tight text-gray-900">
                Sign in to your account
            </h2>
            <p class="mt-2 text-sm text-gray-600">
                Or
                <a href="#" class="font-medium text-blue-600 hover:text-blue-500">
                    start your 14-day free trial
                </a>
            </p>
        </div>

        <!-- Login form -->
        <form class="mt-8 space-y-6" action="#" method="POST">
            <div class="space-y-4 rounded-md">
                <div>
                    <label for="email" class="sr-only">Email address</label>
                    <input id="email" name="email" type="email" autocomplete="email" required 
                        class="w-full px-3 py-2 border border-gray-300 rounded text-gray-900 placeholder-gray-500 
                        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="Email address">
                </div>
                <div>
                    <label for="password" class="sr-only">Password</label>
                    <input id="password" name="password" type="password" autocomplete="current-password" required 
                        class="w-full px-3 py-2 border border-gray-300 rounded text-gray-900 placeholder-gray-500 
                        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="Password">
                </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 rounded">
                    <label for="remember-me" class="ml-2 block text-sm text-gray-900">
                        Remember me
                    </label>
                </div>

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

            <div>
                <button type="submit" 
                    class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md 
                    text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 
                    focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    Sign in
                </button>
            </div>
        </form>

        <!-- Social login -->
        <div class="mt-6">
            <div class="relative">
                <div class="absolute inset-0 flex items-center">
                    <div class="w-full border-t border-gray-300"></div>
                </div>
                <div class="relative flex justify-center text-sm">
                    <span class="px-2 bg-white text-gray-500">
                        Or continue with
                    </span>
                </div>
            </div>

            <div class="mt-6 grid grid-cols-3 gap-3">
                <button type="button" 
                    class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md 
                    text-sm font-medium text-gray-500 bg-white hover:bg-gray-50">
                    <span class="sr-only">Sign in with Google</span>
                    <img src="https://landinggo.com/assets/img/stock/login/google.svg" alt="Google" class="h-5 w-5">
                </button>

                <button type="button" 
                    class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md 
                    text-sm font-medium text-gray-500 bg-white hover:bg-gray-50">
                    <span class="sr-only">Sign in with GitHub</span>
                    <img src="https://landinggo.com/assets/img/stock/login/github.svg" alt="GitHub" class="h-5 w-5">
                </button>

                <button type="button" 
                    class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md 
                    text-sm font-medium text-gray-500 bg-white hover:bg-gray-50">
                    <span class="sr-only">Sign in with LinkedIn</span>
                    <img src="https://landinggo.com/assets/img/stock/login/linkedin.svg" alt="LinkedIn" class="h-5 w-5">
                </button>
            </div>
        </div>

        <!-- Sign up link -->
        <p class="mt-8 text-center text-sm text-gray-600">
            Not a member?
            <a href="#" class="font-medium text-blue-600 hover:text-blue-500">
                Create your account now
            </a>
        </p>
    </div>
</section>

<!-- Simple form validation script -->
<script>
document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    
    if (!email || !password) {
        alert('Please fill in all fields');
        return;
    }
    
    if (!email.includes('@')) {
        alert('Please enter a valid email address');
        return;
    }
    
    // Here you would typically handle the form submission
    console.log('Form submitted:', { email, password });
});
</script>