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

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

Author Homayoun

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

Full page sign-In form

Author:
Anonymous

1 year ago

3.3k
Login
Login

Author:
Amine Ghanim

9 months ago

1.4k
Login Card

Author:
Anonymous

1 year ago

3.1k
Simple Sign-In Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Author:
Anja Müller

2 years ago

7.9k
Contact us Form with Responsive

Author:
KULDEEP

5 months ago

521
Fullscreen login form with image backround

Author:
Noah Schmidt

2 years ago

21k
Login form responsive

Author:
Aman kumar

1 year ago

3.7k
Responsive Contact Section Using Tailwind CSS
This HTML and Tailwind CSS snippet creates a visually appealing and responsive contact section. Designed to adapt seamlessly across different screen sizes, this component features two main areas: the contact information block and a contact form. The contact block displays essential details like phone, email, and address, alongside social media links, all encapsulated within a cyan-themed card with rounded corners and shadow effects for depth. The form area, highlighted with a contrasting white background, ensures a user-friendly interface for submitting contact details. This code snippet is perfect for integration into any modern web application requiring a responsive and stylish contact section.

Author:
Fathallah Anass

1 year ago

2.7k
Login page
Login and register page, you can reuse both

Author:
Abhiraj

11 months ago

1.7k
Registration Form

Author:
Maxim

9 months ago

995
Login form #2
Login form design

Author:
QQ-VVN

7 months ago

1.1k
Login Page Transition

Author:
Fatwa Bawahsi

8 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components