1
<section>
  <div class="flex flex-wrap items-end justify-center gap-4 py-12 mx-auto">
    <button
      class="flex items-center justify-center h-8 px-4 py-2 text-xs font-semibold text-white transition-all duration-200 rounded-md shadow bg-gradient-to-b from-blue-500 to-indigo-600 hover:to-indigo-800 focus:ring-2 focus:ring-blue-950 focus:ring-offset-2 ring-offset-gray-200 hover:shadow-none"
      aria-label="Action"
    >
      Button Primary
    </button>
    <button
      class="flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-white transition-all duration-200 rounded-lg shadow bg-gradient-to-b from-blue-500 to-indigo-600 hover:to-indigo-800 focus:ring-2 focus:ring-blue-950 focus:ring-offset-2 ring-offset-gray-200 hover:shadow-none"
      aria-label="Action"
    >
      Button Primary
    </button>
    <button
      class="flex items-center justify-center h-12 px-4 py-2 text-base font-medium text-white transition-all duration-200 rounded-lg shadow bg-gradient-to-b from-blue-500 to-indigo-600 hover:to-indigo-800 focus:ring-2 focus:ring-blue-950 focus:ring-offset-2 ring-offset-gray-200 hover:shadow-none"
      aria-label="Action"
    >
      Button Primary
    </button>
  </div>
</section>
buttons
