Initial plot mockup

src/App.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
+import { WorkoutPlot } from './components/WorkoutPlot';
 
 export function App() {
   return (
     <div>
-    Hello, world!
+      <h1>Workout editor</h1>
+      <textarea rows={10} cols={100} />
+      <WorkoutPlot />
     </div>
   );
 }

src/components/WorkoutPlot.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+const Bar: React.FC<{ width: string; height: string; background: string }> = ({ width, height, background }) => (
+  <div style={{ display: "inline-block", verticalAlign: "bottom", paddingBottom: height, background, width, borderRadius: "10px", marginRight: "0.1%" }} />
+);
+
+export const WorkoutPlot: React.FC<{}> = () => {
+  return (
+    <div style={{ whiteSpace: "nowrap", overflow: "hidden", width: 800, outline: "1px dashed #0c0" }}>
+      <Bar background="#7f7f7f" width="1%" height="7.5%" />
+      <Bar background="#7f7f7f" width="1%" height="10%" />
+      <Bar background="#7f7f7f" width="1%" height="12.5%" />
+      <Bar background="#7f7f7f" width="1%" height="15%" />
+      <Bar background="#338cff" width="5%" height="20%" />
+      <Bar background="#ffcc3f" width="15%" height="25%" />
+      <Bar background="#338cff" width="5%" height="20%" />
+      <Bar background="#ffcc3f" width="15%" height="25%" />
+      <Bar background="#338cff" width="5%" height="20%" />
+      <Bar background="#ffcc3f" width="15%" height="25%" />
+      <Bar background="#338cff" width="5%" height="20%" />
+      <Bar background="#7f7f7f" width="1%" height="15%" />
+      <Bar background="#7f7f7f" width="1%" height="12.5%" />
+      <Bar background="#7f7f7f" width="1%" height="10%" />
+      <Bar background="#7f7f7f" width="1%" height="7.5%" />
+    </div>
+  );
+}

src/index.css

@@ -1,5 +1,7 @@
 body {
   margin: 0;
+  padding: 40px;
+  background-color: #f5f5e5;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;