useEffect with style v1

my-project/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "my-project",
+  "version": "0.1.0",
+  "private": true
+}

package.json

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

src/App.css

@@ -0,0 +1 @@
+

src/App.js

@@ -1,7 +1,11 @@
 import "./App.css";
-
+import Item from "./components/Item";
 function App() {
-  return <div></div>;
+  return (
+    <div>
+      <Item />
+    </div>
+  );
 }
 
 export default App;

src/components/Item.jsx

@@ -0,0 +1,31 @@
+
+import UseToggle from "../hooks/UseToggle";
+
+function Item() {
+  const [ Infor, isLoading] = UseToggle();
+  return (
+    <div className="m-20 flex justify-around items-center flex-wrap gap-12">
+      {isLoading ? (
+        <p>Loading</p>
+      ) : (
+        Infor?.map((info) => {
+          return (
+            <div
+              key={info.id}
+              className="w-[380px] h-44 border-solid border-2 border-black rounded-3xl size text-xl flex flex-col items-center shadow-cards
+              transition ease-in-out delay-150  bg-one hover:-translate-y-1 hover:scale-110 hover:  duration-300 "
+            >
+              <h2 className=" m-5 w-full text-center text-3xl font-bold ">
+                {info.name}
+              </h2>
+              <p>{info.email}</p>
+              <p>{info.phone}</p>
+              <p>{info.company.name}</p>
+            </div>
+          );
+        })
+      )}
+    </div>
+  );
+}
+export default Item;

src/components/readme.md

@@ -0,0 +1,32 @@
+.hader {
+margin: 20px;
+display: flex;
+justify-content: space-around;
+align-items: center;
+flex-wrap: wrap;
+gap: 50px;
+}
+.cards {
+width: 350px;
+background-color: #fecda6;
+border: 3px solid #ffffff;
+border-radius: 25px;
+font-size: larger;
+text-align: center;
+transition: all 0.5s;
+
+/_ box-shadow: inset 46px 42px 36px 35px rgba(0, 0, 0, 0.1); _/
+box-shadow: 10px 20px 20px 20px rgba(0, 0, 0, 0.1);
+}
+.cards:hover {
+border: 3px solid black;
+transform: scale(1.05);
+}
+
+.cards:active {
+transform: scale(0.95) rotateZ(1.7deg);
+}
+.name {
+background-color: #ff5b22;
+/_ color: #ff5b22; _/
+}

src/hooks/UseToggle.jsx

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+function UseToggle() {
+  const [Infor, setInfor] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const fetchData = async () => {
+    try {
+      setIsLoading(true);
+      const response = await fetch(
+        "https://jsonplaceholder.typicode.com/users"
+      );
+      if (response.ok) {
+        const data = await response.json();
+        setInfor(data);
+        setIsLoading(false);
+      } else console.log("error");
+    } catch (error) {
+      console.log("error massage", error);
+    }
+  };
+  useEffect(() => {
+    fetchData();
+  }, []);
+  return [fetchData, Infor, isLoading];
+}
+export default UseToggle;

src/index.css

@@ -1,13 +1,13 @@
+@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',
-    monospace;
+  /* background-color: #a9a9a9; */
 }

tailwind.config.js

@@ -0,0 +1,21 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,jsx}"],
+
+  theme: {
+    extend: {
+      colors: {
+        one: "#fecda6",
+        two: "#ff5b22",
+      },
+      spacing: {
+        350: "350px",
+      },
+      boxShadow: {
+        cards: " 10px 20px 20px 20px rgba(0, 0, 0, 0.1)",
+      },
+    },
+  },
+
+  plugins: [],
+};