Modernize login UI with Tailwind CSS

[Copilot]

Converted existing React login component from custom CSS classes to Tailwind CSS utility classes with modern design patterns.

Changes

UI Enhancements

• Gradient backgrounds (bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50)
• Enhanced shadows and depth (shadow-2xl, shadow-lg)
• Smooth transitions and hover states on interactive elements
• Responsive grid layout for dashboard cards (grid-cols-1 md:grid-cols-3)
• Modern rounded corners (rounded-2xl, rounded-xl)

Component Structure

• Login page: Centered card layout with form validation UI
• Dashboard: Header with logout, welcome section, feature cards (Profile, Settings, Messages)
• Icons: Integrated Lucide React (MessageCircle, LogOut)

Setup

• New login-app/ directory with Vite + React + Tailwind CSS v3
• Configuration: tailwind.config.js, postcss.config.js
• Dependencies: tailwindcss@3.4.17, lucide-react

Example

Form input styling transformation:

// Before
<input className="form-input" />

// After
<input className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all duration-200" />

Screenshots

Login Page

Validation

Dashboard

Running Locally

cd login-app && npm install && npm run dev

Original prompt

import { useState } from "react";
import { MessageCircle, LogOut } from "lucide-react";

export default function Login() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const [userName, setUserName] = useState("");

const handleLogin = (e) => {
e.preventDefault();
setError("");

// Simple validation
if (!email || !password) {
  setError("Please fill in all fields");
  return;
}

if (!email.includes("@")) {
  setError("Please enter a valid email address");
  return;
}

// Mock login - accept any valid email and password with at least 6 characters
if (password.length < 6) {
  setError("Password must be at least 6 characters");
  return;
}

// Successful login - extract name from email
const name = email.split("@")[0];
setUserName(name);
setIsLoggedIn(true);

};

const handleLogout = () => {
setIsLoggedIn(false);
setEmail("");
setPassword("");
setUserName("");
setError("");
};

// Login Page
if (!isLoggedIn) {
return (

{/* Logo/Header */}

<MessageCircle className="w-8 h-8 text-primary-foreground" style={{ width: '2rem', height: '2rem', color: 'var(--color-primary-foreground)' }} />

Welcome Back

Sign in to continue to your account

      {/* Login Form */}
      <form onSubmit={handleLogin}>
        {error && (
          <div className="error-message">
            {error}
          </div>
        )}

        <div className="form-group">
          <label htmlFor="email" className="form-label">
            Email Address
          </label>
          <input
            id="email"
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="you@example.com"
            className="form-input"
          />
        </div>

        <div className="form-group">
          <label htmlFor="password" className="form-label">
            Password
          </label>
          <input
            id="password"
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="Enter your password"
            className="form-input"
          />
        </div>

        <div className="form-footer">
          <label className="checkbox-label">
            <input
              type="checkbox"
              className="checkbox-input"
            />
            <span>Remember me</span>
          </label>
          <a href="#" className="link-primary">
            Forgot password?
          </a>
        </div>

        <button type="submit" className="btn-primary">
          Sign In
        </button>
      </form>

      {/* Sign Up Link */}
      <div className="signup-link">
        <span style={{ color: 'var(--color-muted-foreground)' }}>
          Don't have an account?{" "}
        </span>
        <a href="#" className="link-primary">
          Sign up
        </a>
      </div>
    </div>
  </div>
);

}

// Home Page (shown after successful login)
return (

{/* Header */}

<MessageCircle style={{ width: '1.25rem', height: '1.25rem', color: 'var(--color-primary-foreground)' }} />

Dashboard

<LogOut style={{ width: '1rem', height: '1rem' }} />
Logout

  {/* Main Content */}
  <div className="home-content">
    <div className="welcome-section">
      <div className="welcome-icon">
        <MessageCircle style={{ width: '2.5rem', height: '2.5rem', color: 'var(--color-primary)' }} />
      </div>
      <h1 className="welcome-title">Welcome, {userName}!</h1>
      <p className="welcome-text">
        You have successfully logged into your account. This is your home page.
      </p>
      <div className="card-grid">
        <div className="feature-card">
          <h3 className="feature-title">Profile</h3>
          <p className="feature-description">
        ...

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.