<div class="pb-16">
  <div class="w-full mt-6">
    <!--Section title-->
    <div id="get-started" class="w-full max-w-md mb-5">
      <h2
        class="
          font-heading font-semibold
          text-3xl text-muted-800
          dark:text-white
          mb-4
        "
      >
        Built with
      </h2>
      <p class="font-sans text-muted-500 dark:text-muted-400">
        Although it is an HTML template, Mistral relies on powerful stacks like
        Alpine JS v3.x and Tailwind as a CSS implementation, making you able to
        build beautiful apps.
      </p>
    </div>

    <div class="grid md:grid-cols-4 lg:grid-cols-4 gap-3">
      <!--Grid item-->
      <div
        class="
          block
          py-8
          px-4
          rounded-2xl
          text-center
          bg-white
          dark:bg-muted-800
          border border-muted-200
          dark:border-muted-700
          hover:shadow-xl
          shadow-muted-400/10
          hover:dark:shadow-muted-800/10
          transition-all
          duration-300
        "
      >
        <i
          class="iconify block w-9 h-9 mx-auto mb-3"
          data-icon="logos:html-5"
        ></i>
        <h3
          class="
            font-heading font-semibold
            text-base text-muted-800
            dark:text-white
          "
        >
          HTML5
        </h3>
        <p class="font-sans text-sm text-muted-500 dark:text-muted-400">
          Specification
        </p>
      </div>
      <!--Grid item-->
      <div
        class="
          block
          py-8
          px-4
          rounded-2xl
          text-center
          bg-white
          dark:bg-muted-800
          border border-muted-200
          dark:border-muted-700
          hover:shadow-xl
          shadow-muted-400/10
          hover:dark:shadow-muted-800/10
          transition-all
          duration-300
        "
      >
        <i
          class="iconify block w-11 h-11 mx-auto mb-1"
          data-icon="logos:alpinejs-icon"
        ></i>
        <h3
          class="
            font-heading font-semibold
            text-base text-muted-800
            dark:text-white
          "
        >
          Alpine JS
        </h3>
        <p class="font-sans text-sm text-muted-500 dark:text-muted-400">
          Version 3.x
        </p>
      </div>
      <!--Grid item-->
      <div
        class="
          block
          py-8
          px-4
          rounded-2xl
          text-center
          bg-white
          dark:bg-muted-800
          border border-muted-200
          dark:border-muted-700
          hover:shadow-xl
          shadow-muted-400/10
          hover:dark:shadow-muted-800/10
          transition-all
          duration-300
        "
      >
        <i
          class="iconify block w-11 h-11 mx-auto mb-1"
          data-icon="logos:tailwindcss-icon"
        ></i>
        <h3
          class="
            font-heading font-semibold
            text-base text-muted-800
            dark:text-white
          "
        >
          Tailwind CSS
        </h3>
        <p class="font-sans text-sm text-muted-500 dark:text-muted-400">
          Version 3.x
        </p>
      </div>
      <!--Grid item-->
      <div
        class="
          block
          py-8
          px-4
          rounded-2xl
          text-center
          bg-white
          dark:bg-muted-800
          border border-muted-200
          dark:border-muted-700
          hover:shadow-xl
          shadow-muted-400/10
          hover:dark:shadow-muted-800/10
          transition-all
          duration-300
        "
      >
        <i
          class="iconify block w-9 h-9 mx-auto mb-3"
          data-icon="logos:vitejs"
        ></i>
        <h3
          class="
            font-heading font-semibold
            text-base text-muted-800
            dark:text-white
          "
        >
          Vite JS
        </h3>
        <p class="font-sans text-sm text-muted-500 dark:text-muted-400">
          Version 3.x
        </p>
      </div>
    </div>
  </div>
</div>
