done

package.json

@@ -34,5 +34,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.1"
   }
 }

public/index.html

@@ -8,12 +8,12 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.js

@@ -1,7 +1,22 @@
 import "./App.css";
-
+import { Card } from "./components/Card";
+import useFetch from "./hooks/useFetch";
 function App() {
-  return <div></div>;
+  const [data] = useFetch("https://jsonplaceholder.typicode.com/users");
+
+  return (
+    <div>
+      {data.length === 0 ? (
+        <p>Loading...</p>
+      ) : (
+        <div className="flex flex-wrap gap-5 justify-center items-center pt-10 ">
+          {data.map((user) => (
+            <Card key={user.id} user={user} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
 }
 
 export default App;

src/components/Card.js

@@ -0,0 +1,12 @@
+export const Card = ({ user }) => {
+  return (
+    <div className="bg-red-300 p-7 w-80 rounded-lg border-black border-2">
+      <div className="pb-5">
+        <h1 className="text-xl font-medium">{user.name}</h1>
+        <p className="font-">Email: {user.email}</p>
+        <p>Phone: {user.phone}</p>
+        <p>Company: {user.company.name}</p>
+      </div>
+    </div>
+  );
+};

src/components/CardDetails.js

@@ -0,0 +1,5 @@
+import { useState } from "react";
+import { Card } from "./Card";
+export default function CardDetails() {
+  return <div></div>;
+}

src/hooks/useFetch.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from "react";
+
+function useFetch(url) {
+  const [data, setData] = useState([]);
+
+  const fetching = async () => {
+    try {
+      const response = await fetch(url);
+      const data = await response.json();
+      setData(data);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    fetching();
+  }, []);
+
+  return [data];
+}
+
+export default useFetch;

src/index.css

@@ -1,3 +1,6 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

src/index.js

@@ -1,8 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-
 import App from "./App";
-
 import "./index.css";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));

tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [   "./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+