assignment solution

src/App.js

@@ -1,10 +1,10 @@
 import React from 'react';
+import MyInfo from './components/MyInfo/MyInfo';
+import './index.css'
 
 function App() {
   return (
-    <div>
-      <h1>Hello World!!</h1>
-    </div>
+<MyInfo/>
   );
 }
 

src/components/MyInfo/MyInfo.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export default function MyInfo() {
+    return (
+        <div className="structure">
+            <h1>Abdulazeez Alabbasi</h1>
+            <p>I am 25 years old, and I am currently learning react</p>
+            <h3>Places I want to visit</h3>
+            <ul>
+                <li>France</li>
+                <li>Turkey</li>
+                <li>USA</li>
+            </ul>
+        </div>
+    )
+}

src/index.css

@@ -1,13 +1,6 @@
-body {
-  margin: 0;
-  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;
-}
+.structure{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}