Revamped the styling: changed color palette, adjusted padding and margin

src/App.css

@@ -1,12 +1,25 @@
 .App {
   margin: 0 auto;
+  padding: 0;
   text-align: center;
-  width: 75vw;
+  width: 90vw;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
   font-family: monospace;
+  margin-top: 20px;
+}
+
+#title, #editor-title, #previewer-title {
+  background-color: #373D49;
+  color: white;
+  padding: 10px;
+  border-radius: 30px;
+}
+
+#wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
 

src/App.js

@@ -3,22 +3,50 @@ import './App.css';
 import Editor from './Components/Editor/index';
 import Previewer from './Components/Previewer/index';
 
-const initialRendering = `# Hello There
-## Hello
-[Google](https://www.google.com)
-Heres some code, \`<div></div>\`, between 2 __backticks__.
+const initialRendering = `
+# Welcome to my React Markdown Previewer!
+
+## This is a sub-heading...
+### And here's some other cool stuff:
+
+Heres some code, \`<div></div>\`, between 2 backticks.
 
 \`\`\`
 // this is multi-line code:
 
 function anotherExample(firstLine, lastLine) {
-  if (firstLine == '\`\`\`' && lastLine == '\`\`\`') {
+  if (firstLine == '\`\`\`\\' && lastLine == '\`\`\`') {
     return multiLineCode;
   }
 }
 \`\`\`
-- to-do item
+
+You can also make text **bold**... whoa!
+Or _italic_.
+Or... wait for it... **_both!_**
+And feel free to go crazy ~~crossing stuff out~~.
+
+There's also [links](https://www.freecodecamp.org), and
 > Block Quotes!
+
+And if you want to get really crazy, even tables:
+
+Wild Header | Crazy Header | Another Header?
+------------ | ------------- | -------------
+Your content can | be here, and it | can be here....
+And here. | Okay. | I think we get it.
+
+- And of course there are lists.
+  - Some are bulleted.
+     - With different indentation levels.
+        - That look like this.
+
+
+1. And there are numbered lists too.
+1. Use just 1s if you want!
+1. And last but not least, let's not forget embedded images:
+
+
 ![weird medieval image](https://64.media.tumblr.com/513dcf6a91fc4b6feb2bd71b5dff1856/tumblr_npjeybLLfI1qdm7pqo1_500.jpg)
 `
 
@@ -40,10 +68,12 @@ setPreviewerText(editorText);
 
   return (
     <div className="App">
-    <h1>Markdown Previewer</h1>
+    <h1 id="title">Markdown Previewer</h1>
+    <div id="wrapper">
     <Editor value={initialRendering} onChange={handleChange} />
     <Previewer text={previewerText} />
     </div>
+    </div>
   );
 }
 

src/Components/Editor/index.css

@@ -1,9 +1,19 @@
+#editor-wrapper {
+    width: 45%;
+    border-radius: 20px;
+    height: 500px;
+    margin-top: 25px;
+}
+
 #editor {
-    width: 50vw;
-    min-height: 100px;
+    margin-top: 25px;
+    width: 100%;
     border-radius: 10px;
-    padding: 15px;
+    padding-left: 15px;
+    padding-top: 15px;
     box-shadow: 0px 0px 15px 2px #000;
-    margin-bottom: 20px;
+    height: 500px;
     border: 2px solid black;
-}
+    overflow:scroll;
+}
+

src/Components/Editor/index.js

@@ -4,10 +4,10 @@ import './index.css';
 export default function Editor(props) {
 
     return (
-        <div>
-        <h2>Editor</h2>
+        <section id="editor-wrapper">
+        <h2 id="editor-title">Editor</h2>
         <textarea id="editor" defaultValue={props.value} name="editor" onChange={props.onChange}>
         </textarea>
-        </div>
+        </section>
     )
 }

src/Components/Previewer/index.css

@@ -1,18 +1,23 @@
 #preview-wrapper {
-    width: 60vw;
-    min-height: 20px;
+    width: 45%;
     border-radius: 20px;
+    height: 500px;
+    margin-top: 25px;
 }
 
 #preview {
+    margin-top: 25px;
     border: 2px solid black;
     width: 100%;
-    min-height: 200px;
     border-radius: 20px;
     box-shadow: 0px 0px 15px 1px #000;
     text-align: left;
-    padding-left: 20px;
+    padding-left: 30px;
+    padding-top: 15px;
     background-color: #FFF;
+    height: 500px;
+  overflow:scroll;
+  line-height: 1.8rem;
 }
 
 

src/Components/Previewer/index.js

@@ -12,7 +12,7 @@ let finalString =  marked.parse(props.text)
 
     return (
         <section id="preview-wrapper" >
-        <h1>Previewer</h1>
+        <h2 id="previewer-title">Previewer</h2>
             <div id="preview" dangerouslySetInnerHTML={{__html: finalString}} >
             </div>
         </section>

src/index.css

@@ -1,11 +1,18 @@
-html {
+* {
   margin: 0;
   padding: 0;
-  box-sizing: content-box;
-  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
-  background-size: 400% 400%;
-  animation: gradient 15s ease infinite;
-  height: 100vh;
+
+}
+
+html {
+  box-sizing: border-box;
+  scroll-behavior: smooth;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
 }
 
 body {
@@ -16,16 +23,17 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  width: 100vw;
-  height: 100vh;
+  /* width: 100vw;
+  height: 100vh; */
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
     background-color: lightgrey;
-    padding: 5px;
+    padding: 1px;
     border-radius: 5px;
+
 }
 
 @keyframes gradient {

vanilla-js-version/css/styles.css

@@ -0,0 +1,10 @@
+html {
+    box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+

vanilla-js-version/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Markdown previewer</title>
+</head>
+<body>
+
+</body>
+</html>