Home
yogourt
Login form

Login form

Component was one shot generated using https://inspi.me

This tailwind example is contributed by yogourt, on 13-Jan-2026. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Register, Sign in

Author yogourt

Fork Fullscreen

<div class="login-container"
  style="background: #050505; color: #f0f0f0; font-family: 'Inter', -apple-system, sans-serif; min-height: 100vh; display: grid; place-items: center; position: relative; overflow: hidden;">
  <div class="animated-silhouette"
    style="position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0,255,136,0.12) 0%, transparent 70%); border-radius: 50%; filter: blur(80px); top: 50%; left: 50%; transform: translate(-50%, -50%); animation: kineticDrift 15s infinite alternate ease-in-out; z-index: 1;">
  </div>
  <div class="login-layout"
    style="display: grid; grid-template-columns: 1fr 1.2fr; width: 100%; max-width: 1000px; height: 600px; border: 1px solid rgba(255,255,255,0.05); background: rgba(10,10,10,0.6); backdrop-filter: blur(40px); border-radius: 12px; z-index: 2; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,0.8);">
    <section
      style="padding: 4rem; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid rgba(255,255,255,0.05); position: relative;">
      <div class="header">
        <div style="font-weight: 800; font-size: 1.2rem; letter-spacing: -0.5px; margin-bottom: 0.5rem;">
          GENOS<span style="color: #00ff88;">.</span>
        </div>
        <div style="font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: #555; letter-spacing: 2px;">
          AUTH_V04.SEC</div>
      </div>
      <div class="headline">
        <h1 style="font-size: 3rem; line-height: 1; margin: 0; letter-spacing: -2px; font-weight: 700;">
          Access<br/>Neural<br/>
          <span style="background: linear-gradient(90deg, #00ff88, #00bdff); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Interface</span>
        </h1>
        <p style="font-size: 0.85rem; color: #777; margin-top: 1.5rem; line-height: 1.6;">Verify identity to resume
          kinetic generation across distributed clusters.</p>
      </div>
      <div class="status" style="display: flex; align-items: center; gap: 8px;">
        <div style="width: 6px; height: 6px; background: #00ff88; border-radius: 50%;">
        </div>
        <span style="font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; color: #444;">SYSTEM_READY</span>
      </div>
    </section>
    <section style="padding: 4rem; display: flex; flex-direction: column; justify-content: center;">
      <form style="display: flex; flex-direction: column; gap: 2rem;">
        <div class="input-group">
          <label style="display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: #888; margin-bottom: 0.75rem; letter-spacing: 1px;">USER_IDENTITY</label>
          <input type="text" placeholder="Enter ID" style="width: 100%; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 1rem; border-radius: 4px; color: #fff; font-size: 1rem; outline: none; transition: border-color 0.3s;" onfocus="this.style.borderColor='#00ff88'" onblur="this.style.borderColor='rgba(255,255,255,0.1)'">
        </div>
        <div class="input-group">
          <label style="display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: #888; margin-bottom: 0.75rem; letter-spacing: 1px;">SECURITY_CIPHER</label>
          <input type="password" placeholder="********" style="width: 100%; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); padding: 1rem; border-radius: 4px; color: #fff; font-size: 1rem; outline: none; transition: border-color 0.3s;" onfocus="this.style.borderColor='#00ff88'" onblur="this.style.borderColor='rgba(255,255,255,0.1)'">
        </div>
        <button type="submit" style="margin-top: 1rem; background: #fff; color: #000; border: none; padding: 1.2rem; border-radius: 4px; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: transform 0.2s, background 0.3s;">INITIALIZE LOGIN<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                    <path d="M5 12h14M12 5l7 7-7 7"/>
                  </svg>
                </button>
      </form>
      <div
        style="margin-top: 2rem; display: flex; justify-content: space-between; font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; color: #444;">
        <span style="cursor: pointer; transition: color 0.2s;" onmouseover="this.style.color='#888'" onmouseout="this.style.color='#444'">FORGOT_SECRET_KEY</span>
        <span style="cursor: pointer; transition: color 0.2s;" onmouseover="this.style.color='#00ff88'" onmouseout="this.style.color='#444'">REQUEST_TERMINAL_ACCESS</span>
      </div>
    </section>
  </div>
  <style>
    @keyframes kineticDrift {
      0% {
        transform: translate(-55%, -45%) scale(1);
        opacity: 0.6;
      }

100% {
        transform: translate(-45%, -55%) scale(1.1);
        opacity: 1;
      }
    }

button:hover {
      transform: translateY(-2px);
      background: #f0f0f0;
    }

input:placeholder-shown {
      color: #333;
    }

@media (max-width: 800px) {
      .login-layout {
        grid-template-columns: 1fr;
        height: auto;
        margin: 2rem;
      }

section:first-child {
        display: none;
      }
    }
  </style>
</div>

Related Examples

Login with google provider
Login with google provider

Author:
Aman kumar

10 months ago

1.3k
Login Card

Author:
Anonymous

1 year ago

3.2k
NDUSTRIALCORE login
NDUSTRIALCORE

Author:
Tanvir Hasan Bappy (Tanvir)

9 months ago

581
Modern Login Page
Dive into a world of cool animations and captivating visuals. This beautifully crafted interface is not only eye-catching but also highly functional. You can use it as-is or customize it to make it your own. Share your ideas, and let’s create something extraordinary together!” Feel free to tweak it further or add any specific details you’d like. 😊🎨

Author:
AyDin VM

1 year ago

8.2k
Responsive login form
form with social login buttons

Author:
Aman kumar

2 years ago

5k
login page
login page

Author:
Tofayel Islam

2 months ago

229
Neon login Form #3
Login form neon design.

Author:
QQ-VVN

9 months ago

558
login
Dark mode login

Author:
Hacker Development

9 months ago

1.4k
login from with fingerprint

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

1.6k
Login form with blured background image

Author:
Noah Schmidt

3 years ago

15.4k
Travel Guru - User Login Page
A clean and responsive login page designed with TailwindCSS for the Travel Guru platform. This component provides users with a secure and simple way to sign in using their username or email and password, with additional options for remembering login credentials and password recovery. It also supports social logins via Facebook and Google for a faster authentication experience. The design focuses on a minimal and modern user interface with clear call-to-actions and seamless user flow.

Author:
SHARIFUL ISLAM

11 months ago

975
Loginpage

Author:
Ramesh Kumar Sah

5 months ago

471

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components