Use drop shadow plugin

src/mainMenu.jsx

@@ -9,7 +9,7 @@ export default () => {
   return (
     <div className="m-5 flex w-full max-w-lg flex-col items-center space-y-10">
       <img src={logo} alt="logo" />
-      <div className="flex w-full flex-col items-center justify-center rounded-2xl bg-navy-400 p-6 drop-shadow-[0_8px_0_#10212A]">
+      <div className="inner-shadow-2-navy-900 flex w-full flex-col items-center justify-center rounded-2xl bg-navy-400 p-6">
         <h2 className="mb-6 text-h-xs uppercase text-silver-700">
           Pick player 1's mark
         </h2>
@@ -60,10 +60,10 @@ export default () => {
         </p>
       </div>
       <div className="w-full space-y-5">
-        <button className="flex w-full items-center justify-center rounded-2xl bg-yellow-700 p-4 drop-shadow-[0_8px_0_#CC8B13] hover:bg-yellow-400">
+        <button className="inner-shadow-2-yellow-900 flex w-full items-center justify-center rounded-2xl bg-yellow-700 p-4 hover:bg-yellow-400">
           <p className="text-h-s uppercase text-navy-700">New game (vs cpu)</p>
         </button>
-        <button className="flex w-full items-center justify-center rounded-2xl bg-blue-700 p-4 drop-shadow-[0_8px_0_#118C87] hover:bg-blue-400">
+        <button className="inner-shadow-2-blue-900 flex w-full items-center justify-center rounded-2xl bg-blue-700 p-4 hover:bg-blue-400">
           <p className="text-h-s uppercase text-navy-700">
             New game (vs player)
           </p>

tailwind.config.js

@@ -1,14 +1,49 @@
-/** @type {import('tailwindcss').Config} */
+import plugin from "tailwindcss/plugin";
+
+const innerShadowPlugin = plugin(function ({ addUtilities, theme, e }) {
+  const colors = Object.keys(theme("colors"))
+    .filter((key) => key.endsWith("-900"))
+    .reduce((obj, key) => {
+      obj[key] = theme("colors")[key];
+      return obj;
+    }, {});
+
+  const spacing = {
+    1: "0.25rem",
+    2: "0.5rem",
+  };
+
+  const utilities = Object.keys(colors).flatMap((colorKey) => {
+    const colorValue = colors[colorKey];
+
+    return Object.keys(spacing).map((spacingKey) => {
+      const spacingValue = spacing[spacingKey];
+
+      return {
+        [`.${e(`inner-shadow-${spacingKey}-${colorKey}`)}`]: {
+          filter: `drop-shadow(0 ${spacingValue} ${colorValue})`,
+        },
+      };
+    });
+  });
+
+  addUtilities(utilities);
+});
+
 export default {
   content: ["./index.html", "./src/**/*.jsx"],
   theme: {
     colors: {
+      "navy-900": "#10212A",
       "navy-700": "#1A2A33",
       "navy-400": "#1F3641",
+      "silver-900": "#6B8997",
       "silver-700": "#A8BFC9",
       "silver-400": "#DBE8ED",
+      "blue-900": "#118C87",
       "blue-700": "#31C3BD",
       "blue-400": "#65E9E4",
+      "yellow-900": "#CC8B13",
       "yellow-700": "#F2B137",
       "yellow-400": "#FFC860",
     },
@@ -53,4 +88,5 @@ export default {
       ],
     },
   },
+  plugins: [innerShadowPlugin],
 };