From 18bcc3dfa8f1fdcf39d44432efe1a13fabb1c657 Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quentingliech@gmail.com>
Date: Mon, 13 Dec 2021 16:55:08 +0100
Subject: [PATCH] Frontend overhaul based on Tailwind CSS

---
 crates/static-files/package-lock.json         | 531 ++----------------
 crates/static-files/package.json              |   3 +-
 crates/static-files/tailwind.config.js        |  28 +-
 crates/templates/src/functions.rs             |  30 +
 crates/templates/src/lib.rs                   |   3 +
 crates/templates/src/res/base.html            |  52 +-
 .../templates/src/res/components/button.html  |  55 ++
 .../templates/src/res/components/field.html   |  35 ++
 crates/templates/src/res/index.html           |  11 +-
 crates/templates/src/res/login.html           |  86 +--
 crates/templates/src/res/reauth.html          |  56 +-
 crates/templates/src/res/register.html        |  64 +--
 12 files changed, 313 insertions(+), 641 deletions(-)
 create mode 100644 crates/templates/src/functions.rs
 create mode 100644 crates/templates/src/res/components/button.html
 create mode 100644 crates/templates/src/res/components/field.html

diff --git a/crates/static-files/package-lock.json b/crates/static-files/package-lock.json
index 9025524e..eaa44815 100644
--- a/crates/static-files/package-lock.json
+++ b/crates/static-files/package-lock.json
@@ -7,10 +7,11 @@
       "name": "static-files",
       "license": "Apache-2.0",
       "devDependencies": {
+        "@tailwindcss/forms": "^0.4.0",
         "autoprefixer": "^10.4.0",
         "cssnano": "^5.0.12",
         "postcss": "^8.4.4",
-        "tailwindcss": "^2.2.19"
+        "tailwindcss": "^3.0.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -145,6 +146,18 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@tailwindcss/forms": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.4.0.tgz",
+      "integrity": "sha512-DeaQBx6EgEeuZPQACvC+mKneJsD8am1uiJugjgQK1+/Vt+Ai0GpFBC2T2fqnUad71WgOxyrZPE6BG1VaI6YqfQ==",
+      "dev": true,
+      "dependencies": {
+        "mini-svg-data-uri": "^1.2.3"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
+      }
+    },
     "node_modules/@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -325,15 +338,6 @@
         "url": "https://opencollective.com/browserslist"
       }
     },
-    "node_modules/bytes": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.1.tgz",
-      "integrity": "sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -423,16 +427,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/color": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/color/-/color-4.1.0.tgz",
-      "integrity": "sha512-o2rkkxyLGgYoeUy1OodXpbPAQNmlNBrirQ8ODO8QutzDiDMNdezSOZLNnusQ6pUpCQJUsaJIo9DZJKqa2HgH7A==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1",
-        "color-string": "^1.9.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -451,31 +445,12 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
-    "node_modules/color-string": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.0.tgz",
-      "integrity": "sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
     "node_modules/colord": {
       "version": "2.9.1",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.1.tgz",
       "integrity": "sha512-4LBMSt09vR0uLnPVkOUBnmxgoaeN4ewRbx801wY/bXcltXfpR/G46OdWn96XpYmCWuYvO46aBZP4NgX8HpNAcw==",
       "dev": true
     },
-    "node_modules/commander": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
-      "dev": true,
-      "engines": {
-        "node": ">= 12"
-      }
-    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -498,15 +473,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/css-color-names": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
-      "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/css-declaration-sorter": {
       "version": "6.1.3",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.3.tgz",
@@ -551,12 +517,6 @@
         "node": ">=8.0.0"
       }
     },
-    "node_modules/css-unit-converter": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
-      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
-      "dev": true
-    },
     "node_modules/css-what": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
@@ -864,20 +824,6 @@
         "url": "https://www.patreon.com/infusion"
       }
     },
-    "node_modules/fs-extra": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz",
-      "integrity": "sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -936,12 +882,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/graceful-fs": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
-      "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==",
-      "dev": true
-    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -963,33 +903,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/hex-color-regex": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
-      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
-      "dev": true
-    },
-    "node_modules/hsl-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz",
-      "integrity": "sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=",
-      "dev": true
-    },
-    "node_modules/hsla-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
-      "integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg=",
-      "dev": true
-    },
-    "node_modules/html-tags": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
-      "integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/import-cwd": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
@@ -1082,20 +995,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/is-color-stop": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz",
-      "integrity": "sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=",
-      "dev": true,
-      "dependencies": {
-        "css-color-names": "^0.0.4",
-        "hex-color-regex": "^1.1.0",
-        "hsl-regex": "^1.0.0",
-        "hsla-regex": "^1.0.0",
-        "rgb-regex": "^1.0.1",
-        "rgba-regex": "^1.0.0"
-      }
-    },
     "node_modules/is-core-module": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.0.tgz",
