Docs TailwindCSS

<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2.5 px-5 rounded-lg shadow-sm transition-colors duration-300">
  Simpan Data
</button>

<button class="border-2 border-gray-300 text-gray-700 hover:bg-gray-50 hover:border-gray-400 font-semibold py-2 px-5 rounded-lg transition-all duration-300">
  Batalkan
</button>

<button class="bg-red-500 hover:bg-red-600 text-white font-semibold py-2.5 px-5 rounded-lg shadow-sm focus:ring-4 focus:ring-red-300 transition-all duration-300">
  Hapus Permanen
</button>

<button class="flex items-center gap-2 bg-gray-800 hover:bg-gray-900 text-white font-semibold py-2.5 px-5 rounded-lg transition-colors duration-300">
  <i class="fa-solid fa-cloud-arrow-down"></i>
  Unduh Laporan
</button>

<button class="flex items-center gap-2 bg-emerald-500 hover:bg-emerald-600 text-white font-semibold py-2.5 px-5 rounded-lg transition-colors duration-300">
  Lanjutkan
  <i class="fa-solid fa-arrow-right"></i>
</button>

<button class="flex items-center justify-center w-12 h-12 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full shadow-lg transition-transform hover:scale-110 duration-300">
  <i class="fa-solid fa-plus text-xl"></i>
</button>

<button class="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold py-3 px-6 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300">
  Mulai Eksplorasi
</button>

<button class="bg-white text-gray-800 font-semibold py-2.5 px-6 rounded-xl shadow-[0_4px_10px_rgb(0,0,0,0.05)] hover:shadow-[0_4px_15px_rgb(0,0,0,0.1)] border border-gray-100 transition-shadow duration-300">
  Lihat Detail
</button>

<button class="relative flex items-center justify-center bg-orange-500 text-white font-bold py-3 px-6 rounded-lg">
  <span class="absolute inline-flex h-full w-full rounded-lg bg-orange-400 opacity-75 animate-pulse"></span>
  <span class="relative">Klaim Promo Sekarang</span>
</button>