Landing page + css..

css/src/other.pcss

@@ -6,6 +6,20 @@
     }
 
     &:hover {
-        @apply bg-teal-800  text-white;
+        @apply bg-teal-800 text-white;
+    }
+}
+
+@screen md {
+    .flipped {
+        perspective: 1000px;
+    }
+
+    .flipped-left > * {
+        transform: rotateY(25deg);
+    }
+
+    .flipped-right > * {
+        transform: rotateY(-25deg);
     }
 }

css/src/search.pcss

@@ -0,0 +1,35 @@
+#search {
+    @apply mb-4 flex flex-wrap;
+
+    [name="search"] {
+        @apply bg-gray-800 border-gray-700 text-white rounded w-full border appearance-none text-base p-2 mb-2;
+
+        &:focus {
+            @apply border-teal-500 outline-none;
+        }
+    }
+
+    #buttons {
+        @apply flex flex-1 justify-between mb-2;
+
+        button {
+            @apply flex-1 btn btn-green;
+        }
+
+        a {
+            @apply ml-2 flex-1 btn btn-red inline-block text-center;
+        }
+    }
+}
+
+@screen md {
+    #search {
+        [name="search"] {
+            @apply mb-0 /* @formatter:off */ w-2/3 /* @formatter:on */ flex-1;
+        }
+
+        #buttons {
+            @apply mb-0;
+        }
+    }
+}

css/src/styles.pcss

@@ -5,12 +5,13 @@
 @import "tailwindcss/components";
 
 @import "./button.pcss";
-@import "./note.pcss";
-@import "./pagination.pcss";
-@import "./other.pcss";
+@import "./hljs.pcss";
 @import "./navbar.pcss";
 @import "./note-table.pcss";
-@import "./hljs.pcss";
+@import "./note.pcss";
+@import "./other.pcss";
+@import "./pagination.pcss";
+@import "./search.pcss";
 
 /*noinspection CssUnknownTarget*/
 @import "tailwindcss/utilities";