Create User Card component

src/App.jsx

@@ -1,5 +1,26 @@
+import { UserCard } from "./UserCard"
+import { UserCardClass } from "./UserCardClass"
+import "./assets/user.css"
+import user from "./assets/user.json"
+
 function App() {
-  return "Hello World"
+  return (
+    <div>
+      <UserCard
+        name={user.name}
+        age={user.age}
+        phoneNumber={user.phoneNumber}
+        address={user.address}
+      />
+      <br />
+      <UserCardClass
+        name={user.name}
+        age={user.age}
+        phoneNumber={user.phoneNumber}
+        address={user.address}
+      />
+    </div>
+  )
 }
 
 export default App

src/UserCard.jsx

@@ -0,0 +1,15 @@
+export function UserCard({ name, age, phoneNumber, address }) {
+  return (
+    <div className="card">
+      <h2 className="name">{name}</h2>
+      <div className="body">
+        <div className="label">Age:</div>
+        <div>{age}</div>
+        <div className="label">Phone:</div>
+        <div>{phoneNumber}</div>
+        <div className="label">Address:</div>
+        <div>{address}</div>
+      </div>
+    </div>
+  )
+}

src/UserCardClass.jsx

@@ -0,0 +1,19 @@
+import React from "react"
+
+export class UserCardClass extends React.Component {
+  render() {
+    return (
+      <div className="card">
+        <h2 className="name">{this.props.name}</h2>
+        <div className="body">
+          <div className="label">Age:</div>
+          <div>{this.props.age}</div>
+          <div className="label">Phone:</div>
+          <div>{this.props.phoneNumber}</div>
+          <div className="label">Address:</div>
+          <div>{this.props.address}</div>
+        </div>
+      </div>
+    )
+  }
+}

src/assets/user.css

@@ -0,0 +1,29 @@
+body {
+  background: #f3f3f3;
+}
+
+.card {
+  background: white;
+  border: 1px solid #777;
+  border-radius: 0.5rem;
+  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
+  max-width: 400px;
+  padding: 1.5rem;
+  font-family: Arial;
+}
+
+.name {
+  margin: 0;
+  margin-bottom: 2rem;
+}
+
+.body {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 1rem 0.5rem;
+  padding: 0 1rem;
+}
+
+.label {
+  font-weight: bold;
+}

src/assets/user.json

@@ -0,0 +1,6 @@
+{
+  "name": "Kyle Cook",
+  "age": 27,
+  "phoneNumber": "123-456-7890",
+  "address": "123 Main St."
+}