Форма регистрации брутализма
Компонент регистрационной формы с брутальным дизайном, цветовой гаммой Triadic и простой сложностью, подходит для дашборда. Он адаптивный и поддерживает темный режим с использованием Tailwind CSS.
HTML-код
<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>
Связанные компоненты
Компонент регистрационной формы
Минималистичный и отзывчивый компонент регистрационной формы, разработанный с использованием Tailwind CSS, поддерживающий темный режим и отличающийся чистыми пространствами с минимальным количеством элементов.
Регистрационная форма
Минималистичный компонент регистрационной формы, стилизованный под Tailwind CSS, поддерживающий темный режим и функции адаптивного дизайна.
Скевоморфная форма регистрации
Скевоморфная форма регистрации с монохроматической цветовой схемой, предназначенная для бизнеса/корпоративного использования с поддержкой темного режима и отзывчивостью с использованием Tailwind CSS. Нет JavaScript.