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

Your Creative Login Page
"Animated Image Login UI" "Tailwind Image Login with Animated Background" "Innovative User Login Experience" "Creative Bubble Background Login" "Login with Personality — Featuring Your Image" "Acode Master Animated Login" ✅ (customized for you)

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

857
Modern Sign Up 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:
Ari Mustofa

1 year ago

2.5k
Modern Sign Up 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

4.8k
Sign-In Form with Tailwind CSS
Elegant sign in form

Author:
Carlos

1 year ago

1.6k
Responsive login form with image

Author:
Lukas Müller

3 years ago

15.6k
Sign-in form - Htmlwind
Simple login form

Author:
Htmlwind

8 months ago

707
Login form

Author:
Leon Bachmann

3 years ago

13.4k
cards
html , css ,

Author:
Hacker Development

8 months ago

850
Login form with blured background image

Author:
Noah Schmidt

3 years ago

15.3k
Responsive Form
This modern, fully responsive account creation form is designed using HTML and Tailwind CSS, ensuring a clean, professional, and accessible user experience. It features a card-based layout with smooth spacing, a subtle shadow effect, and a structured grid system for optimal responsiveness across all devices.

Author:
Rajesh Maheshwari

11 months ago

1.3k
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
R Thapa

2 years ago

17.3k
Sign In page with google/facebook/twitter buttons

Author:
Orion.c

2 years ago

22.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components