Statistic component inside charts category is created

Client/src/App.jsx

@@ -1,7 +1,11 @@
+import PlayGroundCharts from "./screens/PlayGround/PlayGround-Charts";
+
 function App() {
   return (
     <>
-      <div></div>
+      <div>
+        <PlayGroundCharts />
+      </div>
     </>
   );
 }

Client/src/components/Charts/Statistics/Statistic.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import "./statistic.css";
+
+function Statistic({ title, value }) {
+  return (
+    <div className="statistic-tile">
+      <div className="statistic-tile-title">{title}</div>
+      <div className="statistic-tile-value">{value}</div>
+    </div>
+  );
+}
+
+export default Statistic;

Client/src/components/Charts/Statistics/statistic.css

@@ -0,0 +1,33 @@
+:root {
+  --spacing-general-0: 5px 10px;
+  --color-border-0: #eaecf0;
+  --border-radius-0: 4px;
+  --font-size-0: 1rem;
+  --font-size-1: 13px;
+  --font-family-0: "Roboto", "Helvetica", "Arial", sans-serif;
+  --font-color-0: #344054;
+  --margin-bottom-0: 10px;
+}
+
+.statistic-tile {
+  margin: var(--spacing-general-0);
+  padding: var(--spacing-general-0);
+  border: 1px solid var(--color-border-0);
+  border-radius: var(--border-radius-0);
+
+  width: 180px;
+}
+
+.statistic-tile-title {
+  font-size: var(--font-size-0);
+  font-family: var(--font-family-0);
+  color: var(--font-color-0);
+  margin-bottom: var(--margin-bottom-0);
+}
+
+.statistic-tile-value {
+  font-size: var(--font-size-1);
+  font-family: var(--font-family-0);
+  font-weight: 500;
+  margin-bottom: var(--margin-bottom-0);
+}

Client/src/screens/PlayGround/PlayGround-Charts.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import "./playGround.css";
+import Statistic from "../../components/Charts/Statistics/Statistic";
+
+function PlayGroundCharts() {
+  return (
+    <>
+      <div className="play-ground-charts">
+        <Statistic title="Currently up for" value="4h 30m 2s" />
+        <Statistic title="Last checked" value="15 seconds ago" />
+        <Statistic title="Incidents" value="2" />
+        <Statistic title="Certificate expiry" value="284 days" />
+      </div>
+    </>
+  );
+}
+
+export default PlayGroundCharts;

Client/src/screens/PlayGround/playGround.css

@@ -0,0 +1,3 @@
+.play-ground-charts {
+  display: flex;
+}