Added two basic components: InputComponent and OutputComponent

* each with a heading and a textarea

Author: iaseth

src/App.js

@@ -1,12 +1,18 @@
+import InputComponent from './InputComponent';
+import OutputComponent from './OutputComponent';
+
+import React from 'react';
 
 
 
 function App () {
+	let inputProps = {};
+	let outputProps = {};
+
 	return (
 		<div className="App">
-			<main className="flex min-h-screen bg-blue-500 text-white">
-				<h2 className="text-[120px] m-auto">json</h2>
-			</main>
+			<InputComponent {...inputProps} />
+			<OutputComponent {...outputProps} />
 		</div>
 	);
 }

src/InputComponent/InputComponent.js

@@ -0,0 +1,17 @@
+
+
+
+export default function InputComponent () {
+	return (
+		<div className="InputComponent py-16 bg-slate-300">
+			<div className="max-w-4xl mx-auto shadow">
+				<div className="bg-slate-200 px-6 py-4">
+					<h1 className="text-xl">Input</h1>
+				</div>
+				<div className="bg-slate-100 px-4 py-4">
+					<textarea name="" id="" cols="30" rows="10" className="w-full border-2 border-slate-500"></textarea>
+				</div>
+			</div>
+		</div>
+	);
+}

src/InputComponent/index.js

@@ -0,0 +1,3 @@
+import InputComponent from './InputComponent';
+
+export default InputComponent;

src/OutputComponent/OutputComponent.js

@@ -0,0 +1,17 @@
+
+
+
+export default function OutputComponent () {
+	return (
+		<div className="OutputComponent py-16 bg-slate-100">
+			<div className="max-w-4xl mx-auto shadow">
+				<div className="bg-slate-200 px-6 py-4">
+					<h1 className="text-xl">Output</h1>
+				</div>
+				<div className="bg-slate-100 px-4 py-4">
+					<textarea name="" id="" cols="30" rows="10" className="w-full border-2 border-slate-500"></textarea>
+				</div>
+			</div>
+		</div>
+	);
+}

src/OutputComponent/index.js

@@ -0,0 +1,3 @@
+import OutputComponent from './OutputComponent';
+
+export default OutputComponent;