Elements 06

            
<div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-2 items-center">
  <a href="#" class="inline-flex space-x-2 items-center bg-gray-600 font-semibold text-xs rounded-lg py-3 px-4 lg:px-8 text-white hover:bg-gray-500">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4">
      <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" />
    </svg>
    <span>XS button</span>
  </a>
  <a href="#" class="inline-flex space-x-2 items-center bg-gray-600 font-semibold text-sm rounded-lg py-4 px-5 lg:px-8 text-white hover:bg-gray-500">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5">
      <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" />
    </svg>
    <span>Small button</span>
  </a>
  <a href="#" class="inline-flex space-x-2 items-center bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white hover:bg-gray-500">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-6">
      <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" />
    </svg>
    <span>Default button</span>
  </a>
  <a href="#" class="inline-flex space-x-3 items-center bg-gray-600 font-semibold text-lg rounded-lg py-4 px-5 lg:px-8 text-white hover:bg-gray-500">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-7">
      <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" />
    </svg>
    <span>Large button</span>
  </a>
  <a href="#" class="inline-flex space-x-3 items-center bg-gray-600 font-semibold text-xl rounded-lg py-5 px-5 lg:px-10 text-white hover:bg-gray-500">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8">
      <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd" />
    </svg>
    <span>XL button</span>
  </a>
</div>