Update CSS styles and inline radio group component

src/assets/css/style.css

@@ -705,6 +705,40 @@ select {
   --tw-backdrop-sepia:  ;
 }
 
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 /* NavBar */
 
 .menu-item {
@@ -1051,10 +1085,6 @@ select {
   margin-right: 0.5rem;
 }
 
-.mr-2\.5 {
-  margin-right: 0.625rem;
-}
-
 .mt-0 {
   margin-top: 0px;
 }
@@ -1170,10 +1200,6 @@ select {
   height: 2.25rem;
 }
 
-.h-\[16px\] {
-  height: 16px;
-}
-
 .h-\[2\.7rem\] {
   height: 2.7rem;
 }
@@ -1182,10 +1208,6 @@ select {
   height: 66px;
 }
 
-.h-\[7px\] {
-  height: 7px;
-}
-
 .h-\[calc\(100\%-64px\)\] {
   height: calc(100% - 64px);
 }
@@ -1283,10 +1305,6 @@ select {
   width: 2.25rem;
 }
 
-.w-\[16px\] {
-  width: 16px;
-}
-
 .w-\[2\.7rem\] {
   width: 2.7rem;
 }
@@ -1295,10 +1313,6 @@ select {
   width: 266px;
 }
 
-.w-\[7px\] {
-  width: 7px;
-}
-
 .w-auto {
   width: auto;
 }
@@ -1500,6 +1514,19 @@ select {
   gap: 0.75rem;
 }
 
+.gap-x-6 {
+  -moz-column-gap: 1.5rem;
+       column-gap: 1.5rem;
+}
+
+.gap-y-0 {
+  row-gap: 0px;
+}
+
+.gap-y-0\.5 {
+  row-gap: 0.125rem;
+}
+
 .gap-x-1 {
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
@@ -1515,24 +1542,6 @@ select {
        column-gap: 0.5rem;
 }
 
-.gap-x-4 {
-  -moz-column-gap: 1rem;
-       column-gap: 1rem;
-}
-
-.gap-x-6 {
-  -moz-column-gap: 1.5rem;
-       column-gap: 1.5rem;
-}
-
-.gap-y-0 {
-  row-gap: 0px;
-}
-
-.gap-y-0\.5 {
-  row-gap: 0.125rem;
-}
-
 .gap-y-1 {
   row-gap: 0.25rem;
 }
@@ -1693,11 +1702,6 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.border-gray-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(75 85 99 / var(--tw-border-opacity));
-}
-
 .border-primary-500 {
   --tw-border-opacity: 1;
   border-color: rgb(3 91 113 / var(--tw-border-opacity));
@@ -1707,6 +1711,11 @@ select {
   border-color: transparent;
 }
 
+.border-gray-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1903,6 +1912,10 @@ select {
   padding: 1rem;
 }
 
+.p-5 {
+  padding: 1.25rem;
+}
+
 .px-0 {
   padding-left: 0px;
   padding-right: 0px;
@@ -1948,11 +1961,6 @@ select {
   padding-right: 1.5rem;
 }
 
-.py-0 {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -1998,6 +2006,11 @@ select {
   padding-bottom: 1.5rem;
 }
 
+.py-0 {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
 .pb-4 {
   padding-bottom: 1rem;
 }
@@ -2014,10 +2027,6 @@ select {
   padding-left: 2.75rem;
 }
 
-.pl-2 {
-  padding-left: 0.5rem;
-}
-
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -2042,10 +2051,6 @@ select {
   padding-right: 1.25rem;
 }
 
-.pr-7 {
-  padding-right: 1.75rem;
-}
-
 .pt-0 {
   padding-top: 0px;
 }
@@ -2062,6 +2067,14 @@ select {
   padding-top: 1.25rem;
 }
 
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
+.pr-7 {
+  padding-right: 1.75rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -2314,11 +2327,6 @@ select {
   color: rgb(153 153 0 / var(--tw-text-opacity));
 }
 
-.text-primary-600 {
-  --tw-text-opacity: 1;
-  color: rgb(2 73 90 / var(--tw-text-opacity));
-}
-
 .text-opacity-40 {
   --tw-text-opacity: 0.4;
 }
@@ -2767,20 +2775,10 @@ select {
   color: rgb(53 124 141 / var(--tw-text-opacity));
 }
 
-.group:checked .group-checked\:text-primary-500 {
-  --tw-text-opacity: 1;
-  color: rgb(3 91 113 / var(--tw-text-opacity));
-}
-
 .group:hover .group-hover\:block {
   display: block;
 }
 
-.group:hover .group-hover\:bg-gray-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-}
-
 .group:hover .group-hover\:bg-primary-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(3 91 113 / var(--tw-bg-opacity));
@@ -2813,16 +2811,6 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.peer:checked ~ .peer-checked\:border-primary-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(3 91 113 / var(--tw-border-opacity));
-}
-
-.peer:checked ~ .peer-checked\:bg-primary-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(3 91 113 / var(--tw-bg-opacity));
-}
-
 .peer:checked ~ .peer-checked\:text-primary-500 {
   --tw-text-opacity: 1;
   color: rgb(3 91 113 / var(--tw-text-opacity));
@@ -3063,22 +3051,16 @@ select {
     gap: 0.75rem;
   }
 
-  .sm\:space-x-10 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(2.5rem * var(--tw-space-x-reverse));
-    margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
-  }
-
   .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
     --tw-space-x-reverse: 0;
     margin-right: calc(1rem * var(--tw-space-x-reverse));
     margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
-  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
+  .sm\:space-x-10 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
+    --tw-space-x-reverse: 0;
-    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+    margin-right: calc(2.5rem * var(--tw-space-x-reverse));
-    margin-bottom: calc(0px * var(--tw-space-y-reverse));
+    margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
   .sm\:space-x-5 > :not([hidden]) ~ :not([hidden]) {
@@ -3087,10 +3069,10 @@ select {
     margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
   }
 
-  .sm\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
+  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
+    --tw-space-y-reverse: 0;
-    margin-right: calc(2rem * var(--tw-space-x-reverse));
+    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
-    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+    margin-bottom: calc(0px * var(--tw-space-y-reverse));
   }
 
   .sm\:space-x-reverse > :not([hidden]) ~ :not([hidden]) {

src/components/Form/InlineRadioGroup.vue

@@ -2,23 +2,12 @@
   <div>
     <fieldset>
       <div class="space-y-3 sm:flex sm:items-center sm:space-y-0 sm:space-x-5">
-        <div
+        <div v-for="item in radioItems" :key="item.id" class="flex items-center">
-          v-for="item in radioItems"
+          <input :id="`${item.id}`" type="radio" name="radio"
-          :key="item.id"
-          class="flex items-center"
-        >
-          <input
-            :id="`${item.id}`"
-            type="radio"
-            name="radio"
             :checked="item.hasOwnProperty('checked') && item.checked === true"
-            class="h-4 w-4 border-gray-300 text-primary-500 peer focus:ring-primary-500"
+            class="w-4 h-4 border-gray-300 text-primary-500 peer focus:ring-primary-500" />
-          />
+          <label :for="`${item.id}`" class="block ml-3 text-sm font-medium text-gray-700 peer-checked:text-primary-500">{{
-          <label
+            item.title }}</label>
-            :for="`${item.id}`"
-            class="ml-3 block text-sm font-medium text-gray-700 peer-checked:text-primary-500"
-            >{{ item.title }}</label
-          >
         </div>
       </div>
     </fieldset>
@@ -26,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, type PropType } from 'vue'
+import { type PropType } from 'vue'
 
 interface Item {
   id: number;