@@ -1156,18 +1055,6 @@
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
       "dev": true
     },
-    "node_modules/jsonfile": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dev": true,
-      "dependencies": {
-        "universalify": "^2.0.0"
-      },
-      "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
-      }
-    },
     "node_modules/lilconfig": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.4.tgz",
@@ -1183,24 +1070,12 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
-    "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
-    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
-    "node_modules/lodash.topath": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
-      "integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=",
-      "dev": true
-    },
     "node_modules/lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -1235,6 +1110,15 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.3.tgz",
+      "integrity": "sha512-gSfqpMRC8IxghvMcxzzmMnWpXAChSA+vy4cia33RgerMS8Fex95akUyQZPbxJJmeBGiGmK7n/1OpUX8ksRjIdA==",
+      "dev": true,
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -1253,18 +1137,6 @@
       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
       "dev": true
     },
-    "node_modules/modern-normalize": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz",
-      "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/nanoid": {
       "version": "3.1.30",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
@@ -1277,15 +1149,6 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/node-emoji": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
-      "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
-      "dev": true,
-      "dependencies": {
-        "lodash": "^4.17.21"
-      }
-    },
     "node_modules/node-releases": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
@@ -1935,30 +1798,6 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
-    "node_modules/pretty-hrtime": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
-      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/purgecss": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.1.3.tgz",
-      "integrity": "sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==",
-      "dev": true,
-      "dependencies": {
-        "commander": "^8.0.0",
-        "glob": "^7.1.7",
-        "postcss": "^8.3.5",
-        "postcss-selector-parser": "^6.0.6"
-      },
-      "bin": {
-        "purgecss": "bin/purgecss.js"
-      }
-    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -2003,22 +1842,6 @@
         "node": ">=8.10.0"
       }
     },
-    "node_modules/reduce-css-calc": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
-      "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
-      "dev": true,
-      "dependencies": {
-        "css-unit-converter": "^1.1.1",
-        "postcss-value-parser": "^3.3.0"
-      }
-    },
-    "node_modules/reduce-css-calc/node_modules/postcss-value-parser": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-      "dev": true
-    },
     "node_modules/resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@@ -2051,18 +1874,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/rgb-regex": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz",
-      "integrity": "sha1-wODWiC3w4jviVKR16O3UGRX+rrE=",
-      "dev": true
-    },
-    "node_modules/rgba-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
-      "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
-      "dev": true
-    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -2101,21 +1912,6 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/simple-swizzle": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
-      "dev": true,
-      "dependencies": {
-        "is-arrayish": "^0.3.1"
-      }
-    },
-    "node_modules/simple-swizzle/node_modules/is-arrayish": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-      "dev": true
-    },
     "node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -2199,41 +1995,30 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "2.2.19",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.19.tgz",
-      "integrity": "sha512-6Ui7JSVtXadtTUo2NtkBBacobzWiQYVjYW0ZnKaP9S1ZCKQ0w7KVNz+YSDI/j7O7KCMHbOkz94ZMQhbT9pOqjw==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.0.tgz",
+      "integrity": "sha512-UPAp2PS5vojAvGClJFIkdh2hfFyaSWo09Ma9j2vZYW+ANhTvpUHFjY85JgtrvvXXREtDvOXy2BxW1yHOz8apCg==",
       "dev": true,
       "dependencies": {
         "arg": "^5.0.1",
-        "bytes": "^3.0.0",
         "chalk": "^4.1.2",
         "chokidar": "^3.5.2",
-        "color": "^4.0.1",
+        "color-name": "^1.1.4",
         "cosmiconfig": "^7.0.1",
         "detective": "^5.2.0",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
         "fast-glob": "^3.2.7",
-        "fs-extra": "^10.0.0",
-        "glob-parent": "^6.0.1",
-        "html-tags": "^3.1.0",
-        "is-color-stop": "^1.1.0",
-        "is-glob": "^4.0.1",
-        "lodash": "^4.17.21",
-        "lodash.topath": "^4.5.2",
-        "modern-normalize": "^1.1.0",
-        "node-emoji": "^1.11.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
         "normalize-path": "^3.0.0",
         "object-hash": "^2.2.0",
         "postcss-js": "^3.0.3",
         "postcss-load-config": "^3.1.0",
         "postcss-nested": "5.0.6",
         "postcss-selector-parser": "^6.0.6",
-        "postcss-value-parser": "^4.1.0",
-        "pretty-hrtime": "^1.0.3",
-        "purgecss": "^4.0.3",
+        "postcss-value-parser": "^4.2.0",
         "quick-lru": "^5.1.1",
-        "reduce-css-calc": "^2.1.8",
         "resolve": "^1.20.0",
         "tmp": "^0.2.1"
       },
