login

This tailwind example is contributed by Hacker Development, on 03-May-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Register, Sign in,Author box, User information

Form Login Form Profile

Author Hacker Development

Tailwind v3.4 2k 4

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minimalist Login Form</title>
    
     <style>
        body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #e7edf5;
    font-family: Arial, sans-serif;
    margin: 0;
}
.container {
    width: 350px;
    height: 70vh;
    background: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}
.logo {
    width: 80px;
    height: 80px;
    background: #2c3e73;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.input-group {
    margin-bottom: 15px;
    text-align: left;
}
.input-group label {
    display: block;
    font-size: 14px;
    color: #333;
}
.input-group input {
    width: 95%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    outline: none;
    font-size: 14px;
}
.login-btn {
    display: block;
    width: 95%;
    padding: 10px;
    background: #2c3e73;
    color: white;
    text-align: center;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 10px;
}
.login-btn:hover {
    background: #1f2d52;
}
.footer {
    margin-top: 10px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
}
.footer a {
    text-decoration: none;
    color: #2c3e73;
}
     </style>
</head>
<body>
    <div class="container">
        <div class="logo">
            <span style="font-size: 40px; color: white;">&#9679;&#9679;&#9679;</span>
        </div>
        <div class="input-group">
            <label>Email Address</label>
            <input type="email" placeholder="Username@gmail.com">
        </div>
        <div class="input-group">
            <label>Password</label>
            <input type="password" placeholder="●●●●●●●●●●●●●●●●●●●●●●●●●●">
        </div>
        <a href="#" class="login-btn">Login</a>
        <div class="footer">
            <a href="#">Signup</a>
            <a href="#">Forgot Password?</a>
        </div>
    </div>
</body>
</html>

Related Examples

Login Form with Icon

Prashant

4 years ago

18.9k
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Akshay

4 years ago

24.8k
Login form

Gopi Yadav

3 years ago

12k
Sign in / Login Form

Bunny

4 years ago

14.6k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Bunny

4 years ago

50.6k
Login Form

Amit Pachange

4 years ago

13.7k
Sign In form

Amit Pachange

3 years ago

12.7k
Login form

Leon Bachmann

3 years ago

16k
User registration form

Leon Bachmann

3 years ago

25.8k
User registration form with Instructions

Fagundo67

3 years ago

25.2k
Login form

Leon Bachmann

3 years ago

14k
User registration form

Laurits

3 years ago

12.1k