refactor: Convert pure components to functional components

Co-authored-by: David Ralph <me@davidcralph.co.uk>
Co-authored-by: Isaac <contact@eartharoid.me>

tailwind.config.js

@@ -1,8 +1,28 @@
+const plugin = require('tailwindcss/plugin');
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      textShadow: {
+        sm: '0 1px 4px var(--tw-shadow-color)',
+        DEFAULT: '0 2px 8px var(--tw-shadow-color)',
+        lg: '0 8px 24px var(--tw-shadow-color)',
+      },
+    },
   },
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [
+    require('@tailwindcss/typography'),
+    plugin(function ({ matchUtilities, theme }) {
+      matchUtilities(
+        {
+          'text-shadow': (value) => ({
+            textShadow: value,
+          }),
+        },
+        { values: theme('textShadow') },
+      );
+    }),
+  ],
 };