@@ -2279,15 +2064,6 @@
         "node": ">=8.0"
       }
     },
-    "node_modules/universalify": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -2424,6 +2200,15 @@
         "fastq": "^1.6.0"
       }
     },
+    "@tailwindcss/forms": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.4.0.tgz",
+      "integrity": "sha512-DeaQBx6EgEeuZPQACvC+mKneJsD8am1uiJugjgQK1+/Vt+Ai0GpFBC2T2fqnUad71WgOxyrZPE6BG1VaI6YqfQ==",
+      "dev": true,
+      "requires": {
+        "mini-svg-data-uri": "^1.2.3"
+      }
+    },
     "@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -2554,12 +2339,6 @@
         "picocolors": "^1.0.0"
       }
     },
-    "bytes": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.1.tgz",
-      "integrity": "sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg==",
-      "dev": true
-    },
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -2627,16 +2406,6 @@
         }
       }
     },
-    "color": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/color/-/color-4.1.0.tgz",
-      "integrity": "sha512-o2rkkxyLGgYoeUy1OodXpbPAQNmlNBrirQ8ODO8QutzDiDMNdezSOZLNnusQ6pUpCQJUsaJIo9DZJKqa2HgH7A==",
-      "dev": true,
-      "requires": {
-        "color-convert": "^2.0.1",
-        "color-string": "^1.9.0"
-      }
-    },
     "color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2652,28 +2421,12 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
-    "color-string": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.0.tgz",
-      "integrity": "sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==",
-      "dev": true,
-      "requires": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
     "colord": {
       "version": "2.9.1",
       "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.1.tgz",
       "integrity": "sha512-4LBMSt09vR0uLnPVkOUBnmxgoaeN4ewRbx801wY/bXcltXfpR/G46OdWn96XpYmCWuYvO46aBZP4NgX8HpNAcw==",
       "dev": true
     },
-    "commander": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
-      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
-      "dev": true
-    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2693,12 +2446,6 @@
         "yaml": "^1.10.0"
       }
     },
-    "css-color-names": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
-      "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
-      "dev": true
-    },
     "css-declaration-sorter": {
       "version": "6.1.3",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.3.tgz",
@@ -2731,12 +2478,6 @@
         "source-map": "^0.6.1"
       }
     },
-    "css-unit-converter": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
-      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
-      "dev": true
-    },
     "css-what": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
@@ -2961,17 +2702,6 @@
       "integrity": "sha512-o2RiJQ6DZaR/5+Si0qJUIy637QMRudSi9kU/FFzx9EZazrIdnBgpU+3sEWCxAVhH2RtxW2Oz+T4p2o8uOPVcgA==",
       "dev": true
     },
-    "fs-extra": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz",
-      "integrity": "sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      }
-    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3014,12 +2744,6 @@
         "is-glob": "^4.0.3"
       }
     },
-    "graceful-fs": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
-      "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==",
-      "dev": true
-    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -3035,30 +2759,6 @@
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true
     },
-    "hex-color-regex": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
-      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
-      "dev": true
-    },
-    "hsl-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz",
-      "integrity": "sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=",
-      "dev": true
-    },
-    "hsla-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
-      "integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg=",
-      "dev": true
-    },
-    "html-tags": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
-      "integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==",
-      "dev": true
-    },
     "import-cwd": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
@@ -3132,20 +2832,6 @@
         "binary-extensions": "^2.0.0"
       }
     },
-    "is-color-stop": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz",
-      "integrity": "sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=",
-      "dev": true,
-      "requires": {
-        "css-color-names": "^0.0.4",
-        "hex-color-regex": "^1.1.0",
-        "hsl-regex": "^1.0.0",
-        "hsla-regex": "^1.0.0",
-        "rgb-regex": "^1.0.1",
-        "rgba-regex": "^1.0.0"
-      }
-    },
     "is-core-module": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.0.tgz",
@@ -3194,16 +2880,6 @@
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
       "dev": true
     },
-    "jsonfile": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.6",
-        "universalify": "^2.0.0"
-      }
-    },
     "lilconfig": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.4.tgz",
@@ -3216,24 +2892,12 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
-    "lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
-    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
-    "lodash.topath": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
-      "integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=",
-      "dev": true
-    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -3262,6 +2926,12 @@
         "picomatch": "^2.2.3"
       }
     },
+    "mini-svg-data-uri": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.3.tgz",
+      "integrity": "sha512-gSfqpMRC8IxghvMcxzzmMnWpXAChSA+vy4cia33RgerMS8Fex95akUyQZPbxJJmeBGiGmK7n/1OpUX8ksRjIdA==",
+      "dev": true
+    },
     "minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -3277,27 +2947,12 @@
       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
       "dev": true
     },
