📝 Форма

<form class="w-full max-w-sm space-y-4 rounded-xl border border-slate-200 bg-white p-5 dark:border-slate-700 dark:bg-slate-900">
  <div class="space-y-1.5">
    <label class="block text-sm font-medium text-slate-700 dark:text-slate-200" for="pf-mail">Электронная почта</label>
    <input id="pf-mail" type="email" autocomplete="email" placeholder="name@example.com"
           class="w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm text-slate-900
                  placeholder:text-slate-400 focus:border-sky-500 focus:ring-2 focus:ring-sky-500/30 focus:outline-none
                  dark:border-slate-600 dark:text-slate-100">
  </div>
  <div class="space-y-1.5">
    <div class="flex items-center justify-between">
      <label class="text-sm font-medium text-slate-700 dark:text-slate-200" for="pf-pass">Пароль</label>
      <a class="text-xs text-sky-700 underline-offset-4 hover:underline dark:text-sky-400" href="#">Забыли?</a>
    </div>
    <input id="pf-pass" type="password" autocomplete="current-password"
           class="w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm text-slate-900
                  focus:border-sky-500 focus:ring-2 focus:ring-sky-500/30 focus:outline-none
                  dark:border-slate-600 dark:text-slate-100">
  </div>
  <button class="w-full rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white dark:bg-slate-100 dark:text-slate-900">Войти</button>
</form>

<div class="w-full max-w-sm space-y-1.5">
  <label class="block text-sm font-medium text-slate-700 dark:text-slate-200" for="pf-phone">Телефон</label>
  <input id="pf-phone" type="tel" inputmode="tel" value="+7 900 12" aria-invalid="true" aria-describedby="pf-phone-hint pf-phone-err"
         class="w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm text-slate-900
                aria-invalid:border-rose-500 aria-invalid:bg-rose-50 dark:border-slate-600 dark:text-slate-100 dark:aria-invalid:bg-rose-950/30">
  <p id="pf-phone-hint" class="text-xs text-slate-500 dark:text-slate-400">Формат: +7 и десять цифр</p>
  <p id="pf-phone-err" role="alert" class="text-xs text-rose-600 dark:text-rose-400">Номер введён не полностью</p>
</div>

<form class="grid w-full max-w-2xl gap-4 rounded-xl border border-slate-200 bg-white p-5 sm:grid-cols-2
             dark:border-slate-700 dark:bg-slate-900">
  <div class="space-y-1.5">
    <label class="block text-sm font-medium text-slate-700 dark:text-slate-200" for="pf-first">Имя</label>
    <input id="pf-first" class="w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm dark:border-slate-600 dark:text-slate-100" value="Ирина">
  </div>
  <div class="space-y-1.5">
    <label class="block text-sm font-medium text-slate-700 dark:text-slate-200" for="pf-last">Фамилия</label>
    <input id="pf-last" class="w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm dark:border-slate-600 dark:text-slate-100" value="Соколова">
  </div>
  <div class="space-y-1.5 sm:col-span-2">
    <label class="block text-sm font-medium text-slate-700 dark:text-slate-200" for="pf-about">О себе</label>
    <textarea id="pf-about" rows="3" class="w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm dark:border-slate-600 dark:text-slate-100">Продуктовый аналитик</textarea>
  </div>
  <div class="flex justify-end gap-2 sm:col-span-2">
    <button class="rounded-md px-4 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800">Отмена</button>
    <button class="rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white dark:bg-slate-100 dark:text-slate-900">Сохранить</button>
  </div>
</form>

<div class="w-full max-w-lg space-y-4">
  <div class="grid gap-2 sm:grid-cols-3">
    <label class="cursor-pointer rounded-lg border border-slate-200 p-3 text-center text-sm transition-colors
                  has-checked:border-sky-500 has-checked:bg-sky-50 dark:border-slate-700 dark:has-checked:bg-sky-950/40">
      <input type="radio" name="pf-plan" class="sr-only">Старт
    </label>
    <label class="cursor-pointer rounded-lg border border-slate-200 p-3 text-center text-sm transition-colors
                  has-checked:border-sky-500 has-checked:bg-sky-50 dark:border-slate-700 dark:has-checked:bg-sky-950/40">
      <input type="radio" name="pf-plan" class="sr-only" checked>Команда
    </label>
    <label class="cursor-pointer rounded-lg border border-slate-200 p-3 text-center text-sm transition-colors
                  has-checked:border-sky-500 has-checked:bg-sky-50 dark:border-slate-700 dark:has-checked:bg-sky-950/40">
      <input type="radio" name="pf-plan" class="sr-only">Компания
    </label>
  </div>
  <label class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-slate-200 p-3 dark:border-slate-700">
    <span class="text-sm text-slate-700 dark:text-slate-200">Присылать отчёты на почту</span>
    <input type="checkbox" checked class="peer sr-only">
    <span class="relative h-6 w-11 shrink-0 rounded-full bg-slate-300 transition-colors peer-checked:bg-emerald-500 dark:bg-slate-600">
      <span class="absolute top-0.5 left-0.5 size-5 rounded-full bg-white transition-transform peer-checked:translate-x-5"></span>
    </span>
  </label>
</div>