<div class="flex flex-wrap gap-8 items-center justify-center max-w-3xl mx-auto w-full">
  <button
    class="inline-flex items-center justify-center rounded-2xl bg-zinc-900 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition duration-200 hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300">
    Button xs
  </button>
  <button
    class="inline-flex items-center justify-center rounded-2xl bg-zinc-900 px-4 py-2 text-sm font-semibold text-white shadow-sm transition duration-200 hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300">
    Button sm
  </button>
  <button
    class="inline-flex items-center justify-center rounded-2xl bg-zinc-900 px-4 py-2 text-base font-semibold text-white shadow-sm transition duration-200 hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300">
    Button base
  </button>
  <button
    class="inline-flex items-center justify-center rounded-2xl bg-zinc-900 px-4 py-2 text-lg font-semibold text-white shadow-sm transition duration-200 hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300">
    Button lg
  </button>
  <button
    class="inline-flex items-center justify-center rounded-2xl bg-zinc-900 px-5 py-3 text-xl font-semibold text-white shadow-sm transition duration-200 hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300">
    Button xl
  </button>
</div>

<div class="flex flex-wrap gap-8 items-center justify-center max-w-3xl mx-auto w-full">
  <button
    class="inline-flex items-center justify-center rounded-2xl border border-zinc-200/80 bg-white/70 px-3 py-1.5 text-xs font-semibold text-zinc-700 shadow-sm hover:bg-zinc-100/70 dark:border-zinc-700/80 dark:bg-zinc-900/60 dark:text-zinc-200 dark:hover:bg-zinc-800/60 transition duration-200">
    Button xs
  </button>
  <button
    class="inline-flex items-center justify-center rounded-2xl border border-zinc-200/80 bg-white/70 px-4 py-2 text-sm font-semibold text-zinc-700 shadow-sm hover:bg-zinc-100/70 dark:border-zinc-700/80 dark:bg-zinc-900/60 dark:text-zinc-200 dark:hover:bg-zinc-800/60 transition duration-200">
    Button sm
  </button>
  <button
    class="inline-flex items-center justify-center rounded-2xl border border-zinc-200/80 bg-white/70 px-4 py-2 text-base font-semibold text-zinc-700 shadow-sm hover:bg-zinc-100/70 dark:border-zinc-700/80 dark:bg-zinc-900/60 dark:text-zinc-200 dark:hover:bg-zinc-800/60 transition duration-200">
    Button base
  </button>
  <button
    class="inline-flex items-center justify-center rounded-2xl border border-zinc-200/80 bg-white/70 px-4 py-2 text-lg font-semibold text-zinc-700 shadow-sm hover:bg-zinc-100/70 dark:border-zinc-700/80 dark:bg-zinc-900/60 dark:text-zinc-200 dark:hover:bg-zinc-800/60 transition duration-200">
    Button lg
  </button>
  <button
    class="inline-flex items-center justify-center rounded-2xl border border-zinc-200/80 bg-white/70 px-5 py-3 text-xl font-semibold text-zinc-700 shadow-sm hover:bg-zinc-100/70 dark:border-zinc-700/80 dark:bg-zinc-900/60 dark:text-zinc-200 dark:hover:bg-zinc-800/60 transition duration-200">
    Button xl
  </button>
</div>

<div class="flex flex-wrap gap-8 items-center justify-center max-w-3xl mx-auto w-full">
  <button
    class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 transition hover:border-gray-300 hover:text-primary-700 dark:border-transparent dark:bg-zinc-950 dark:text-zinc-200 dark:hover:border-zinc-800 dark:hover:text-primary-300">
    Button xs
  </button>
  <button
    class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-white px-4 py-2 text-sm font-semibold text-gray-700 transition hover:border-gray-300 hover:text-primary-700 dark:border-transparent dark:bg-zinc-950 dark:text-zinc-200 dark:hover:border-zinc-800 dark:hover:text-primary-300">
    Button sm
  </button>
  <button
    class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-white px-4 py-2 text-base font-semibold text-gray-700 transition hover:border-gray-300 hover:text-primary-700 dark:border-transparent dark:bg-zinc-950 dark:text-zinc-200 dark:hover:border-zinc-800 dark:hover:text-primary-300">
    Button base
  </button>
  <button
    class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-white px-4 py-2 text-lg font-semibold text-gray-700 transition hover:border-gray-300 hover:text-primary-700 dark:border-transparent dark:bg-zinc-950 dark:text-zinc-200 dark:hover:border-zinc-800 dark:hover:text-primary-300">
    Button lg
  </button>
  <button
    class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-white px-5 py-3 text-xl font-semibold text-gray-700 transition hover:border-gray-300 hover:text-primary-700 dark:border-transparent dark:bg-zinc-950 dark:text-zinc-200 dark:hover:border-zinc-800 dark:hover:text-primary-300">
    Button xl
  </button>
</div>

<div class="flex flex-wrap gap-8 items-center justify-center max-w-3xl mx-auto w-full">
  <button
    class="opacity-60 cursor-not-allowed inline-flex items-center justify-center rounded-2xl bg-zinc-900 px-4 py-2 text-base font-semibold text-white shadow-sm transition duration-200 hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300">
    <i class="fa-regular fa-spinner-third fa-spin me-2" style="animation-duration: .5s;"></i>
    Loading...
  </button>
  <button class="opacity-60 cursor-not-allowed inline-flex items-center justify-center rounded-2xl border border-zinc-200/80 bg-white/70 px-4 py-2 text-base font-semibold text-zinc-700 shadow-sm hover:bg-zinc-100/70 dark:border-zinc-700/80 dark:bg-zinc-900/60 dark:text-zinc-200 dark:hover:bg-zinc-800/60 transition duration-200">
    <i class="fa-regular fa-spinner-third fa-spin me-2" style="animation-duration: .5s;"></i>
    Loading...
  </button>
</div>

<div class="flex flex-wrap gap-8 items-center justify-center max-w-3xl mx-auto w-full">
  <button
    class="inline-flex items-center justify-center rounded-2xl bg-zinc-900 px-3 py-2 text-sm font-semibold text-white shadow-sm transition duration-200 hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300">
    <i class="hgi hgi-stroke hgi-rounded hgi-favourite icon-sm"></i>
  </button>
  <button
    class="inline-flex items-center justify-center rounded-2xl bg-zinc-900 px-3 py-2 text-base font-semibold text-white shadow-sm transition duration-200 hover:bg-zinc-700 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-300">
    <i class="hgi hgi-stroke hgi-rounded hgi-favourite icon-base"></i>
  </button>
  <button
    class="inline-flex items-center justify-center rounded-2xl border border-zinc-200/80 bg-white/70 px-3 py-2 text-sm font-semibold text-zinc-700 shadow-sm hover:bg-zinc-100/70 dark:border-zinc-700/80 dark:bg-zinc-900/60 dark:text-zinc-200 dark:hover:bg-zinc-800/60 transition duration-200">
    <i class="hgi hgi-stroke hgi-rounded hgi-favourite icon-sm"></i>
  </button>
  <button class="inline-flex items-center justify-center rounded-2xl border border-zinc-200/80 bg-white/70 px-3 py-2 text-base font-semibold text-zinc-700 shadow-sm hover:bg-zinc-100/70 dark:border-zinc-700/80 dark:bg-zinc-900/60 dark:text-zinc-200 dark:hover:bg-zinc-800/60 transition duration-200">
    <i class="hgi hgi-stroke hgi-rounded hgi-favourite icon-base"></i>
  </button>
</div>