-    "modern-normalize": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz",
-      "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==",
-      "dev": true
-    },
     "nanoid": {
       "version": "3.1.30",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
       "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==",
       "dev": true
     },
-    "node-emoji": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
-      "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
-      "dev": true,
-      "requires": {
-        "lodash": "^4.17.21"
-      }
-    },
     "node-releases": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
@@ -3712,24 +3367,6 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
-    "pretty-hrtime": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
-      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
-      "dev": true
-    },
-    "purgecss": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.1.3.tgz",
-      "integrity": "sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==",
-      "dev": true,
-      "requires": {
-        "commander": "^8.0.0",
-        "glob": "^7.1.7",
-        "postcss": "^8.3.5",
-        "postcss-selector-parser": "^6.0.6"
-      }
-    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -3751,24 +3388,6 @@
         "picomatch": "^2.2.1"
       }
     },
-    "reduce-css-calc": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
-      "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
-      "dev": true,
-      "requires": {
-        "css-unit-converter": "^1.1.1",
-        "postcss-value-parser": "^3.3.0"
-      },
-      "dependencies": {
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        }
-      }
-    },
     "resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@@ -3791,18 +3410,6 @@
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
       "dev": true
     },
-    "rgb-regex": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz",
-      "integrity": "sha1-wODWiC3w4jviVKR16O3UGRX+rrE=",
-      "dev": true
-    },
-    "rgba-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
-      "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
-      "dev": true
-    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -3821,23 +3428,6 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "simple-swizzle": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
-      "dev": true,
-      "requires": {
-        "is-arrayish": "^0.3.1"
-      },
-      "dependencies": {
-        "is-arrayish": {
-          "version": "0.3.2",
-          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
-          "dev": true
-        }
-      }
-    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -3899,41 +3489,30 @@
       }
     },
     "tailwindcss": {
-      "version": "2.2.19",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.19.tgz",
-      "integrity": "sha512-6Ui7JSVtXadtTUo2NtkBBacobzWiQYVjYW0ZnKaP9S1ZCKQ0w7KVNz+YSDI/j7O7KCMHbOkz94ZMQhbT9pOqjw==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.0.tgz",
+      "integrity": "sha512-UPAp2PS5vojAvGClJFIkdh2hfFyaSWo09Ma9j2vZYW+ANhTvpUHFjY85JgtrvvXXREtDvOXy2BxW1yHOz8apCg==",
       "dev": true,
       "requires": {
         "arg": "^5.0.1",
-        "bytes": "^3.0.0",
         "chalk": "^4.1.2",
         "chokidar": "^3.5.2",
-        "color": "^4.0.1",
+        "color-name": "^1.1.4",
         "cosmiconfig": "^7.0.1",
         "detective": "^5.2.0",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
         "fast-glob": "^3.2.7",
-        "fs-extra": "^10.0.0",
-        "glob-parent": "^6.0.1",
-        "html-tags": "^3.1.0",
-        "is-color-stop": "^1.1.0",
-        "is-glob": "^4.0.1",
-        "lodash": "^4.17.21",
-        "lodash.topath": "^4.5.2",
-        "modern-normalize": "^1.1.0",
-        "node-emoji": "^1.11.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
         "normalize-path": "^3.0.0",
         "object-hash": "^2.2.0",
         "postcss-js": "^3.0.3",
         "postcss-load-config": "^3.1.0",
         "postcss-nested": "5.0.6",
         "postcss-selector-parser": "^6.0.6",
-        "postcss-value-parser": "^4.1.0",
-        "pretty-hrtime": "^1.0.3",
-        "purgecss": "^4.0.3",
+        "postcss-value-parser": "^4.2.0",
         "quick-lru": "^5.1.1",
-        "reduce-css-calc": "^2.1.8",
         "resolve": "^1.20.0",
         "tmp": "^0.2.1"
       }
@@ -3962,12 +3541,6 @@
         "is-number": "^7.0.0"
       }
     },
-    "universalify": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-      "dev": true
-    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/crates/static-files/package.json b/crates/static-files/package.json
index 4d4742db..048711d3 100644
--- a/crates/static-files/package.json
+++ b/crates/static-files/package.json
@@ -7,9 +7,10 @@
   },
   "license": "Apache-2.0",
   "devDependencies": {
+    "@tailwindcss/forms": "^0.4.0",
     "autoprefixer": "^10.4.0",
     "cssnano": "^5.0.12",
     "postcss": "^8.4.4",
-    "tailwindcss": "^2.2.19"
+    "tailwindcss": "^3.0.0"
   }
 }
