work on styles

styles/App.css

@@ -1,17 +0,0 @@
-header h1 {
-    margin-left: 12px;
-}
-
-.p-button {
-    margin-top: 12px;
-    margin-right: 12px;
-    margin-bottom: 12px;
-}
-
-.home {
-    display: flex;
-}
-
-.home > div {
-    padding: 12px;
-}

styles/LetterOptions.css

@@ -1,61 +0,0 @@
-.letter-options {
-    width: 320px;
-}
-
-.letter-options label {
-    display: block;
-    color: #333;
-    font-size: 14px;
-    font-weight: bold;
-}
-.letter-options input,
-.letter-options textarea,
-.letter-options select {
-    margin-top: 3px;
-    margin-bottom: 12px;
-    width: 100%;
-}
-
-.letter-options textarea {
-    resize: vertical;
-}
-
-.letter-options textarea.address {
-    height: 80px;
-}
-
-.letter-options textarea.body {
-    height: 340px;
-}
-
-.letter-options .Collapsible {
-    background-color: #ddd;
-    border-radius: 2px;
-}
-
-.letter-options .Collapsible__trigger {
-    padding-left: 6px;
-    cursor: pointer;
-    line-height: 24px;
-    font-size: 14px;
-    font-weight: bold;
-}
-
-.letter-options .Collapsible__trigger.is-closed:before {
-    content: "> ";
-}
-
-.letter-options .Collapsible__trigger.is-open:before {
-    content: "< ";
-}
-
-.letter-options .Collapsible {
-    margin-bottom: 12px;
-}
-
-.letter-options .Collapsible__contentInner {
-    background-color: #fff;
-    padding-top: 12px;
-    padding-left: 12px;
-}
-

styles/index.css

@@ -1,3 +1,34 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.Collapsible {
+  background-color: #ddd;
+  border-radius: 2px;
+}
+
+.Collapsible__trigger {
+  padding-left: 6px;
+  cursor: pointer;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.Collapsible__trigger.is-closed:before {
+  content: '> ';
+}
+
+.Collapsible__trigger.is-open:before {
+  content: '< ';
+}
+
+.Collapsible {
+  margin-bottom: 12px;
+}
+
+.Collapsible__contentInner {
+  background-color: #fff;
+  padding-top: 12px;
+  padding-left: 12px;
+}