submission

package.json

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

src/App.js

@@ -1,10 +1,22 @@
-import React from 'react';
-import './App.css';
-import data from './members_details.json'
+import React from "react";
+import "./App.css";
+import data from "./members_details.json";
+
+import MemberCard from "./components/MemberCard";
 
 function App() {
   return (
-    <div className="App">
+    <div className=" flex justify-center items-center w-full">
+      <div className=" flex-col m-10">
+        <h1 className=" font-bold text-purple-700 text-4xl rounded-lg p-4 w-1/2 text-center bg-purple-100">
+          Meet the Orientation Committee!
+        </h1>
+        <div className="flex flex-wrap items-center justify-center h-1/4 bg-gray-100 rounded-lg mt-4">
+          {data.map((member) => (
+            <MemberCard member={member} />
+          ))}
+        </div>
+      </div>
     </div>
   );
 }

src/components/MemberCard.js

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+
+export default function MemberCard({ member }) {
+  const [showDetails, setShowDetails] = useState(false);
+
+  const handleHoverEnter = () => {
+    setShowDetails(true);
+  };
+
+  const handleHoverLeave = () => {
+    setShowDetails(false);
+  };
+
+  return (
+    <div onMouseEnter={handleHoverEnter} onMouseLeave={handleHoverLeave}>
+      <div className="flex flex-row justify-center items-center p-4 m-4 bg-purple-300 rounded-lg w-64 h-80 hover:w-96 hover:items-start hover:justify-start">
+        {!showDetails && (
+          <div className="flex flex-col">
+            <img
+              className=" w-50 h-50 rounded-lg"
+              src={member.picture}
+              alt={member.name}
+            />
+            <h2 className=" mt-1 font-bold text-purple-700 text-lg">
+              {member.name}
+            </h2>
+            <p className=" text-gray-500 font-semibold">{member.position}</p>
+          </div>
+        )}
+
+        {showDetails && (
+          <div className="flex flex-row">
+            <div>
+              <img
+                className=" w-40 h-40 rounded-lg"
+                src={member.picture}
+                alt={member.name}
+              />
+              <h2 className=" mt-1 font-bold text-purple-700 text-sm">
+                {member.name}
+              </h2>
+            </div>
+
+            <div className="ml-4 flex flex-col">
+              <p className="text-gray-700">BIO</p>
+              <p className="text-gray-700">[email protected]</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/index.css

@@ -1,13 +1,17 @@
+@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/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};