As a user, I can see my keyword raw result

assets/css/app.css → assets/css/app.scss

@@ -1,3 +1,6 @@
 /* This file is for your main application css. */
 
 @import "./phoenix.css";
+
+@import "./screens/dashboard.scss";
+@import "./screens/keyword.scss";

assets/css/phoenix.css

@@ -98,6 +98,9 @@ header section {
   flex-direction: column;
   justify-content: space-between;
 }
+header section a {
+  color: black;
+}
 header nav ul,
 header nav li {
   margin: 0;

assets/css/screens/dashboard.scss

@@ -0,0 +1,34 @@
+body.dashboard.index {
+  .keyword-list-item {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .keyword-list-item:not(:last-child)::after {
+    display: block;
+
+    width: 100%;
+    height: 1px;
+
+    background-color: #eeeeee;
+
+    content: "";
+  }
+
+  .keyword-col {
+    padding: 10px;
+  }
+
+  .keyword-col.keyword-name {
+    flex: 0 0 40%;
+  }
+
+  .keyword-col.keyword-status {
+    flex: 0 0 30%;
+  }
+
+  .keyword-col.keyword-action {
+    flex: 0 0 30%;
+    text-align: right;
+  }
+}

assets/css/screens/keyword.scss

@@ -0,0 +1,6 @@
+body.keyword.show {
+  iframe {
+    width: 100%;
+    height: 400px;
+  }
+}

assets/js/app.js

@@ -1,7 +1,7 @@
 // We need to import the CSS so that webpack will load it.
 // The MiniCssExtractPlugin is used to separate it out into
 // its own CSS file.
-import css from "../css/app.css"
+import css from "../css/app.scss"
 
 // webpack automatically bundles all modules in your
 // entry points. Those entry points can be configured