feat: Remove Foundation in favor of Tailwind (#8984)

* feat: Remove foundation

* chore: Minor fix

* Minor fix

* Update _forms.scss

* chore: More changes

* chore: Minor fix

* chore: Clean up

* fix: font-weight

* chore: More changes

* chore: Setting page

* chore: Editor fix

* chore: Reports page

* chore: More changes

* chore: Minor changes

* chore: More fixes

* chore: More changes

* chore: More changes

* chore: More changes

* chore: Minor fix

* chore: More changes

* chore: More changes

* chore: More changes

* chore: More changes

* chore: Clean up

* chore: Minor fix

* chore: Clean ups

* chore: Rename basic file

* chore: Remove unused files

* chore: Fix expanded input

* Fix campaign rendering

* chore: Clean up

* chore: More changes

* chore: Remove unused files

* fix: Overflow issue

* chore: Minor fix

* chore: Clean up

* chore: Minor fix

* chore: Remove unused files

* chore: Minor fix

* chore: Minor fix

* fix: autoprefixer start/end value has mixed support

* chore: Minor fix

* chore: Remove unused files

* chore: Minor fix

* chore: Minor fix

* chore: Minor fix

* Add responsive design to label settings

* fix inbox view

* chore: Minor fix

* w-60% to w-2/3

* chore: Fix team

* chore: Fix button

* w-[34%] to w-1/3

* chore: Fix border

* Add support mobile views in team page

* chore: fix snackbar

* chore: clean up

* chore: Clean up

* fix: loading state alignment

* fix: alert styles

* chore: Minor fix

* fix: spacing for agent bot row

* fix: layout

* fix: layout for SLA

* fix: checkbox

* fix: SLA checkbox spacing

* Update inbox settings pages

* fix macros listing page layout

* fix canned responses

* chore: Fix bot page

* chore: fix automation page

* chore: fix agents page

* chore: fix canned response editor

* chore: Fix settings table

* chore: fix settings layout

* chore: Minor fix

* fix: canned response table layou

* fix: layout for table header for webhooks

* fix: webhook row layout

* fix: dashboard app modal layout

* fix: add title to canned response truncated shortcode

* fix: dashboard apps row layuot

* fix: layouts hooks

* fix: body color

* fix: delete action color in portal locales

* fix: text color for campagin title

* fix: success button color

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Vishnu Narayanan <iamwishnu@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

app/javascript/dashboard/components/ui/PreviewCard.vue

@@ -1,6 +1,18 @@
 <template>
-  <div class="preview-card--wrap" :class="{ 'active-card': active }">
-    <div class="header--wrap" :class="{ active: active }">
+  <div
+    class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-slate-75 dark:border-slate-600"
+    :class="{
+      'bg-woot-25 dark:bg-slate-700 border border-solid border-woot-300 dark:border-woot-400':
+        active,
+    }"
+  >
+    <div
+      class="flex justify-between items-center px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 rounded-t-[5px] border-b border-solid border-slate-50 dark:border-slate-600"
+      :class="{
+        'bg-woot-50 border-b border-solid border-woot-75 dark:border-woot-700':
+          active,
+      }"
+    >
       <div class="items-center flex font-medium p-1 text-sm">{{ heading }}</div>
       <fluent-icon
         v-if="active"
@@ -56,21 +68,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.preview-card--wrap {
-  @apply flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-slate-75 dark:border-slate-600;
-
-  .header--wrap {
-    @apply flex justify-between items-center px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 rounded-t-[5px] border-b border-solid border-slate-50 dark:border-slate-600;
-  }
-
-  .active {
-    @apply bg-woot-50 border-b border-solid border-woot-75 dark:border-woot-700;
-  }
-}
-
-.active-card {
-  @apply bg-woot-25 dark:bg-slate-700 border border-solid border-woot-300 dark:border-woot-400;
-}
-</style>