Styled with tailwind css

web/templates/editor.html

@@ -1,13 +1,20 @@
 {{define "page-content"}}
 <h2>Editor</h2>
 <form>
-    <div>
-        <input name="article-title" placeholder="Titel" type="text" />
-        <textarea name="article-description" placeholder="Beschreibung"></textarea>
-        <textarea name="article-content" placeholder="Artikel"></textarea>
+    <div class="flex flex-col gap-y-1">
+        <label for="article-title">Titel</label>
+        <input name="article-title" type="text" />
+    </div>
+    <div class="flex flex-col">
+        <label for="article-description">Beschreibung</label>
+        <textarea name="article-description"></textarea>
+    </div>
+    <div class="flex flex-col">
+        <label for="article-content">Artikel</label>
+        <textarea name="article-content"></textarea>
     </div>
 
-    <div>
+    <div class="flex gap-4">
         {{range .}}
         <div>
             <input id="{{.Name}}" name="tags" type="checkbox" value="{{.ID}}" />
@@ -17,15 +24,16 @@
     </div>
 
     <div id="editor-images">
-        <input name="article-image" type="file" hx-encoding="multipart/form-data" hx-post="/upload-image/"
+        <input class="mb-2" name="article-image" type="file" hx-encoding="multipart/form-data" hx-post="/upload-image/"
             hx-swap="beforeend" hx-target="#editor-images" />
     </div>
 
-    <input type="submit" value="Senden" hx-post="/submit-article/" hx-target="#page-content" />
+    <div class="btn-area">
+        <input class="action-btn" type="submit" value="Senden" hx-post="/submit-article/" hx-target="#page-content" />
+        <button class="btn" hx-get="/hub/" hx-target="#page-content">Abbrechen</button>
+    </div>
 </form>
 
-<button hx-get="/hub/" hx-target="#page-content">Abbrechen</button>
-
 <script>
     function copyToClipboard(text) {
         event.preventDefault(); // Get-Request verhindern
@@ -49,9 +57,10 @@
 
 {{define "editor-images"}}
 {{if gt (len .) 0}}
-<div>
-    {{.}}
-    <button onclick="copyToClipboard('{{.}}')">Kopieren</button>
+<div class="border px-2 py-1 rounded-md flex gap-4 justify-between">
+    <div class="self-center">{{.}}</div>
+    <button class="bg-slate-50 border my-2 px-3 py-2 rounded-md w-32 hover:bg-slate-100"
+        onclick="copyToClipboard('{{.}}')">Kopieren</button>
 </div>
 {{end}}
 {{end}}