1 files changed, 80 insertions, 0 deletions

diff --git a/src/css/index.css b/src/css/index.css
new file mode 100644
index 0000000..adc1cfe
--- /dev/null
+++ b/src/css/index.css
@@ -0,0 +1,80 @@
+body {
+  display: flex;
+  justify-items: stretch;
+}
+
+.result-html {
+  flex: 1;
+  height: calc(100vh - 20px);
+  border: solid lightgray 2px;
+  border-radius: 5px;
+  margin: 10px;
+}
+
+.editor {
+  flex: 1;
+  max-width: 50vw;
+  margin: 10px;
+}
+
+.TinyMDE {
+  height: calc(100vh - 55px);
+  padding: 16px;
+  overflow-y: scroll;
+  border: 2px solid lightgray;
+  border-radius: 5px;
+
+  span {
+    white-space: pre;
+  }
+  .invalid-input {
+    text-decoration: red wavy underline 1px;
+  }
+}
+
+.container__suggestions {
+  display: none;
+  position: absolute;
+  width: fit-content;
+  min-width: 10rem;
+  max-height: 40vh;
+  overflow-y: scroll;
+  border: 2px solid lightgray;
+  border-radius: 0.5rem;
+
+  background: #fff;
+}
+.container__suggestion {
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+
+  height: fit-content;
+  min-height: 2rem;
+  white-space: nowrap;
+  align-items: center;
+
+  * {
+    flex-shrink: 0;
+    display: inline-block;
+    overflow: hidden;
+    padding-inline: 1em;
+  }
+  .info {
+    color: #4682B4;
+    font-weight: bold;
+  }
+  .truncate {
+    text-overflow: ellipsis;
+    ::before {
+      width: 2rem
+    }
+  }
+}
+.container__suggestion:not(:first-child) {
+  border-top: 1px solid rgb(203 213 225);
+}
+.container__suggestion.focus {
+  background: rgb(226 232 240);
+}