From 3db0211914665c5fef933a707d4f827f9b5b86d1 Mon Sep 17 00:00:00 2001
From: Viacheslav <themoon@mail.gg>
Date: Tue, 29 Apr 2025 12:51:16 +0300
Subject: [PATCH] Add form.html

---
 form.html | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 form.html

diff --git a/form.html b/form.html
new file mode 100644
index 0000000..e1af4e1
--- /dev/null
+++ b/form.html
@@ -0,0 +1,34 @@
+<!--
+  Welcome to Tailwind Play, the official Tailwind CSS playground!
+
+  Everything here works just like it does when you're running Tailwind locally
+  with a real build pipeline. You can customize your theme, use features
+  like `@utility`, or even add third-party plugins using `@plugin`.
+
+  Feel free to play with this example if you're just learning, or trash it and
+  start from scratch if you know enough to be dangerous. Have fun!
+-->
+<div class="relative grid min-h-screen grid-cols-[1fr_2.5rem_auto_2.5rem_1fr] grid-rows-[1fr_1px_auto_1px_1fr] bg-white [--pattern-fg:var(--color-gray-950)]/5 dark:bg-gray-950 dark:[--pattern-fg:var(--color-white)]/10">
+  <div class="col-start-3 row-start-3 flex max-w-lg flex-col p-2">
+    <div class="rounded-xl bg-white p-10 text-sm/7 text-gray-800 dark:bg-gray-900 dark:text-gray-200">
+      <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Сообщить о проблеме</h1>
+      <div class="space-y-6">
+        <p class="leading-5">Чем подробнее вы опишете ситуацию, тем быстрее мы найдём решение</p>
+        <form class="space-y-3">
+          <input type="text" id="name" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-orange-500 focus:ring-orange-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-orange-500 dark:focus:ring-orange-500" placeholder="Ваше имя" required />
+
+          <select id="countries" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-orange-500 focus:ring-orange-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-orange-500 dark:focus:ring-orange-500">
+            <option>Выберите тип проблемы</option>
+            <option>Ошибка в работе ПО</option>
+            <option>Проблемы с доступом/паролями</option>
+            <option>Не работает оборудование</option>
+            <option>Другое</option>
+          </select>
+          <textarea id="message" rows="4" class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-orange-500 focus:ring-orange-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-orange-500 dark:focus:ring-orange-500" placeholder="Добавьте описание"></textarea>
+
+          <button type="button" class="text-md mb-2 w-full rounded-lg bg-orange-700 px-5 py-2.5 font-bold text-white hover:bg-orange-800 focus:ring-4 focus:ring-orange-300 focus:outline-none dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-900">Отправить</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>