Port CSS to Tailwind

mysite/static-src/style.css

@@ -4,11 +4,32 @@
 
 @tailwind utilities;
 
-/* [ON BIG SCREEN] */
-/* Wrapper */
-.container {
-    max-width: 940px;
-    margin: 3rem auto
+html {
+  font-size: 12pt;
+}
+
+p {
+  @apply leading-normal mt-2 mb-2;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  @apply font-bold;
+}
+
+h1 {
+  @apply text-4xl mt-6;
+}
+
+h2 {
+  @apply text-3xl mt-4;
+}
+
+h3 {
+  @apply text-2xl mt-2;
+}
+
+h4 {
+  @apply text-xl mt-1;
 }
 
 .content {
@@ -21,42 +42,18 @@
     width: 20%;
 }
 
-#page-nav {
-  /* width: 100%; */
-  background: #276749;
-  display: block;
-  /* If you want the navigation bar to stick on top
-  position: sticky;
-  top: 0;
-  */
-  padding-left: 0;
-  margin: 2rem 0;
-}
-
-/* Hide Hamburger */
-#page-nav label, #hamburger {
-  display: none;
-}
-
 /* Menu Items */
 #page-nav ul {
-  list-style-type: none;
-  margin: 0;
-  padding: 0; 
+  @apply m-0 p-0 list-none;
 }
 #page-nav ul li {
-  display: inline-block;
-  padding: 16px;
-  font-size: 18px;
-  box-sizing: border-box;
+  @apply inline-block p-3 text-lg;
 }
 #page-nav ul li a {
-  /* color: #fff; */
-  text-decoration: none;
-  color: white;
+  @apply text-white no-underline;
 }
 #page-nav ul li.selected {
-  background: #38A169;
+  @apply bg-green-600;
 }
 
 /* [ON SMALL SCREENS] */
@@ -88,32 +85,31 @@
   }
 }
 
-/* [DOES NOT MATTER] */
-html, body {
-  padding: 0;
-  margin: 0;
-  font-family: arial, sans-serif;
-}
-
 .contact-form fieldset {
   border: none;
   padding: 1em 0 0 0;
 }
 
 .contact-form fieldset p {
-  display: inline-block;
-  color: #C53030;
+  @apply inline-block text-red-700;
+}
+
+.contact-form textarea::placeholder, .contact-form input::placeholder {
+  @apply text-gray-700;
+}
+
+.contact-form input, .contact-form textarea {
+  @apply w-full border border-gray-600 p-2;
 }
 
 .contact-form textarea {
-  width: 100%;
-  height: 10em;
-}
-
-.contact-form input {
-  width: 100%;
+  @apply h-64;
 }
 
 .contact-form label {
-  display: none;
+  @apply hidden;
+}
+
+.contact-form button {
+  @apply p-2 bg-green-800 text-white rounded mt-2;
 }