Сплит-экран с визуалом

Форма с одной стороны, визуал бренда — с другой

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

Промпт

Создайте полноэкранную страницу входа со сплит-экраном на Tailwind CSS. Слева — центрированная карточка входа (шириной ~360px) с логотипом, полями электронной почты и пароля, чекбоксом «Запомнить меня» и ссылкой «Забыли пароль?» в одной строке, полноширинной основной кнопкой и разделителем перед контурной кнопкой «Продолжить с Google». На правой половине — сплошная панель в цвете бренда с крупным заголовком и коротким отзывом, скрытая ниже контрольной точки lg. Используйте поля ввода со скруглением rounded-xl, тонкие границы и чёткие кольца фокуса.

Build a full-height split-screen sign-in page with Tailwind CSS. On the left, a centered login card (~360px wide) with a logo, an email and password field, a "Remember me" checkbox with a "Forgot password?" link on the same row, a full-width primary button, and a divider before a "Continue with Google" outline button. On the right half, a solid brand-colored panel with a large headline and a short testimonial, hidden below the lg breakpoint. Use rounded-xl inputs, subtle borders, and clear focus rings.

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

Исходный код

<div class="flex min-h-screen">
  <!-- Форма -->
  <div class="flex w-full items-center justify-center px-6 lg:w-1/2">
    <div class="w-full max-w-sm">
      <div class="mb-8">
        <div class="mb-6 h-9 w-9 rounded-lg bg-neutral-900"></div>
        <h1 class="text-2xl font-semibold text-neutral-900">С возвращением</h1>
        <p class="mt-1 text-sm text-neutral-500">Войдите, чтобы продолжить работу с аккаунтом.</p>
      </div>
      <form class="space-y-4">
        <div>
          <label class="mb-1.5 block text-sm font-medium text-neutral-700">Электронная почта</label>
          <input type="email" placeholder="you@example.com"
            class="w-full rounded-xl border border-neutral-200 px-3.5 py-2.5 text-sm outline-none ring-neutral-900/10 focus:border-neutral-900 focus:ring-4" />
        </div>
        <div>
          <label class="mb-1.5 block text-sm font-medium text-neutral-700">Пароль</label>
          <input type="password" placeholder="••••••••"
            class="w-full rounded-xl border border-neutral-200 px-3.5 py-2.5 text-sm outline-none ring-neutral-900/10 focus:border-neutral-900 focus:ring-4" />
        </div>
        <div class="flex items-center justify-between text-sm">
          <label class="flex items-center gap-2 text-neutral-600">
            <input type="checkbox" class="rounded border-neutral-300" /> Запомнить меня
          </label>
          <a href="#" class="font-medium text-neutral-900 hover:underline">Забыли пароль?</a>
        </div>
        <button class="w-full rounded-xl bg-neutral-900 py-2.5 text-sm font-medium text-white transition hover:bg-neutral-800">Войти</button>
      </form>
      <div class="my-6 flex items-center gap-3 text-xs text-neutral-400">
        <span class="h-px flex-1 bg-neutral-200"></span>ИЛИ<span class="h-px flex-1 bg-neutral-200"></span>
      </div>
      <button class="w-full rounded-xl border border-neutral-200 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50">Продолжить с Google</button>
    </div>
  </div>
  <!-- Визуал -->
  <div class="hidden bg-neutral-900 lg:flex lg:w-1/2 lg:flex-col lg:justify-end lg:p-14">
    <blockquote class="max-w-md text-2xl font-medium leading-snug text-white">
      «Это самый быстрый запуск продукта в нашей истории. Всё просто работает.»
    </blockquote>
  </div>
</div>

Промт и исходный код для создания Сплит-экрана с визуалом

Эта страница — компактный инструмент для дизайнеров и разработчиков, которым нужен готовый промпт для создания формы авторизации со сплит-экраном. В верхней части находится живой предпросмотр: вы можете переключаться между режимами «Полный экран», «Планшет» и «Мобильный», чтобы сразу оценить, как форма будет выглядеть на разных устройствах.

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

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