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

289

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

Login popup
with social media login buttons

Author:
Nikolai

1 year ago

3.6k
Login page
A simple login page with icons

Author:
Robert Chunga

1 year ago

1.9k
Search input asasasas
sasasasasas

Author:
Notify ahmedabad

1 year ago

1.5k
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

1 year ago

2.1k
Sign In form

Author:
Amit Pachange

3 years ago

12.4k
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

8 months ago

847
Simple Login Form
Login Form Responsive Component

Author:
Ahita Bisma Adlula

11 months ago

1.3k
Login form
login form with sign in with Google button

Author:
gmer33

2 years ago

23.6k
login!!!!
html , css

Author:
Hacker Development

8 months ago

1.2k
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
Sign up form
simple full-height register form

Author:
Lukas Müller

2 years ago

12.9k
Registration Form

Author:
Maxim

10 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components