Регистрация в центрированной карточке

Минималистичная форма в рамке, отлично подходит и для модальных окон

Живой просмотр

Промпт

Создай центрированную карточку регистрации с помощью Tailwind CSS на мягком нейтральном фоне. Карточка — max-w-md, rounded-2xl, с тенью и тонкой рамкой. Добавь заголовок, подзаголовок со ссылкой «Войти», поля полного имени / email / пароля, небольшую подсказку к паролю, кнопку отправки на всю ширину без градиента (тёмная), а также строку о Условиях и Политике конфиденциальности внизу. Оставь щедрые отступы и удобные поля ввода.

Вставьте его в Claude, Cursor, v0 или любой другой ИИ-инструмент для программирования.

Исходный код

<div class="flex min-h-screen items-center justify-center bg-neutral-100 p-6">
  <div class="w-full max-w-md rounded-2xl border border-neutral-200 bg-white p-8 shadow-sm">
    <h1 class="text-xl font-semibold text-neutral-900">Create your account</h1>
    <p class="mt-1 text-sm text-neutral-500">
      Already have one? <a href="#" class="font-medium text-neutral-900 hover:underline">Sign in</a>
    </p>
    <form class="mt-6 space-y-4">
      <input placeholder="Full name" class="w-full rounded-xl border border-neutral-200 px-3.5 py-2.5 text-sm outline-none focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
      <input type="email" placeholder="Email" class="w-full rounded-xl border border-neutral-200 px-3.5 py-2.5 text-sm outline-none focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
      <div>
        <input type="password" placeholder="Password" class="w-full rounded-xl border border-neutral-200 px-3.5 py-2.5 text-sm outline-none focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
        <p class="mt-1.5 text-xs text-neutral-400">Use 8 or more characters with a mix of letters and numbers.</p>
      </div>
      <button class="w-full rounded-xl bg-neutral-900 py-2.5 text-sm font-medium text-white transition hover:bg-neutral-800">Create account</button>
    </form>
    <p class="mt-6 text-center text-xs leading-relaxed text-neutral-400">
      By continuing you agree to our <a href="#" class="underline">Terms</a> and <a href="#" class="underline">Privacy Policy</a>.
    </p>
  </div>
</div>

Живой просмотр и промпт для формы регистрации на Tailwind CSS

та страница — готовый инструмент для разработчиков, который помогает быстро создать форму регистрации в стиле минималистичной центрированной карточки. Всё, что нужно, уже собрано в одном месте: живой просмотр результата, сам промпт для ИИ-инструментов и адаптивные режимы отображения.

Живой просмотр. В верхней части страницы встроено интерактивное превью формы. Оно отрисовывается прямо в браузере с помощью Tailwind CSS, поэтому вы сразу видите, как будет выглядеть готовая карточка регистрации — без необходимости собирать проект или запускать сборщик.

Три режима отображения. Переключатель над превью позволяет оценить, как форма ведёт себя на разных устройствах:

Полный — развёрнутый вид на всю ширину контейнера, как на десктопе.
Планшет — ширина 768 px, чтобы проверить промежуточную вёрстку.
Мобильный — ширина 390 px, имитирующая экран смартфона.

Высота превью подстраивается автоматически: встроенный скрипт измеряет реальную высоту содержимого и передаёт её родительской странице, поэтому обрезанных или пустых областей не будет.

Промпт на двух языках. Ниже превью находится сам промпт — текстовое описание задачи, которое можно скопировать и вставить в Claude, Cursor, v0 или любой другой ИИ-инструмент для генерации кода. Текст доступен на русском и английском языке: переключатель в правом верхнем углу секции мгновенно меняет версию, не перезагружая страницу.

Что описывает промпт. Формулировка содержит все ключевые детали будущей формы: контейнер max-w-md со скруглением rounded-2xl, тонкую рамку и тень, заголовок, подзаголовок со ссылкой «Войти», поля полного имени, email и пароля, подсказку к паролю, тёмную кнопку отправки на всю ширину и юридическую строку об Условиях и Политике конфиденциальности. Благодаря такому уровню детализации ИИ выдаёт почти готовый код, который остаётся только вставить в проект.

Единый монохромный стиль. Вся страница оформлена в чёрно-бело-серой гамме: белый фон, аккуратные границы, чёрные активные элементы управления. Такой дизайн не отвлекает от содержимого и хорошо сочетается с любой палитрой будущего проекта.