diff --git a/crates/static-files/tailwind.config.js b/crates/static-files/tailwind.config.js
index a7fd5e73..e598666d 100644
--- a/crates/static-files/tailwind.config.js
+++ b/crates/static-files/tailwind.config.js
@@ -14,13 +14,33 @@
 
 module.exports = {
   mode: "jit",
-  purge: ["../templates/src/res/*.html"],
-  darkMode: false,
+  content: ["../templates/src/res/**/*.html"],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        accent: '#0DBD8B',
+        alert: '#FF5B55',
+        links: '#0086E6',
+        'grey-25': '#F4F6FA',
+        'grey-50': '#E3E8F0',
+        'grey-100': '#C1C6CD',
+        'grey-150': '#8D97A5',
+        'grey-200': '#737D8C',
+        'grey-250': '#A9B2BC',
+        'grey-300': '#8E99A4',
+        'grey-400': '#6F7882',
+        'grey-450': '#394049',
+        'black-800': '#15191E',
+        'black-900': '#17191C',
+        'black-950': '#21262C',
+        'ice': '#F4F9FD',
+      },
+    },
   },
   variants: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/forms'),
+  ],
 }
diff --git a/crates/templates/src/functions.rs b/crates/templates/src/functions.rs
new file mode 100644
index 00000000..01aac8f9
--- /dev/null
+++ b/crates/templates/src/functions.rs
@@ -0,0 +1,30 @@
+// Copyright 2021 The Matrix.org Foundation C.I.C.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+//! Additional functions, tests and filters used in templates
+
+use tera::{helpers::tests::number_args_allowed, Tera, Value};
+
+pub fn register(tera: &mut Tera) {
+    tera.register_tester("empty", self::tester_empty);
+}
+
+fn tester_empty(value: Option<&Value>, params: &[Value]) -> Result<bool, tera::Error> {
+    number_args_allowed("empty", 0, params.len())?;
+
+    match value.and_then(Value::as_array).map(|v| &v[..]) {
+        Some(&[]) | None => Ok(true),
+        Some(_) => Ok(false),
+    }
+}
diff --git a/crates/templates/src/lib.rs b/crates/templates/src/lib.rs
index 81acd55e..640da274 100644
--- a/crates/templates/src/lib.rs
+++ b/crates/templates/src/lib.rs
@@ -41,6 +41,7 @@ use tracing::{debug, info, warn};
 
 #[allow(missing_docs)] // TODO
 mod context;
+mod functions;
 
 #[macro_use]
 mod macros;
