Button

<div class="flex flex-col justify-center items-center">
  <!--Default-->
  <div class="mb-4">
    <button class="mx-2 px-2 py-1 text-xs rounded text-gray-800 border focus:outline-none hover:bg-gray-100">Default</button>
    <button class="mx-2 px-4 py-2 text-sm rounded text-gray-800 border focus:outline-none hover:bg-gray-100">Default</button>
    <button class="mx-2 my-2 px-8 py-4 text rounded text-gray-800 border focus:outline-none hover:bg-gray-100">Default</button>
  </div>

  <!--Primary-->
  <div class="mb-4">
    <button class="mx-2 px-2 py-1 text-xs rounded text-white bg-blue-500 focus:outline-none hover:bg-blue-400">Primary</button>
    <button class="mx-2 px-4 py-2 text-sm rounded text-white bg-blue-500 focus:outline-none hover:bg-blue-400">Primary</button>
    <button class="mx-2 my-2 px-8 py-4 text rounded text-white bg-blue-500 focus:outline-none hover:bg-blue-400">Primary</button>
  </div>

  <!--Success-->
  <div class="mb-4">
    <button class="mx-2 px-2 py-1 text-xs rounded text-white bg-teal-500 focus:outline-none hover:bg-teal-400">Success</button>
    <button class="mx-2 px-4 py-2 text-sm rounded text-white bg-teal-500 focus:outline-none hover:bg-teal-400">Success</button>
    <button class="mx-2 my-2 px-8 py-4 text rounded text-white bg-teal-500 focus:outline-none hover:bg-teal-400">Success</button>
  </div>

  <!--Danger-->
  <div class="mb-4">
    <button class="mx-2 px-2 py-1 text-xs rounded text-white bg-red-500 focus:outline-none hover:bg-red-400">Danger</button>
    <button class="mx-2 px-4 py-2 text-sm rounded text-white bg-red-500 focus:outline-none hover:bg-red-400">Danger</button>
    <button class="mx-2 my-2 px-8 py-4 text rounded text-white bg-red-500 focus:outline-none hover:bg-red-400">Danger</button>
  </div>

  <!--Warning-->
  <div class="mb-4">
    <button class="mx-2 px-2 py-1 text-xs rounded text-white bg-orange-500 focus:outline-none hover:bg-orange-400">Warning</button>
    <button class="mx-2 px-4 py-2 text-sm rounded text-white bg-orange-500 focus:outline-none hover:bg-orange-400">Warning</button>
    <button class="mx-2 my-2 px-8 py-4 text rounded text-white bg-orange-500 focus:outline-none hover:bg-orange-400">Warning</button>
  </div>

  <!--Info-->
  <div class="mb-4">
    <button class="mx-2 px-2 py-1 text-xs rounded text-white bg-gray-600 focus:outline-none hover:bg-gray-500">Info</button>
    <button class="mx-2 px-4 py-2 text-sm rounded text-white bg-gray-600 focus:outline-none hover:bg-gray-500">Info</button>
    <button class="mx-2 my-2 px-8 py-4 text rounded text-white bg-gray-600 focus:outline-none hover:bg-gray-500">Info</button>
  </div>

  <!--Link-->
  <div class="mb-4">
    <button class="mx-2 px-2 py-1 text-xs text-blue-600 focus:outline-none hover:underline">Link</button>
    <button class="mx-2 px-4 py-2 text-sm text-blue-600 focus:outline-none hover:underline">Link</button>
    <button class="mx-2 my-2 px-8 py-4 text text-blue-600 focus:outline-none hover:underline">Link</button>
  </div>
</div>

