Modern Neo-Brutalist Login Page – Dark & Light Mode with Tailwind CSS

A bold and functional login interface inspired by Neo-Brutalist design, built with Tailwind CSS. Features crisp typography, high-contrast elements, and smooth interactive states. Fully responsive and ready to integrate into any modern web application.

This tailwind example is contributed by Homayoun, on 20-Dec-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Register, Sign in

Author Homayoun

Tailwind v3.4 667 7

Fork Fullscreen

<div class="flex min-h-screen items-center justify-center dark:bg-indigo-900 bg-pink-400 p-4">
  <div
    class="w-full max-w-md border-4 border-black bg-white dark:bg-gray-900 dark:text-white p-8 shadow-[12px_12px_0px_0px_rgba(0,0,0,1)]"
  >
<div class="group mb-8 w-fit cursor-pointer"><h1 class="mb-2 text-3xl font-black uppercase transition-transform duration-300 group-hover:scale-105 md:text-4xl">LOGIN</h1><div class="relative"><div class="h-2 w-20 origin-left bg-black transition-all duration-500 ease-out group-hover:w-full dark:bg-white"></div></div></div>
    <form class="space-y-6">
      <div>
        <label class="mb-2 block text-sm font-black dark:text-white text-black"> EMAIL </label>
        <input
          type="email"
          class="w-full border-4 border-black px-4 py-2 font-bold focus:outline-none focus:ring-4 focus:ring-yellow-300"
        />
      </div>

<div>
        <label class="mb-2 block text-sm font-black dark:text-white text-black">
          PASSWORD
        </label>
        <input
          type="password"
          class="w-full border-4 border-black px-4 py-2 font-bold focus:outline-none focus:ring-4 focus:ring-yellow-300"
        />
      </div>

<button
        type="submit"
        class="w-full border-4 dark:text-black border-black bg-yellow-300 dark:bg-yellow-400 px-6 py-3 text-xl font-black shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] transition-all hover:translate-x-0.5 hover:translate-y-0.5 hover:bg-yellow-200 hover:shadow-none active:translate-x-0.5 active:translate-y-0.5 active:shadow-none"
      >
        LOGIN NOW
      </button>
    </form>

<div class="mt-6 text-center">
      <button class="font-bold dark:text-white text-black underline hover:text-gray-700">
        Do not have an account? SIGN UP
      </button>
    </div>
  </div>
</div>

Related Examples

Register Form
This is a simple Register Form component with dark mode supported and mobile responsive

Shariar Hasan

2 years ago

4.6k
Login/Register Form with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

4.3k
Complete Profile Form with Avatar Upload & Social Links
A fully responsive profile setup form built with Tailwind CSS and Alpine.js. Users can upload a profile picture, fill in personal and professional details, add social links, and receive real-time validation feedback. Includes a smooth success message animation after submission, with optional navigation to the profile or dashboard. Perfect for onboarding flows or user account management interfaces.

wavy kits

1 year ago

1.1k
3D login form and responsive designe
Made a resposnvie form and 3d animation

Sufyan jutt

9 months ago

520
Login Form
Admin Login Form

Khalid

2 years ago

2.6k
Login form

Leon Bachmann

3 years ago

16k
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
Login page
A simple login page with icons

Robert Chunga

2 years ago

2.4k
Sign in From Phone number
do login with phone number and password

Kedar Ghimire

11 months ago

1.1k
login
login by : html , css

Hacker Development

1 year ago

2k
Authentication
Tailwind CSS Authentication Beautifully designed, fully responsive, expertly crafted authentication examples

Aman kumar

1 year ago

1.9k
Neo-Brutalist Login Form

JUGENDRA GANGWAR

1 week ago

14