Brutalism Registration Form
Registration Form Component with Brutalism design, Triadic color scheme, and simple complexity, suitable for a dashboard. It is responsive and supports dark mode using Tailwind CSS.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
<div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md w-full max-w-sm border-4 border-black dark:border-white">
<h2 class="text-2xl font-bold text-center text-black dark:text-white mb-8 font-mono">Register</h2>
<form>
<div class="mb-4">
<label for="username" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 font-mono">Username</label>
<input type="text" id="username" class="shadow appearance-none border-2 border-black dark:border-white bg-white dark:bg-gray-700 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline font-mono"
placeholder="Enter your username">
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 font-mono">Email</label>
<input type="email" id="email" class="shadow appearance-none border-2 border-black dark:border-white bg-white dark:bg-gray-700 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline font-mono"
placeholder="Enter your email">
</div>
<div class="mb-6">
<label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 font-mono">Password</label>
<input type="password" id="password" class="shadow appearance-none border-2 border-black dark:border-white bg-white dark:bg-gray-700 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 mb-3 leading-tight focus:outline-none focus:shadow-outline font-mono"
placeholder="Enter your password">
</div>
<div class="flex items-center justify-between">
<button type="button"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline border-2 border-black dark:border-white font-mono
dark:bg-blue-700 dark:hover:bg-blue-900">
Register
</button>
<a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 dark:text-blue-300 dark:hover:text-blue-500 font-mono" href="#">
Forgot Password?
</a>
</div>
</form>
</div>
</div>Related Components
Registration Form Component
A simple registration form with a 3D pastel design, responsive and with dark mode support. Suitable for a blog or content consumption website.
Registration Form Component
A registration form component with Neumorphism design, grayscale color scheme, moderate complexity, and responsive dark theme support using Tailwind CSS.
Registration Form
A sleek dark mode registration form component using Tailwind CSS, featuring fields for user information and responsive design.