<div class="flex flex-col justify-center items-center">
  <!--Default-->
  <div class="mb-4">
    <button class="mx-2 px-2 py-1 text-xs rounded font-medium text-gray-600 border-2 bg-gray-200 focus:outline-none hover:bg-gray-300">Default</button>
    <button class="mx-2 px-4 py-2 text-sm rounded font-medium text-gray-600 border-2 bg-gray-200 focus:outline-none hover:bg-gray-300">Default</button>
    <button class="mx-2 my-2 px-8 py-4 text rounded font-medium text-gray-600 border-2 bg-gray-200 focus:outline-none hover:bg-gray-300">Default</button>
  </div>

  <!--Primary-->
  <div class="mb-4">
    <button class="mx-2 px-2 py-1 text-xs rounded font-medium border-2 border-blue-300 text-blue-500 bg-blue-200 focus:outline-none hover:bg-blue-300">Primary</button>
    <button class="mx-2 px-4 py-2 text-sm rounded font-medium border-2 border-blue-300 text-blue-500 bg-blue-200 focus:outline-none hover:bg-blue-300">Primary</button>
    <button class="mx-2 my-2 px-8 py-4 text rounded font-medium border-2 border-blue-300 text-blue-500 bg-blue-200 focus:outline-none hover:bg-blue-300">Primary</button>
  </div>

  <!--Success-->
  <div class="mb-4">
    <button class="mx-2 px-2 py-1 text-xs rounded border-2 border-teal-300 text-teal-500 bg-teal-200 focus:outline-none hover:bg-teal-300">Success</button>
    <button class="mx-2 px-4 py-2 text-sm rounded border-2 border-teal-300 text-teal-500 bg-teal-200 focus:outline-none hover:bg-teal-300">Success</button>
    <button class="mx-2 my-2 px-8 py-4 text rounded border-2 border-teal-300 text-teal-500 bg-teal-200 focus:outline-none hover:bg-teal-300">Success</button>
  </div>

  <!--Danger-->
  <div class="mb-4">
    <button class="mx-2 px-2 py-1 text-xs rounded border-2 border-red-300 text-red-500 bg-red-200 focus:outline-none hover:bg-red-300">Danger</button>
    <button class="mx-2 px-4 py-2 text-sm rounded border-2 border-red-300 text-red-500 bg-red-200 focus:outline-none hover:bg-red-300">Danger</button>
    <button class="mx-2 my-2 px-8 py-4 text rounded border-2 border-red-300 text-red-500 bg-red-200 focus:outline-none hover:bg-red-300">Danger</button>
  </div>

  <!--Warning-->
  <div class="mb-4">
    <button class="mx-2 px-2 py-1 text-xs rounded border-2 border-orange-300 text-orange-500 bg-orange-200 focus:outline-none hover:bg-orange-300">Warning</button>
    <button class="mx-2 px-4 py-2 text-sm rounded border-2 border-orange-300 text-orange-500 bg-orange-200 focus:outline-none hover:bg-orange-300">Warning</button>
    <button class="mx-2 my-2 px-8 py-4 text rounded border-2 border-orange-300 text-orange-500 bg-orange-200 focus:outline-none hover:bg-orange-300">Warning</button>
  </div>
</div>

<div class="flex flex-col justify-center items-center">
  <div class="mb-4">
    <button class="mx-2 px-4 py-1 text-xs rounded-full text-gray-800 border focus:outline-none hover:bg-gray-100">Default</button>
    <button class="mx-2 px-4 py-2 text-sm rounded-full text-gray-800 border focus:outline-none hover:bg-gray-100">Default</button>
    <button class="mx-2 my-2 px-8 py-4 text rounded-full text-gray-800 border focus:outline-none hover:bg-gray-100">Default</button>
  </div>

  <div class="mb-4">
    <button class="mx-2 px-4 py-1 text-xs rounded-full text-white bg-blue-500 focus:outline-none hover:bg-blue-400">Primary</button>
    <button class="mx-2 px-4 py-2 text-sm rounded-full text-white bg-blue-500 focus:outline-none hover:bg-blue-400">Primary</button>
    <button class="mx-2 my-2 px-8 py-4 text rounded-full text-white bg-blue-500 focus:outline-none hover:bg-blue-400">Primary</button>
  </div>

  <div class="mb-4">
    <button class="mx-2 px-4 py-1 text-xs rounded-full text-white bg-teal-500 focus:outline-none hover:bg-teal-400">Success</button>
    <button class="mx-2 px-4 py-2 text-sm rounded-full text-white bg-teal-500 focus:outline-none hover:bg-teal-400">Success</button>
    <button class="mx-2 my-2 px-8 py-4 text rounded-full text-white bg-teal-500 focus:outline-none hover:bg-teal-400">Success</button>
  </div>

  <div class="mb-4">
    <button class="mx-2 px-4 py-1 text-xs rounded-full text-white bg-red-500 focus:outline-none hover:bg-red-400">Danger</button>
    <button class="mx-2 px-4 py-2 text-sm rounded-full text-white bg-red-500 focus:outline-none hover:bg-red-400">Danger</button>
    <button class="mx-2 my-2 px-8 py-4 text rounded-full text-white bg-red-500 focus:outline-none hover:bg-red-400">Danger</button>
  </div>

  <div class="mb-4">
    <button class="mx-2 px-4 py-1 text-xs rounded-full text-white bg-orange-500 focus:outline-none hover:bg-orange-400">Warning</button>
    <button class="mx-2 px-4 py-2 text-sm rounded-full text-white bg-orange-500 focus:outline-none hover:bg-orange-400">Warning</button>
    <button class="mx-2 my-2 px-8 py-4 text rounded-full text-white bg-orange-500 focus:outline-none hover:bg-orange-400">Warning</button>
  </div>

  <div class="mb-4">
    <button class="mx-2 px-4 py-1 text-xs rounded-full text-white bg-gray-600 focus:outline-none hover:bg-gray-500">Info</button>
    <button class="mx-2 px-4 py-2 text-sm rounded-full text-white bg-gray-600 focus:outline-none hover:bg-gray-500">Info</button>
    <button class="mx-2 my-2 px-8 py-4 text rounded-full text-white bg-gray-600 focus:outline-none hover:bg-gray-500">Info</button>
  </div>
</div>

<button class="mx-2 px-4 py-2 text-sm rounded text-gray-800 border focus:outline-none hover:bg-gray-100 inline-flex items-center justify-between">
  Upload file

  <svg class="w-4 h-4 fill-current ml-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 10v6H7v-6H2l8-8 8 8h-5zM0 18h20v2H0v-2z" /></svg>
</button>