more drinks styling

templates/drinks.rs.html

@@ -25,14 +25,18 @@
   <div class="flex flex-col items-center gap-24">
     <div>
       <div>
-        <label for="quantity">Quantity: </label>
-        <input type="number" id="quantity" name="quantity" step="1" value="1" />
+        <label for="quantity" class="block mb-2 text-sm font-medium text-gray-900">Quantity: </label>
+        <div class="flex flex-col">
+          <button type="button" onclick="this.nextElementSibling.stepUp()" class="py-4 w-14 text-lg font-medium text-gray-900 focus:outline-none bg-white rounded-t-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200">+1</button>
+          <input type="number" id="quantity" name="quantity" step="1" value="1" class="bg-gray-50 border border-gray-300 text-gray-900 w-14 text-center text-2xl focus:ring-blue-500 focus:border-blue-500 block p-2.5"/>
+          <button type="button" onclick="this.previousElementSibling.stepDown()"  class="py-4 w-14 text-lg font-medium text-gray-900 focus:outline-none bg-white rounded-b-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200">-1</button>
+        </div>
       </div>
       <input type="hidden" id="shift_id" name="shift_id" value="@shift_id" />
     </div>
 
-    <button type="submit">
-      submit
+    <button type="submit" class="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">
+      Submit
     </button>
 </form>
 

templates/styles/main.css

@@ -1,3 +1,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}