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

Sign in form
includes Google login button

Author:
pratik bhajankar

1 year ago

2k
Registration Form
Color Updates: - Changed gradient background to `from-indigo-800 to-blue-900` - Updated text colors to `text-indigo-800` and `text-indigo-900` - Changed button colors to match the new theme - Updated focus rings to use indigo colors Enhanced Styling: - Added smooth transitions with `transition-all duration-300` - Improved shadow with `shadow-2xl` - Added hover scale effect on button - Increased border radius to `rounded-xl` - Added fade-in animation for the form Improved Validation: - Added visual feedback for invalid fields - Added input event listeners to clear error states - Added trim() to username and email validation - Added form reset after successful submission Accessibility Improvements: - Maintained proper contrast ratios - Kept focus states visible - Added proper spacing for better readability - Ensured all interactive elements are properly styled Added Interactions: - Smooth hover transitions - Scale animation on button hover - Immediate feedback on input - Clear error messaging

Author:
nejaa badr

1 year ago

2.7k
Simple Login Page
This component is responsive for Mobile & Desktop & Dark mode Supported.

Author:
Shariar Hasan

1 year ago

3.3k
OTPverification

Author:
Ratikanta Pradhan

6 months ago

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

Author:
Ameth Galarcio

1 year ago

4.2k
Forgot password?
you can change password an time

Author:
gidy

7 months ago

561
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

Author:
KULDEEP

6 months ago

999
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Abhiraj

11 months ago

2.1k
Login form

Author:
Leon Bachmann

2 years ago

15.1k
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

6 months ago

1.1k
login
login

Author:
Abhishek Kumar

3 months ago

610
Responsive eCommerce Sidebar Layout with Hamburger Menu | Tailwind CSS UI for Online Stores
Build a clean and responsive eCommerce sidebar layout with a smooth hamburger menu using Tailwind CSS and Alpine.js. Ideal for devotional, spiritual, or modern online stores. Includes dark mode support, navigation links, cart, login, and a dynamic layout for beautiful product pages.

Author:
Rajesh Pandey

7 months ago

954

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components