Elements 01

<div class="flex flex-col space-y-4 md:flex-row md:space-y-0 md:space-x-2 items-center">
  <a href="#" class="inline-block bg-gray-600 font-semibold text-xs rounded-lg py-3 px-4 lg:px-8 text-white hover:bg-gray-500">XS button</a>
  <a href="#" class="inline-block bg-gray-600 font-semibold text-sm rounded-lg py-4 px-5 lg:px-8 text-white hover:bg-gray-500">Small button</a>
  <a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white hover:bg-gray-500">Default button</a>
  <a href="#" class="inline-block bg-gray-600 font-semibold text-lg rounded-lg py-4 px-5 lg:px-8 text-white hover:bg-gray-500">Large button</a>
  <a href="#" class="inline-block bg-gray-600 font-semibold text-xl rounded-lg py-5 px-5 lg:px-10 text-white hover:bg-gray-500">XL button</a>
</div>

Raw

                      
<div class="flex flex-col space-y-4 md:flex-row md:space-y-0 md:space-x-2 items-center">
  <a href="#" class="inline-block bg-gray-600 font-semibold text-xs rounded-lg py-3 px-4 lg:px-8 text-white hover:bg-gray-500">XS button</a>
  <a href="#" class="inline-block bg-gray-600 font-semibold text-sm rounded-lg py-4 px-5 lg:px-8 text-white hover:bg-gray-500">Small button</a>
  <a href="#" class="inline-block bg-gray-600 font-semibold rounded-lg py-4 px-5 lg:px-8 text-white hover:bg-gray-500">Default button</a>
  <a href="#" class="inline-block bg-gray-600 font-semibold text-lg rounded-lg py-4 px-5 lg:px-8 text-white hover:bg-gray-500">Large button</a>
  <a href="#" class="inline-block bg-gray-600 font-semibold text-xl rounded-lg py-5 px-5 lg:px-10 text-white hover:bg-gray-500">XL button</a>
</div>
            
          
        