Tailwind, Prettier, ESLint, Typescript runner!

src/components/Editor/Editor.css

@@ -0,0 +1,23 @@
+.iframe-wrapper, .cm-editor {
+    width: 100%;
+    height: 30rem;
+    border-radius: 0.5rem;
+    overflow: hidden;
+}
+
+.cm-editor.cm-focused {
+    outline: 0;
+    box-shadow: 0 0 0 2pt rgba(180, 180, 180, 0.1);
+}
+
+.cm-editor .cm-cursor {
+    border-left: 2px solid red;
+}
+
+.cm-editor .cm-selectionBackground {
+    background-color: rgba(180, 180, 180, 0.3);
+}
+
+.cm-editor.cm-focused .cm-selectionBackground {
+    background-color: rgba(180, 180, 180, 0.3);
+}

src/components/Editor/Editor.tsx

@@ -0,0 +1,11 @@
+import useCodeMirror from '../../hooks/useCodemirror';
+import './Editor.css';
+
+interface Props {
+  value: string;
+}
+
+export default function Editor(props: Props) {
+  const { ref } = useCodeMirror({ value: props.value });
+  return <div ref={ref} className="m-0 text-sm rounded-lg bg-gray-800 overflow-hidden" />;
+}