Главная
Промты
Ссылка на почту
Запрос magic-ссылки — форма авторизации на Tailwind
Формы авторизации

Запрос magic-ссылки

Вход по email без пароля

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

Промпт

Язык промпта / Prompt language

Создайте карточку входа без пароля с помощью Tailwind CSS. По центру на мягком нейтральном фоне, max-w-sm, rounded-2xl с тонкой рамкой. Добавьте небольшой скруглённый значок логотипа, заголовок о входе без пароля, одно поле email, полноширинную тёмную кнопку отправки, приглушённую информационную панель с пояснением, что ссылка действует 10 минут и работает один раз, и строку внизу с предложением использовать пароль. Сохраняйте спокойный тон и щедрые отступы.

Вставьте это в Claude, Cursor, v0 или любой другой AI-инструмент для разработки. Переключатель RU / EN меняет язык промпта и в блоке выше, и во вкладке «Промпт» ниже.

Исходный код
Tailwind
<div class="flex min-h-screen items-center justify-center bg-neutral-100 p-6">
  <div class="w-full max-w-sm rounded-2xl border border-neutral-200 bg-white p-8 shadow-sm">
    <div class="mb-6 flex h-10 w-10 items-center justify-center rounded-xl bg-neutral-900 text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 1.15 3.1a4 4 0 0 0 2.36 2.36L18.6 9.6l-3.09 1.15a4 4 0 0 0-2.36 2.36L12 16.2l-1.15-3.09a4 4 0 0 0-2.36-2.36L5.4 9.6l3.09-1.14a4 4 0 0 0 2.36-2.36L12 3Z"/><path d="m18.5 15 .55 1.45a2 2 0 0 0 1.18 1.18l1.47.55-1.47.55a2 2 0 0 0-1.18 1.18l-.55 1.47-.55-1.47a2 2 0 0 0-1.18-1.18l-1.47-.55 1.47-.55a2 2 0 0 0 1.18-1.18L18.5 15Z"/></svg></div>
    <h1 class="text-xl font-semibold text-neutral-900">Sign in without a password</h1>
    <p class="mt-1 text-sm text-neutral-500">We will email you a secure link that signs you in instantly.</p>
    <form class="mt-6 space-y-3">
      <input type="email" placeholder="you@company.com"
        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" />
      <button class="w-full rounded-xl bg-neutral-900 py-2.5 text-sm font-medium text-white transition hover:bg-neutral-800">Email me a link</button>
    </form>
    <div class="mt-6 rounded-xl bg-neutral-50 p-3.5 text-xs leading-relaxed text-neutral-500">
      Links expire after 10 minutes and can only be used once. Check your spam folder if it does not arrive.
    </div>
    <p class="mt-6 text-center text-sm text-neutral-500">
      Prefer a password? <a href="#" class="font-medium text-neutral-900 hover:underline">Use one instead</a>
    </p>
  </div>
</div>

Промт и исходный код для создания окна авторизации через код на почту

Эта страница — интерактивный пример карточки входа по magic-ссылке, созданной на Tailwind CSS. Она объединяет живое превью, готовый промпт для AI-инструментов и исходный код.

В верхней части расположен блок живого просмотра. С помощью кнопок «Полный экран», «Планшет» и «Мобильный» можно менять ширину iframe и проверять, как карточка выглядит на разных устройствах.

Ниже находится блок с промптом. Переключатель RU / EN позволяет мгновенно переключить язык описания задачи: русский или английский. Выбранный язык синхронизируется с вкладкой «Промпт» в панели кода.

Панель кода содержит две вкладки: «Промпт» и «Tailwind». В первой отображается текст промпта на выбранном языке, во второй — полная HTML-разметка карточки. Кнопка «Копировать» копирует содержимое активной вкладки в буфер обмена.