Tailwind + mobile friendly

app/assets/stylesheets/application.css

@@ -13,44 +13,51 @@
  *= require_tree .
  *= require_self
  */
+@import url('https://fonts.googleapis.com/css2?family=Fleur+De+Leah&display=swap');
+/* html, body { */
+/*     margin: 0; */
+/*     padding: 0; */
+/*     height: 100%; */
+/* } */
 
-html, body {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-}
+/* #container { */
+/*     background-color: darkseagreen; */
+/*     height: 100%; */
+/* } */
 
-#container {
-    background-color: darkseagreen;
-    height: 100%;
-}
+/* #navbar > ul { */
+/*     list-style-type: none; */
+/* } */
+/* #navbar > ul > li { */
+/*     float: left; */
+/*     font-size: 1.25em; */
+/*     margin-top: 16px; */
+/*     margin-left: 30px; */
+/*     color: cornsilk; */
+/* } */
 
-#navbar > ul {
-    list-style-type: none;
-}
-#navbar > ul > li {
-    float: left;
-    font-size: 1.25em;
-    margin-top: 16px;
-    margin-left: 30px;
-    color: cornsilk;
-}
+/* #logo { */
+/*     font-size: 1.5em; */
+/*     padding: 12px 20px; */
+/*     float: left; */
+/*     color: cornsilk; */
+/* } */
 
-#logo {
-    font-size: 1.5em;
-    padding: 12px 20px;
-    float: left;
-    color: cornsilk;
-}
+/* .nav-column-member { */
+/*     float: left; */
+/*     font-size: 1.25em; */
+/*     padding: 16px 30px; */
+/* } */
 
-.nav-column-member {
-    float: left;
-    font-size: 1.25em;
-    padding: 16px 30px;
-}
+/* #main-content { */
+/*     clear: left; */
+/*     background-color: cornsilk; */
+/*     height: 100%; */
+/* } */
 
-#main-content {
-    clear: left;
-    background-color: cornsilk;
-    height: 100%;
+
+.fleur-de-leah-regular {
+  font-family: "Fleur De Leah", cursive;
+  font-weight: 400;
+  font-style: normal;
 }

app/assets/stylesheets/application.tailwind.css

@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+
+@layer components {
+  .btn-primary {
+    @apply py-2 px-4 bg-blue-200;
+  }
+}
+
+*/