add food ninja demo

Author: solygambas

food-ninja/README.md

@@ -2,6 +2,8 @@
 
 A recipe website to understand Tailwind CSS basics.
 
+[See Demo on CodePen](https://codepen.io/solygambas/full/bGqpPJJ)
+
 <p align="center">
     <img src="screenshot.png">
 </p>

food-ninja/package-lock.json

@@ -4,10 +4,11 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "tailwindcss build src/styles.css -o public/styles.css"
+    "dev": "tailwindcss build src/styles.css -o public/styles.css",
+    "build": "NODE_ENV=production npx tailwindcss-cli@latest build src/styles.css -o public/styles.css"
   },
   "keywords": [],
- "repository": {
+  "repository": {
     "type": "git",
     "url": "git+https://github.com/solygambas/html-css-frameworks.git"
   },

food-ninja/package.json

@@ -100,12 +100,33 @@ <h1 class="font-bold uppercase p-4 border-b border-gray-100">
         <div class="flex justify-center md:justify-end">
           <a
             href="#"
-            class="btn text-primary border-primary md:border-2 hover:bg-primary hover:text-white transition ease-out duration-500"
+            class="
+              btn
+              text-primary
+              border-primary
+              md:border-2
+              hover:bg-primary
+              hover:text-white
+              transition
+              ease-out
+              duration-500
+            "
             >Log in</a
           >
           <a
             href="#"
-            class="btn text-primary border-primary md:border-2 hover:bg-primary hover:text-white transition ease-out duration-500 ml-2"
+            class="
+              btn
+              text-primary
+              border-primary
+              md:border-2
+              hover:bg-primary
+              hover:text-white
+              transition
+              ease-out
+              duration-500
+              ml-2
+            "
             >Sign up</a
           >
         </div>
@@ -120,7 +141,7 @@ <h4 class="font-bold mt-12 pb-2 border-b border-gray-200">
           <div class="mt-8 grid lg:grid-cols-3 gap-10">
             <div class="card hover:shadow-lg">
               <img
-                src="img/stew.jpg"
+                src="https://i.ibb.co/tpCdNcX/stew.jpg"
                 alt="stew"
                 class="w-full h-32 sm:h-48 object-cover"
               />
@@ -148,7 +169,7 @@ <h4 class="font-bold mt-12 pb-2 border-b border-gray-200">
             </div>
             <div class="card hover:shadow-lg">
               <img
-                src="img/noodles.jpg"
+                src="https://i.ibb.co/b1DQyfG/noodles.jpg"
                 alt="noodles"
                 class="w-full h-32 sm:h-48 object-cover"
               />
@@ -176,7 +197,7 @@ <h4 class="font-bold mt-12 pb-2 border-b border-gray-200">
             </div>
             <div class="card hover:shadow-lg">
               <img
-                src="img/curry.jpg"
+                src="https://i.ibb.co/ZdP6cKQ/curry.jpg"
                 alt="curry"
                 class="w-full h-32 sm:h-48 object-cover"
               />
@@ -211,7 +232,18 @@ <h4 class="font-bold mt-12 pb-2 border-b border-gray-200">
           </div>
           <div class="flex justify-center">
             <div
-              class="btn bg-secondary-100 text-secondary-200 hover:shadow-inner transform hover:scale-125 hover:bg-opacity-50 transition ease-out duration-300"
+              class="
+                btn
+                bg-secondary-100
+                text-secondary-200
+                hover:shadow-inner
+                transform
+                hover:scale-125
+                hover:bg-opacity-50
+                transition
+                ease-out
+                duration-300
+              "
             >
               Load more
             </div>