django/static/css/t-input.css

@@ -56,6 +56,34 @@ a.qp-a-button-small {
 }
 
 
+.field-group form p {
+    @apply flex flex-col gap-2;
+}
+
+.field-group form p label {
+    @apply text-gray-900 font-semibold text-sm;
+}
+
+.field-group form p input {
+    @apply p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black 
+    focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100;
+}
+
+.field-group form p select {
+    @apply p-3 rounded-md bg-gray-200 focus:scale-105 transition duration-200 font-black
+    focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100;
+}
+
+.field-group form p textarea {
+    @apply p-3 rounded-xl bg-gray-200 focus:scale-105 transition duration-200 font-black
+    focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100 min-h-[100px];
+}
+
+.field-group form p button {
+    @apply p-3 rounded-full bg-indigo-500 hover:bg-indigo-600 text-white focus:scale-105 
+    transition duration-200 font-black shadow-md hover:shadow-lg;
+}
+
 
 
 ul.messages li {

django/templates/library/form.html

@@ -5,9 +5,9 @@
 
 
 
-
-<div class="dark input-group  border-blue-600 border-2 rounded-xl shadow-md mt-12 dark:text-white! dark:bg-transparent!">
-    <form method="post" enctype="multipart/form-data" class="dark-form ">
+  <div class="container mx-auto px-4 py-4">
+<div class="max-w-lg field-group mx-auto bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md dark:bg-transparent dark:text-white">
+    <form method="post" enctype="multipart/form-data" class="dark-form space-y-4">
         {% csrf_token %}
         {{ form.as_p }}
 
@@ -39,4 +39,5 @@
         </div>
     </form>
 </div>
+</div>
 {% endblock %}