Form styling

app/assets/stylesheets/application.tailwind.css.scss

@@ -4,6 +4,7 @@
 @import "leaflet.fullscreen/Control.FullScreen.css"; /* Fullscreen button */
 @import "header.scss";
 @import "forecast-page.scss";
+@import "subscription-form.scss";
 @import "map.scss";
 @import "daqi-levels.scss";
 @import "share.scss";

app/assets/stylesheets/subscription-form.scss

@@ -0,0 +1,87 @@
+.form {
+  section {
+    @apply mb-4;
+
+    > div {
+      @apply mb-2 block;
+    }
+  }
+
+  label {
+    @apply block mb-1;
+  }
+
+  input[type="text"],
+  input[type="search"],
+  input[type="email"],
+  input[type="tel"],
+  input[type="password"],
+  textarea {
+    @apply w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500;
+  }
+
+  input[type="checkbox"],
+  input[type="radio"] {
+    @apply inline-block mr-2;
+
+    + label {
+      @apply inline-block;
+    }
+  }
+
+  select {
+    @apply inline-flex flex-row w-full gap-x-1.5 rounded-md bg-white px-3 py-2 text-base text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50;
+  }
+
+  .switch {
+    @apply relative inline-block w-11 h-5;
+
+    input[type="checkbox"] {
+      @apply appearance-none w-11 h-5 bg-airtext-main-light rounded-full checked:bg-airtext-main cursor-pointer transition-colors duration-300;
+    }
+
+    label {
+      @apply absolute top-0 left-0 w-5 h-5 bg-white rounded-full border border-airtext-main shadow-sm transition-transform duration-300 cursor-pointer;
+    }
+  }
+
+  .buttons {
+    @apply flex justify-between gap-2 mt-4;
+
+    > * {
+      @apply w-1/2;
+    }
+
+    a {
+      @apply inline-block px-4 py-2 font-semibold text-white bg-gray-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-1 focus:ring-airtext-main focus:border-airtext-main cursor-pointer text-center;
+    }
+  }
+
+  button[type="submit"],
+  input[type="submit"] {
+    @apply inline-block px-4 py-2 font-semibold text-white bg-airtext-main rounded-md hover:bg-blue-600 focus:outline-none focus:ring-1 focus:ring-airtext-main focus:border-airtext-main cursor-pointer;
+  }
+
+  .form-errors {
+    @apply bg-red-100 text-red-700 p-4 mt-4;
+  }
+}
+
+#search-results {
+  @apply mt-4;
+
+  li {
+    @apply cursor-pointer;
+  }
+}
+
+#tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 1rem 0;
+
+  .tag {
+    @apply px-2 py-1 bg-gray-200 rounded-md cursor-pointer;
+  }
+}

app/assets/stylesheets/text-block.scss

@@ -99,6 +99,7 @@ details {
       content: none; /* Hide the default marker */
     }
 
+    h3,
     h4 {
       margin: 0 !important;
 
@@ -119,21 +120,14 @@ details {
         border-radius: 100%;
       }
     }
-
-    p {
-      margin: 0 !important;
-    }
   }
 
-  &[open] summary h4 {
-    margin-bottom: 1rem;
-
-    &::after {
-      content: "\2212"; /* Unicode character for minus sign */
+  &[open] summary {
+    h3,
+    h4 {
+      &::after {
+        content: "\2212"; /* Unicode character for minus sign */
+      }
     }
   }
 }
-
-select {
-  @apply inline-flex flex-row w-full gap-x-1.5 rounded-md bg-white px-3 py-2 text-base font-semibold text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50;
-}

app/views/forecasts/_pollutant_selector.html.erb

@@ -1,4 +1,4 @@
-<%= form_tag(false) do %>
+<%= form_tag(false, class: "form") do %>
   <%= select_tag :pollutant, 
   options_for_select({
     "All pollutants" => 'Total',