Tailwind CSS Buttons

buttons.html

<div class="h-screen mt-3">
<div class="flex flex-wrap justify-center items-center gap-y-3 gap-x-3">

<button type="button" class="focus:ring-rose inline-flex items-center px-4 py-2 hover:text-rose-500 text-rose-500 active:text-rose-500 text-sm font-medium  active:bg-rose-100 bg-white hover:bg-rose-50 border focus:border-rose-500 focus:ring ring-rose-300 border-rose-300 rounded-md focus:outline-none transition"><svg xmlns="http://www.w3.org/2000/svg" class="-ml-1 mr-2 w-5 h-5 dark:text-rose-300 text-rose-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
Delete
</button>

<button type="button" class="focus:ring-rose inline-flex items-center px-4 py-2 hover:text-orange-500 text-orange-500 active:text-orange-500 text-sm font-medium  active:bg-orange-100 bg-white hover:bg-orange-50 border focus:border-orange-500 focus:ring ring-orange-300 border-orange-300 rounded-md focus:outline-none transition"><svg xmlns="http://www.w3.org/2000/svg" class="-ml-1 mr-2 w-5 h-5 dark:text-orange-300 text-orange-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" /></svg>
Archive
</button>

<button type="button" class="focus:ring-sky inline-flex items-center px-4 py-2 hover:text-sky-500 text-sky-500 active:text-sky-500 text-sm font-medium  active:bg-sky-100 bg-white hover:bg-sky-50 border focus:border-sky-500 focus:ring ring-sky-300 border-sky-300 rounded-md focus:outline-none transition"><svg xmlns="http://www.w3.org/2000/svg" class="-ml-1 mr-2 w-5 h-5 dark:text-sky-300 text-sky-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z" /></svg>
Folders
</button>

<button type="button" class="focus:ring-blue inline-flex items-center px-4 py-2 hover:text-blue-500 text-blue-500 active:text-blue-500 text-sm font-medium  active:bg-blue-100 bg-white hover:bg-blue-50 border focus:border-blue-500 focus:ring ring-blue-300 border-blue-300 rounded-md focus:outline-none transition"><svg xmlns="http://www.w3.org/2000/svg" class="-ml-1 mr-2 w-5 h-5 dark:text-blue-300 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
Download
</button>

<button type="button" class="focus:ring-purple inline-flex items-center px-4 py-2 hover:text-purple-500 text-purple-500 active:text-purple-500 text-sm font-medium  active:bg-purple-100 bg-white hover:bg-purple-50 border focus:border-purple-500 focus:ring ring-purple-300 border-purple-300 rounded-md focus:outline-none transition"><svg xmlns="http://www.w3.org/2000/svg" class="-ml-1 mr-2 w-5 h-5 dark:text-purple-300 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" /></svg>
Duplicate
</button>

<button type="button" class="focus:ring-gray inline-flex items-center px-2 py-2 hover:text-gray-500 text-gray-500 active:text-gray-500 text-sm font-medium  active:bg-gray-100 bg-white hover:bg-gray-50 border focus:border-gray-500 focus:ring ring-gray-300 border-gray-300 rounded-md focus:outline-none transition"><svg xmlns="http://www.w3.org/2000/svg" class=" w-5 h-5 dark:text-gray-300 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z"/></svg>
</button>

<button type="button" class="focus:ring-gray inline-flex items-center px-2 py-2 hover:text-gray-500 text-gray-500 active:text-gray-500 text-sm font-medium  active:bg-gray-100 bg-white hover:bg-gray-50 border focus:border-gray-500 focus:ring ring-gray-300 border-gray-300 rounded-md focus:outline-none transition"><svg xmlns="http://www.w3.org/2000/svg" class=" w-5 h-5 dark:text-gray-300 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
</button>

<button type="button" class="focus:ring-gray inline-flex items-center px-2 py-2 hover:text-gray-500 text-gray-500 active:text-gray-500 text-sm font-medium  active:bg-gray-100 bg-white hover:bg-gray-50 border focus:border-gray-500 focus:ring ring-gray-300 border-gray-300 rounded-md focus:outline-none transition"><svg xmlns="http://www.w3.org/2000/svg" class=" w-5 h-5 dark:text-gray-300 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 11l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18 9 9 0 010-18z" /></svg>
</button>

<button type="button" class="focus:ring-gray inline-flex items-center px-2 py-2 hover:text-gray-500 text-gray-500 active:text-gray-500 text-sm font-medium  active:bg-gray-100 bg-white hover:bg-gray-50 border focus:border-gray-500 focus:ring ring-gray-300 border-gray-300 rounded-md focus:outline-none transition"><svg xmlns="http://www.w3.org/2000/svg" class=" w-5 h-5 dark:text-gray-300 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z" /></svg>
</button>

<div class="flex justify-center items-center h-screen gap-3">
  <button type="button" class="py-2 px-4 bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 text-white transition ease-in duration-200 text-center text-sm font-medium shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-md">Indigo</button>
</div>


</div>
</div>
</div>