Update

Author: codewithrajeshv

package-lock.json

@@ -39,6 +39,9 @@
     ]
   },
   "devDependencies": {
-    "gh-pages": "^4.0.0"
+    "autoprefixer": "^10.4.7",
+    "gh-pages": "^4.0.0",
+    "postcss": "^8.4.14",
+    "tailwindcss": "^3.1.6"
   }
 }

package.json

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

postcss.config.js

@@ -1,25 +1,14 @@
-import logo from './logo.svg';
-import './App.css';
+import ProjectCard from "./components/ProjectCard";
+import PROJECTS from "./constants/projects";
 
-function App() {
+const App = () => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className="grid grid-cols-1 gap-4 mx-20 p-8 sm:grid-cols-2 lg:grid-cols-3 ">
+      {PROJECTS.map((project, index) => {
+        return <ProjectCard key={index} item={project} />;
+      })}
     </div>
   );
-}
+};
 
 export default App;