please

package.json

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

src/App.js

@@ -1,7 +1,19 @@
-import "./App.css";
-
+import useFetch from "./Hooks/useFetch";
+import UserCard from "./components/UserCard";
 function App() {
-  return <div></div>;
+  const [dataInfo] = useFetch("https://jsonplaceholder.typicode.com/users");
+
+  return (
+    <div className="flex flex-wrap justify-center gap-10 items-center my-10">
+      {dataInfo === null ? (
+        <p>Loading</p>
+      ) : (
+        dataInfo.map((user) => {
+          return <UserCard key={user.id} user={user} />;
+        })
+      )}
+    </div>
+  );
 }
 
 export default App;

src/Hooks/useFetch.js

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

src/components/UserCard.js

@@ -0,0 +1,14 @@
+// a list item with their name, email, phone number & company.
+function UserCard({ user }) {
+  return (
+    <div className="flex flex-col justify-center gap-25 items-center font-bold text-left bg-gray-300 p-6 rounded drop-shadow-2xl w-72">
+      <ul>
+        Name: {user.name}
+        <li className="font-thin"> Email: {user.email}</li>
+        <li className="font-thin"> Phone: {user.phone}</li>
+        <li className="font-thin"> Company{user.company.name}</li>
+      </ul>
+    </div>
+  );
+}
+export default UserCard;

src/index.css

@@ -1,13 +1,16 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }

tailwind.config.js

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