Component:

Login SaaS Minimal

Name: Login SaaS Minimal
Availability: InStock

Free

Tailwind

React

Vue

Svelte

Astro

HTML / CSS

Tags: Login Page Section Navigation SaaS Minimal

Colors:

Description:

This carefully crafted Login component is perfect for SaaS landing pages, featuring a Minimal design that looks great and converts well.

Simply copy the code with the "Copy" button, paste it into your project and customize the colors, text and images to match your brand.


                <!--
@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>

Login SaaS Minimal

This is a Pro component

Access the full component collection

Premium components

Save components

Unlimited usage

Landing page submissions