Update radio group component

client/src/components/ui/ItRadioGroup.vue

@@ -1,28 +1,22 @@
 <template>
   <RadioGroup
     :model-value="modelValue"
+    class="border p-12"
     @update:modelValue="$emit('update:modelValue', $event)"
-    class="mt-2 flex flex-row justify-between"
   >
-    <RadioGroupLabel class="flex-1">{{ label }}</RadioGroupLabel>
-    <div class="flex flex-1 justify-items-center space-x-4">
+    <RadioGroupLabel class="text-5xl mb-12 leading-normal font-bold block">{{
+      label
+    }}</RadioGroupLabel>
+    <div class="flex justify-between align-items-center justify-items-center space-x-6">
       <RadioGroupOption
-        as="template"
         v-for="item in items"
         :key="item.id"
-        v-slot="{ checked, active }"
+        as="template"
         class="flex-1"
         :value="item.value"
       >
         <div
-          class=""
-          :class="[
-            checked
-              ? 'bg-blue-600 border-transparent text-white hover:bg-indigo-700'
-              : 'bg-white border-gray-200 text-gray-900 hover:bg-gray-50',
-            active ? 'ring ring-offset-2 ring-indigo-500' : '',
-            'cursor-pointer focus:outline-none border rounded-md py-3 px-3 flex items-center justify-center text-sm font-medium uppercase',
-          ]"
+          class="py-10 text-xl flex-1 text-center mr-6 last:mr-0 cursor-pointer font-bold ui-checked:bg-sky-500 ui-not-checked:border hover:border-gray-500 hover:bg-gray-200"
         >
           <RadioGroupLabel as="span">
             {{ item.name }}