Код IT
← Каталог

Tailwind — готовые блоки — Контактная форма в две колонки

Фрагмент из «Tailwind — готовые блоки»: Контактная форма в две колонки.

html lab1117 embed URL статья в энциклопедии
HTML main.html 
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Контакты</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-50 p-6">
  <form class="mx-auto max-w-xl space-y-4 rounded-xl bg-white p-6 shadow-md">
    <h1 class="text-xl font-semibold">Напишите нам</h1>
    <div class="grid gap-4 md:grid-cols-2">
      <label class="block">
        <span class="text-sm font-medium">Имя</span>
        <input type="text" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2" />
      </label>
      <label class="block">
        <span class="text-sm font-medium">Email</span>
        <input type="email" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2" />
      </label>
    </div>
    <label class="block">
      <span class="text-sm font-medium">Сообщение</span>
      <textarea rows="4" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2"></textarea>
    </label>
    <button type="submit" class="rounded-lg bg-emerald-600 px-5 py-2.5 font-semibold text-white hover:bg-emerald-700">
      Отправить
    </button>
  </form>
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Контакты</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-50 p-6">
  <form class="mx-auto max-w-xl space-y-4 rounded-xl bg-white p-6 shadow-md">
    <h1 class="text-xl font-semibold">Напишите нам</h1>
    <div class="grid gap-4 md:grid-cols-2">
      <label class="block">
        <span class="text-sm font-medium">Имя</span>
        <input type="text" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2" />
      </label>
      <label class="block">
        <span class="text-sm font-medium">Email</span>
        <input type="email" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2" />
      </label>
    </div>
    <label class="block">
      <span class="text-sm font-medium">Сообщение</span>
      <textarea rows="4" required class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2"></textarea>
    </label>
    <button type="submit" class="rounded-lg bg-emerald-600 px-5 py-2.5 font-semibold text-white hover:bg-emerald-700">
      Отправить
    </button>
  </form>
</body>
</html>