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 v3.4. It is responsive. similar terms for this example are Register, Sign in

Author yogourt

Tailwind v3.4 482 1

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 oauth Form

Rihane SOLID SNAKE

1 year ago

781
Login Form

Maxim

1 year ago

1.9k
Simple generated login form
Login

Jerome Soriano

8 months ago

565
Login page
Login and register page, you can reuse both

Abhiraj

1 year ago

2.6k
Login Template
its is a basic login template

Sergio Gonzalez

1 year ago

1.1k
Login with social media buttons

TailwindFlex

4 years ago

14.4k
login from

Tanvir Hasan Bappy (Tanvir)

1 year ago

2.2k
Login form

Leon Bachmann

3 years ago

16k
Animated Sign in background
Sign-in page with floating blobs as background.

Nii Anyetei

2 years ago

4.2k
Login
Login form, responsive, no dark-mode for white backgrounds, elegant for any platform

Ameth Galarcio

2 years ago

5.3k
Login Form
Login Form template using angular

nitro-x

3 months ago

202
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. 😊🎨

Anonymous

2 years ago

3.7k