Компоненты Регистрационная форма Компонент регистрационной формы

Компонент регистрационной формы

Адаптивный компонент формы регистрации, разработанный в стиле Brutalist с пастельной цветовой гаммой и подходящий для бизнес/корпоративных сайтов. Он поддерживает темный режим с использованием Tailwind CSS.

Предварительный просмотр

HTML-код

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 w-full max-w-md">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Register</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
                <input class="border-2 border-gray-300 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-pink-400" type="text" id="name" placeholder="Your Name" required />
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
                <input class="border-2 border-gray-300 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-pink-400" type="email" id="email" placeholder="Your Email" required />
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
                <input class="border-2 border-gray-300 dark:border-gray-600 rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-pink-400" type="password" id="password" placeholder="Create a Password" required />
            </div>
            <button class="w-full bg-pink-500 hover:bg-pink-600 dark:bg-pink-700 dark:hover:bg-pink-600 text-white font-bold py-2 rounded" type="submit">Register</button>
        </form>
        <div class="mt-4 text-center">
            <img class="mx-auto rounded-full w-12 h-12 mb-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
            <p class="text-sm text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-pink-500 hover:text-pink-600 dark:text-pink-400">Login</a></p>
        </div>
    </div>
</div>

Связанные компоненты

Компонент регистрационной формы

Компонент адаптивной формы регистрации, стилизованный под Glassmorphism, включает в себя полупрозрачные элементы, похожие на матовое стекло, с эффектами размытия, поддерживают темный режим и отображают замещающие изображения.

Открытый

Компонент регистрационной формы

Простая форма регистрации с 3D пастельным дизайном, адаптивная и с поддержкой темного режима. Подходит для блога или сайта потребления контента.

Открытый

Форма регистрации брутализма

Компонент регистрационной формы с брутальным дизайном, цветовой гаммой Triadic и простой сложностью, подходит для дашборда. Он адаптивный и поддерживает темный режим с использованием Tailwind CSS.

Открытый