@@ -179,6 +180,8 @@ impl Templates {
         tera.build_inheritance_chains()?;
         tera.check_macro_files()?;
 
+        self::functions::register(&mut tera);
+
         let loaded: HashSet<_> = tera.get_template_names().collect();
         let needed: HashSet<_> = std::array::IntoIter::new(TEMPLATES)
             .map(|(name, _)| name)
diff --git a/crates/templates/src/res/base.html b/crates/templates/src/res/base.html
index 109dcd42..6bb47d39 100644
--- a/crates/templates/src/res/base.html
+++ b/crates/templates/src/res/base.html
@@ -14,52 +14,40 @@ See the License for the specific language governing permissions and
 limitations under the License.
 #}
 
+{% import "components/button.html" as button %}
+{% import "components/field.html" as field %}
+
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>{% block title %}matrix-authentication-service{% endblock title %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
     <link rel="stylesheet" href="/tailwind.css">
   </head>
-  <body>
-    <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
-      <div class="container">
-        <div class="navbar-brand">
-          <a class="navbar-item" href="/">
-            matrix-authentication-service
-          </a>
-        </div>
+  <body class="bg-white text-black-900 dark:bg-black-800 dark:text-white flex flex-col min-h-screen">
+    <nav class="container mx-auto py-2 flex-initial flex items-center px-2" role="navigation" aria-label="main navigation">
+      {% block navbar_start %}{% endblock navbar_start %}
 
-        <div class="navbar-end">
+      <div class="flex-1"></div>
+
+      {% block navbar_end %}
+        <div class="grid grid-flow-col auto-cols-max gap-4 place-items-center">
           {% if current_session %}
-            <div class="navbar-item">
-              Howdy {{ current_session.user.username }}!
-            </div>
-            <div class="navbar-item">
-              <form method="POST" action="/logout">
-                <input type="hidden" name="csrf" value="{{ csrf_token }}" />
-                <button class="button is-light" action="submit">
-                  Log out
-                </button>
-              </form>
-            </div>
-          {% else %}
-            <div class="navbar-item">
-              <a class="button is-light" href="/login">
-                Log in
-              </a>
+            <div class="text-grey-200 dark:text-grey-250 mx-2">
+              Logged in as <span class="font-bold">{{ current_session.user.username }}</span>.
             </div>
 
-            <div class="navbar-item">
-              <a class="button is-light" href="/register">
-                Register
-              </a>
-            </div>
+            <form method="POST" action="/logout">
+              <input type="hidden" name="csrf" value="{{ csrf_token }}" />
+              {{ button::button_ghost(text="Log out", name="logout", type="submit") }}
+            </form>
+          {% else %}
+            {{ button::link(text="Log in", href="/login") }}
+            {{ button::link_ghost(text="Register", href="/register") }}
           {% endif %}
         </div>
-      </div>
+      {% endblock navbar_end %}
     </nav>
 
     {% block content %}{% endblock content %}
diff --git a/crates/templates/src/res/components/button.html b/crates/templates/src/res/components/button.html
new file mode 100644
index 00000000..b4eaaf8e
--- /dev/null
+++ b/crates/templates/src/res/components/button.html
@@ -0,0 +1,55 @@
+{#
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+#}
+
+{% macro common_class() -%}
+  px-4 py-2 border-2 rounded-lg font-medium text-center focus:ring-0 focus:outline-0 focus:border-black dark:focus:border-white
+{%- endmacro %}
+
+{% macro plain_class() -%}
+  {{ self::common_class() }} border-accent bg-accent text-white hover:opacity-75
+{%- endmacro %}
+
+{% macro ghost_class() -%}
+  {{ self::common_class() }} border-accent hover:bg-accent/10 text-accent
+{%- endmacro %}
+
+{% macro text_class() -%}
+  {{ self::common_class() }} border-transparent hover:text-accent/70 text-accent
+{%- endmacro %}
+
+{% macro link(text, href="#", class="") %}
+  <a class="{{ self::plain_class() }} {{ class }}" href="{{ href }}">{{ text }}</a>
+{% endmacro %}
+
+{% macro link_text(text, href="#", class="") %}
+<a class="{{ self::text_class() }} {{ class }}" href="{{ href }}">{{ text }}</a>
+{% endmacro %}
+
+{% macro link_ghost(text, href="#", class="") %}
+  <a class="{{ self::ghost_class() }} {{ class }}" href="{{ href }}">{{ text }}</a>
+{% endmacro %}
+
+{% macro button(text, name="", type="submit", class="") %}
+  <button name="{{ name }}" type="{{ type }}" class="{{ self::plain_class() }} {{ class }}">{{ text }}</button>
+{% endmacro %}
+
+{% macro button_text(text, name="", type="submit", class="") %}
+  <button name="{{ name }}" type="{{ type }}" class="{{ self::text_class() }} {{ class }}">{{ text }}</button>
+{% endmacro %}
+
+{% macro button_ghost(text, name="", type="submit", class="") %}
+  <button name="{{ name }}" type="{{ type }}" class="{{ self::ghost_class() }} {{ class }}">{{ text }}</button>
+{% endmacro %}
diff --git a/crates/templates/src/res/components/field.html b/crates/templates/src/res/components/field.html
new file mode 100644
index 00000000..63a59f5b
--- /dev/null
+++ b/crates/templates/src/res/components/field.html
@@ -0,0 +1,35 @@
+{#
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+#}
+
+{% macro input(label, name, type="text", errors=false) %}
+  {% if errors is not empty %}
+    {% set border_color = "border-alert" %}
+    {% set text_color = "text-alert" %}
+  {% else %}
+    {% set border_color = "border-grey-50 dark:border-grey-450" %}
+    {% set text_color = "text-black-800 dark:text-grey-300" %}
+  {% endif %}
+  <label class="flex flex-col block">
+    <div class="mx-2 -mb-3 -mt-2 leading-5 px-1 z-10 self-start bg-white dark:bg-black-900 border-white border-1 dark:border-2 dark:border-black-900 rounded-full text-sm {{ text_color }}">{{ label }}</div>
+    <input name="{{ name }}" class="z-0 px-3 py-2 bg-white dark:bg-black-900 rounded-lg {{ border_color }} border-1 dark:border-2 focus:border-accent focus:ring-0 focus:outline-0" type="{{ type }}" />
+
+    {% if errors is not empty %}
+      {% for error in errors %}
+        <div class="mx-4 text-sm text-alert">{{ error }}</div>
+      {% endfor %}
+    {% endif %}
+  </label>
+{% endmacro input %}
diff --git a/crates/templates/src/res/index.html b/crates/templates/src/res/index.html
index 74ddd75f..e7174af1 100644
--- a/crates/templates/src/res/index.html
+++ b/crates/templates/src/res/index.html
@@ -17,11 +17,12 @@ limitations under the License.
 {% extends "base.html" %}
 
 {% block content %}
-  <section class="section">
-    <div class="container content">
-      <h1>Matrix Authentication Service</h1>
-      <p>
-        OpenID Connect discovery document: <a href="{{ discovery_url }}">{{ discovery_url }}</a>
+  <section class="flex-1 flex flex-col items-center justify-center">
+    <div>
+      <h1 class="my-2 text-5xl font-extrabold leading-tight">Matrix Authentication Service</h1>
+      <p class="text-lg">
+        OpenID Connect discovery document:
+        <a class="text-links hover:text-links/70" href="{{ discovery_url }}">{{ discovery_url }}</a>
       </p>
     </div>
   </section>
diff --git a/crates/templates/src/res/login.html b/crates/templates/src/res/login.html
index d7ce762f..8775bdd6 100644
--- a/crates/templates/src/res/login.html
+++ b/crates/templates/src/res/login.html
@@ -16,64 +16,38 @@ limitations under the License.
 
 {% extends "base.html" %}
 
+{% block navbar_start %}
+  {% if next and next.kind == "continue_authorization_grant" %}
+    <a href="#">← Back</a>
+  {% endif %}
+{% endblock %}
+
+{% block navbar_end %}{% endblock %}
+
 {% block content %}
-  <section class="section">
-    <div class="container is-max-desktop">
-      <div class="columns">
-        <div class="column is-one-third">
-          {% if form.has_errors %}
-            <article class="message is-danger">
-              <div class="message-body">
-                {% for message in form.form_errors %}
-                  <p>{{ message | safe }}</p>
-                {% else %}
-                  <p>Login failed, check the fields below for more details.</p>
-                {% endfor %}
-              </div>
-            </article>
-          {% endif %}
-
-          <form method="POST">
-            <input type="hidden" name="csrf" value="{{ csrf_token }}" />
-            <div class="field">
-              <label class="label" for="login-username">Username</label>
-              <div class="control">
-                <input class="input{% if 'username' in form.fields_errors %} is-danger{% endif %}" name="username" id="login-username" type="text">
-              </div>
-              {% if 'username' in form.fields_errors %}
-                {% for message in form.fields_errors.username %}
-                  <p class="help is-danger">{{ message | safe }}</p>
-                {% endfor %}
-              {% endif %}
-            </div>
-
-            <div class="field">
-              <label class="label" for="login-password">Password</label>
-              <div class="control">
-                <input class="input{% if 'password' in form.fields_errors %} is-danger{% endif %}" name="password" id="login-password" type="password">
-              </div>
-              {% if 'password' in form.fields_errors %}
-                {% for message in form.fields_errors.password %}
-                  <p class="help is-danger">{{ message | safe }}</p>
-                {% endfor %}
-              {% endif %}
-            </div>
-
-            <div class="control">
-              <button type="submit" class="button is-link">Login</button>
-            </div>
-          </form>
-        </div>
-
-        {% if next %}
-          <div class="column is-two-third">
-            <div class="block">
-              <h3 class="title is-3">Next action:</h3>
-              <pre><code>{{ next | json_encode(pretty=True) | safe }}</code></pre>
-            </div>
-          </div>
+  <section class="flex items-center justify-center flex-1">
+    <form method="POST" class="grid grid-cols-1 gap-6 w-96 m-2">
+      <div class="text-center">
+        <h1 class="text-lg text-center font-medium">Log in</h1>
+        {% if next and next.kind == "continue_authorization_grant" %}
+          <p>to continue to <em>{{ next.grant.client.client_id }}</em></p>
+        {% else %}
+          <p>Use your existing account</p>
         {% endif %}
       </div>
-    </div>
+      <input type="hidden" name="csrf" value="{{ csrf_token }}" />
+      {# TODO: errors #}
+      {{ field::input(label="Username", name="username") }}
+      {{ field::input(label="Password", name="password", type="password") }}
+      {{ button::button(text="Next") }}
+      {{ button::link_text(text="Create account", href="/register") }}
+    </form>
   </section>
+
+  {% if next and next.kind == "continue_authorization_grant" %}
+    <section class="self-center my-6">
+      {# TODO: proper back link #}
+      {{ button::link_text(text="Return to application", href="/") }}
+    </section>
+  {% endif %}
 {% endblock content %}
diff --git a/crates/templates/src/res/reauth.html b/crates/templates/src/res/reauth.html
index 62cf6b22..8240b65b 100644
--- a/crates/templates/src/res/reauth.html
+++ b/crates/templates/src/res/reauth.html
@@ -17,38 +17,32 @@ limitations under the License.
 {% extends "base.html" %}
 
 {% block content %}
-  <section class="section">
-    <div class="container is-max-desktop">
-      <div class="columns">
-        <div class="column is-one-third">
-          <form method="POST">
-            <input type="hidden" name="csrf" value="{{ csrf_token }}" />
-            <div class="field">
-              <label class="label" for="login-password">Password</label>
-              <div class="control">
-                <input class="input" name="password" id="login-password" type="password">
-              </div>
-            </div>
-
-            <div class="control">
-              <button type="submit" class="button is-link">Submit</button>
-            </div>
-          </form>
-        </div>
-        <div class="column is-two-third">
-          <div class="block">
-            <h3 class="title is-3">Current session data:</h3>
-            <pre><code>{{ current_session | json_encode(pretty=True) | safe }}</code></pre>
-          </div>
-          {% if next %}
-            <div class="block">
-              <h3 class="title is-3">Next action:</h3>
-              <pre><code>{{ next | json_encode(pretty=True) | safe }}</code></pre>
-            </div>
-          {% endif %}
-        </div>
+  <section class="flex items-center justify-center flex-1">
+    <form method="POST" class="grid grid-cols-1 gap-6 w-96 m-4">
+      <div class="text-center">
+        <h1 class="text-lg text-center font-medium">Confim access</h1>
+        {% if next and next.kind == "continue_authorization_grant" %}
+          <p>to continue to <em>{{ next.grant.client.client_id }}</em></p>
+        {% endif %}
       </div>
-    </div>
+      <input type="hidden" name="csrf" value="{{ csrf_token }}" />
+      {# TODO: errors #}
+      {{ field::input(label="Password", name="password", type="password") }}
+      {{ button::button(text="Confirm password") }}
+    </form>
   </section>
+
+  <div class="flex justify-center">
+    <div class="w-96 m-2">
+      <h3 class="title is-3">Current session data:</h3>
+      <pre class="text-sm whitespace-pre-wrap"><code>{{ current_session | json_encode(pretty=True) | safe }}</code></pre>
+    </div>
+    {% if next %}
+      <div class="w-96 m-2">
+        <h3 class="title is-3">Next action:</h3>
+        <pre class="text-sm whitespace-pre-wrap"><code>{{ next | json_encode(pretty=True) | safe }}</code></pre>
+      </div>
+    {% endif %}
+  </div>
 {% endblock content %}
 
diff --git a/crates/templates/src/res/register.html b/crates/templates/src/res/register.html
index c6b92a30..008ad18d 100644
--- a/crates/templates/src/res/register.html
+++ b/crates/templates/src/res/register.html
@@ -16,40 +16,38 @@ limitations under the License.
 
 {% extends "base.html" %}
 
+{% block navbar_start %}
+  {% if next and next.kind == "continue_authorization_grant" %}
+    <a href="#">← Back</a>
+  {% endif %}
+{% endblock %}
+
+{% block navbar_end %}{% endblock %}
+
 {% block content %}
-  <section class="section">
-    <div class="container is-max-desktop">
-      <div class="columns">
-        <div class="column is-one-third">
-          <form method="POST">
-            <input type="hidden" name="csrf" value="{{ csrf_token }}" />
-            <div class="field">
-              <label class="label" for="register-username">Username</label>
-              <div class="control">
-                <input class="input" name="username" id="register-username" type="text">
-              </div>
-            </div>
-
-            <div class="field">
-              <label class="label" for="register-password">Password</label>
-              <div class="control">
-                <input class="input" name="password" id="register-password" type="password">
-              </div>
-            </div>
-
-            <div class="field">
-              <label class="label" for="register-password">Confirm password</label>
-              <div class="control">
-                <input class="input" name="password_confirm" id="register-password-confirm" type="password">
-              </div>
-            </div>
-
-            <div class="control">
-              <button type="submit" class="button is-link">Register</button>
-            </div>
-          </form>
-        </div>
+  <section class="flex items-center justify-center flex-1">
+    <form method="POST" class="grid grid-cols-1 gap-6 w-96">
+      <div class="text-center">
+        <h1 class="text-lg text-center font-medium">Create your account</h1>
+        {% if next and next.kind == "continue_authorization_grant" %}
+          <p>to continue to <em>{{ next.grant.client.client_id }}</em></p>
+        {% endif %}
       </div>
-    </div>
+      <input type="hidden" name="csrf" value="{{ csrf_token }}" />
+      {# TODO: errors #}
+      {{ field::input(label="Username", name="username") }}
+      {{ field::input(label="Password", name="password", type="password") }}
+      {{ field::input(label="Confirm Password", name="password_confirm", type="password") }}
+      {{ button::button(text="Next") }}
+      {# TODO: proper link #}
+      {{ button::link_text(text="Login instead", href="/login") }}
+    </form>
   </section>
+
+  {% if next %}
+    <section class="self-center my-6">
+      {# TODO: proper back link #}
+      {{ button::link_text(text="Return to application", href="/") }}
+    </section>
+  {% endif %}
 {% endblock content %}