Компонент сброса пароля
Минималистичный и отзывчивый компонент сброса пароля с океаническими/синими тонами, разработанный для платформ маркетплейсов, включая поддержку темного режима.
HTML-код
<div class="min-h-screen flex items-center justify-center p-4 bg-blue-50 dark:bg-gray-900 transition-colors duration-300">
<div class="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 space-y-6 border border-blue-100 dark:border-gray-700 transition-all duration-300 transform md:scale-105 lg:scale-100 xl:scale-95">
<div class="text-center">
<h1 class="text-3xl font-extrabold text-blue-800 dark:text-blue-300 mb-2">Reset Your Password</h1>
<p class="text-gray-600 dark:text-gray-400 text-sm">Enter your new password below.</p>
</div>
<form class="space-y-6">
<div>
<label for="new-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">New Password</label>
<input type="password" id="new-password" name="new-password" required class="w-full px-4 py-2 border border-blue-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-blue-50 dark:bg-gray-700 transition-colors duration-200" placeholder="••••••••">
</div>
<div>
<label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirm Password</label>
<input type="password" id="confirm-password" name="confirm-password" required class="w-full px-4 py-2 border border-blue-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-blue-50 dark:bg-gray-700 transition-colors duration-200" placeholder="••••••••">
</div>
<button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-lg font-semibold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800 transition-colors duration-200">
Reset Password
</button>
</form>
<div class="text-center text-sm">
<a href="#" class="font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300 transition-colors duration-200">Back to sign in</a>
</div>
</div>
</div>
Связанные компоненты
Компонент сброса пароля брутализм сложный аналоговый дашборд
Компонент сброса пароля для панели управления в брутальном стиле, отличающийся сложным макетом, аналогичной цветовой схемой, отзывчивостью и поддержкой темного режима.
Компонент сброса пароля
Компонент сброса пароля с дизайном скевоморфизма, отзывчивыми эффектами и поддержкой темных тем.
Компонент сброса пароля
Отзывчивый компонент сброса пароля с моноширинным/девелоперским дизайном, осенней цветовой гаммой и эстетикой терминала, подходящий для приложений электронной коммерции. Включает поддержку темного режима.