🚀 Major Add: Box shadows for Tailwind Init

Author: manuarora700

components/Footer.js

@@ -79,6 +79,11 @@ export default function Footer() {
               freeCodeCamp
             </a>
           </Link>
+          <Link href="/boxshadows">
+            <a className="text-gray-500 hover:text-gray-600 transition">
+              Box Shadows
+            </a>
+          </Link>
         </div>
       </div>
       <p className="flex flex-row text-gray-400">

constants/boxshadows/cards.js

@@ -0,0 +1,25 @@
+const cards = [
+  {
+    name: "Aesthetic",
+    shadow: "shadow-[0_3px_10px_rgb(0,0,0,0.2)]",
+    vanillaCSS: `box-shadow: 0 3px 10px rgb(0,0,0,0.2);`,
+  },
+  {
+    name: "Demure",
+    shadow: "shadow-[0_35px_60px_-15px_rgba(0,0,0,0.3)]",
+    vanillaCSS: `box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;`,
+  },
+  {
+    name: "Jubilation",
+    shadow: "shadow-[rgba(0,_0,_0,_0.24)_0px_3px_8px]",
+    vanillaCSS: `box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;`,
+  },
+
+  {
+    name: "Sprightly",
+    shadow: "shadow-[rgba(0,_0,_0,_0.25)_0px_25px_50px_-12px]",
+    vanillaCSS: `box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;`,
+  },
+];
+
+export default cards;

jsconfig.json

@@ -8,6 +8,7 @@
         "@/lib/*": ["lib/*"],
         "@/styles/*": ["styles/*"],
         "@/ui/*": ["ui/*"],
+        "@/constants/*": ["constants/*"],
       }
     }
   }

package-lock.json

@@ -37,6 +37,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-rough-notation": "^1.0.1",
+    "react-syntax-highlighter": "^15.4.5",
     "react-toastify": "^7.0.3",
     "react-tweet-embed": "^1.2.2",
     "reading-time": "^1.3.0",