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

Simple login form

Author:
R Thapa

2 years ago

24.9k
FacePass: Animated Image Authentication
"Where your image becomes your key" "Biometric meets beautiful animations" "A login experience that recognizes you – literally" "Security through personalized visual authentication" "Your face, animated, authenticated"

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.1k
Sign up form

Author:
Rajesh Maheshwari

11 months ago

979
Allconnect Logic

Author:
Mario Williams

2 months ago

157
Login form with blured background image

Author:
Noah Schmidt

3 years ago

15.4k
Responsive Registration Page
I created a responsive and visually appealing registration page using TailwindCSS and HTML5. This page features a gradient background, a modern card-style form, and clear input fields for username, email, password, and password confirmation. It includes client-side validation with real-time error messages to ensure all required fields are filled correctly and passwords match. This form is designed to provide a seamless user experience across all devices.

Author:
zobaidul kaziex

1 year ago

3.2k
Tailwind Animated Login Form
A modern Tailwind CSS animated login form featuring smooth transitions, premium UI styling, responsive layout, and interactive input effects. Designed for admin panels, SaaS dashboards, and secure web applications, this login template delivers a clean light-theme interface with professional animations and a high-end user experience.

Author:
shrenik khule

1 week ago

76
Login popup
with social media login buttons

Author:
Nikolai

1 year ago

3.7k
Login with google provider
Login with google provider

Author:
Aman kumar

10 months ago

1.3k
Sign up Form - Page

Author:
ABDO-SY

11 months ago

1.4k
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:
Anonymous

10 months ago

582

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components