Форма входа в систему по нейроморфизму
Компонент Login Form, разработанный в стиле Neumorphism, с адаптивным дизайном и поддержкой темных тем с использованием Tailwind CSS.
HTML-код
<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-8 w-96">
<h1 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-100">Login</h1>
<form>
<div class="mb-4">
<label for="email" class="block text-gray-700 dark:text-gray-200">Email</label>
<input type="email" id="email" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="[email protected]" required />
</div>
<div class="mb-4">
<label for="password" class="block text-gray-700 dark:text-gray-200">Password</label>
<input type="password" id="password" class="mt-1 block w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-600" placeholder="••••••••" required />
</div>
<div class="mt-6">
<button type="submit" class="w-full py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300">Login</button>
</div>
</form>
</div>
</div>
Связанные компоненты
Компонент формы входа
Простой и отзывчивый компонент формы входа в систему, созданный с использованием пастельной цветовой палитры (мягкие розовые и дополняющие серые) и привлекательных микровзаимодействий, таких как плавные переходы и тонкие эффекты наведения/фокусировки. Разработанный для деловых или корпоративных веб-сайтов, он имеет чистый макет, полностью адаптивный и включает всестороннюю поддержку темных тем. Создан исключительно с помощью HTML и Tailwind CSS.
Компонент формы входа
Адаптивный компонент формы входа со скевоморфным дизайном, монохроматической цветовой гаммой и поддержкой темных тем, подходящий для бизнес-сайтов.
Компонент формы входа
Скевоморфная форма входа для социальных сетей с пастельными тонами, адаптивностью и поддержкой темного режима. Форма имеет тонкий 3D-эффект на входах и кнопках, имитирующий физические элементы. Тени и градиенты используются для усиления скевоморфного ощущения. Входы имеют мягкую вставную тень, а кнопки имеют приподнятый вид, на который можно нажать. Пастельная цветовая гамма плавно переходит в более темный, приглушенный вариант в темном режиме, сохраняя читабельность и визуальный комфорт. Адаптивный дизайн обеспечивает удобство использования на всех устройствах.