<template>
  <div class="flex h-screen justify-center align-middle">
    <div class="m-32 w-full rounded bg-white p-4">
      <div>
        <h1 class="text-5xl font-bold">Nuxt 3 - Starterkit</h1>
      </div>
      <div class="container mt-8">
        <ul class="text-3xl">
          <li class="space-x-4">
            <a class="text-primary-600 hover:text-primary-700 active:text-primary-500" href="https://orm.drizzle.team/" target="_blank">Drizzle:</a><span>Database ORM</span>
          </li>
          <li class="space-x-4">
            <a class="text-primary-600 hover:text-primary-700 active:text-primary-500" href="https://vueuse.org/guide/" target="_blank">VueUse:</a><span>Utility functions</span>
          </li>
          <li class="space-x-4">
            <a class="text-primary-600 hover:text-primary-700 active:text-primary-500" href="https://github.com/nuxt-modules/icon" target="_blank">Nuxt Icons:</a><span>Iconify integration</span>
          </li>
          <li class="space-x-4">
            <a class="text-primary-600 hover:text-primary-700 active:text-primary-500" href="https://fonts.nuxt.com/" target="_blank">Nuxt Fonts:</a><span>Plug-and-play fonts optimization for Nuxt apps</span>
          </li>
          <li class="space-x-4">
            <a class="text-primary-600 hover:text-primary-700 active:text-primary-500" href="https://tailwindcss.com/docs/installation" target="_blank">TailwindCSS:</a><span>CSS Framework</span>
          </li>
          <li class="space-x-4">
            <a class="text-primary-600 hover:text-primary-700 active:text-primary-500" href="https://eslint.org/docs/latest/" target="_blank">ESLint:</a><span>Linting utility</span>
          </li>
        </ul>
      </div>
    </div>
    </div>
</template>
