<UModal
          v-model:open="openSettingsModal"
          :close="false"
          :dismissible="false"
          :ui="{
            content: 'dark:bg-gray-800 dark:ring-gray-400'
          }"
        >
          <template #header>
            <div class="flex w-full justify-between items-center">
              <h2>Settings</h2>
              <UTooltip
                text="Virtual Tour"
                :content="{ align: 'center', side: 'top' }"
              >
                <UButton
                  v-if="isActive"
                  icon="mdi:compass-outline"
                  size="md"
                  color="notRequested"
                  variant="solid"
                  class="hidden md:inline-flex"
                  @click="something"
                />
              </UTooltip>
            </div>
          </template>
          <template #body>
...

<UModal
          v-model:open="openSettingsModal"
          :close="false"
          :dismissible="false"
          :ui="{
            content: 'dark:bg-gray-800 dark:ring-gray-400'
          }"
        >
          <template #header>
            <div class="flex w-full justify-between items-center">
              <h2>Settings</h2>
              <UTooltip
                text="Virtual Tour"
                :content="{ align: 'center', side: 'top' }"
              >
                <UButton
                  v-if="isActive"
                  icon="mdi:compass-outline"
                  size="md"
                  color="notRequested"
                  variant="solid"
                  class="hidden md:inline-flex"
                  @click="something"
                />
              </UTooltip>
            </div>
          </template>
          <template #body>
...

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply font-montserrat;
}

/*Fonts*/

@layer utilities {
  .font-montserrat {
    font-family: Montserrat, sans-serif;
  }
}
@layer utilities {
  .font-inconsolata {
    font-family: Inconsolata, monospace;
  }
}

/*Typography*/

@layer base {
  h1 {
    @apply text-xl font-semibold lg:text-3xl;
  }
  h2 {
    @apply text-lg font-semibold lg:text-2xl;
  }
  h3 {
    @apply text-base font-semibold lg:text-xl;
  }
  h4 {
    @apply text-sm font-semibold lg:text-lg;
  }
  p {
    @apply text-sm font-normal lg:text-base;
  }
}

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply font-montserrat;
}

/*Fonts*/

@layer utilities {
  .font-montserrat {
    font-family: Montserrat, sans-serif;
  }
}
@layer utilities {
  .font-inconsolata {
    font-family: Inconsolata, monospace;
  }
}

/*Typography*/

@layer base {
  h1 {
    @apply text-xl font-semibold lg:text-3xl;
  }
  h2 {
    @apply text-lg font-semibold lg:text-2xl;
  }
  h3 {
    @apply text-base font-semibold lg:text-xl;
  }
  h4 {
    @apply text-sm font-semibold lg:text-lg;
  }
  p {
    @apply text-sm font-normal lg:text-base;
  }
}