added tabs

.gitignore

+node_modules

package.json

@@ -6,10 +6,12 @@
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "flexbox-react": "^4.4.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-move": "^6.5.0",
     "react-scripts": "5.0.0",
+    "react-tabs": "^4.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/Prediction.js

+function Prediction(props) {
+    return (
+    <div className="Prediction">
+        <div className="Image">
+            <img 
+            src={props.img}
+            alt={props.label}
+            />
+        </div>
+        <div className="PredictedClass">
+            <h1>{props.class}</h1>
+        </div>
+    </div>
+    );
+}
+
+export default Prediction;
\ No newline at end of file

src/Tabs.js

+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import 'react-tabs/style/react-tabs.css';
+
+export default () => (
+    <Tabs>
+        <TabList>
+            <Tab>Title 1</Tab>
+            <Tab>Title 2</Tab>
+        </TabList>
+        <TabPanel>
+            <h2>Any content 1</h2>
+        </TabPanel>
+        <TabPanel>
+            <h2>Any content 2</h2>
+        </TabPanel>
+    </Tabs>
+);
\ No newline at end of file

src/index.js

@@ -3,7 +3,12 @@ import ReactDOM from 'react-dom';
 import image from './8.jpg'
 import Image from './Image';
 import BarChart from './BarChart';
+import Tabs from './Tabs';
+import Prediction from './Prediction';
+
 const element = <h1>Bonjour, monde</h1>;
 const root = document.getElementById('root');
 let arr = [5, 10, 2, 3, 0, 100];
-ReactDOM.render(<BarChart data={arr}/>, root);
\ No newline at end of file
+//ReactDOM.render(<BarChart data={arr}/>, root);
+const pred = <Prediction img={image} label="Trombone" class="Trombone" />
+ReactDOM.render(pred, root);
\ No newline at end of file