<div className="p-2">
<button
type="button"
class="text-white bg-gradient-to-br from-[#103CE7] to-[#64E9FF] hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 font-bold rounded-lg text-lg px-5 py-2.5 text-center me-2 mb-2"
>
Mojito
</button>
<button
type="button"
class="text-black bg-gradient-to-r from-[#2DFFF5] to-[#FFF878] hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-bold rounded-lg text-lg px-5 py-2.5 text-center me-2 mb-2"
>
Lime
</button>
<button
type="button"
class="text-white bg-gradient-to-br from-[#6157FF] to-[#EE49FD] hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800 font-bold rounded-lg text-lg px-5 py-2.5 text-center me-2 mb-2"
>
Neon
</button>
<button
type="button"
class="text-white bg-gradient-to-r from-[#FF4066] to-[#FFF16A] hover:bg-gradient-to-l focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800 font-bold rounded-lg text-lg px-5 py-2.5 text-center me-2 mb-2"
>
Butterfly
</button>
<button
type="button"
class="text-white bg-gradient-to-br from-[#0700DE] to-[#DDFFC9] hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800 font-bold rounded-lg text-lg px-5 py-2.5 text-center me-2 mb-2"
>
Malibu
</button>
<button
type="button"
class="text-gray-900 bg-gradient-to-r from-[#FF8473] to-[#FFF9D2] hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-teal-700 font-bold rounded-lg text-lg px-5 py-2.5 text-center me-2 mb-2"
>
Peach
</button>
<button
type="button"
class="text-gray-900 bg-gradient-to-r from-[#0172AF] to-[#74FEBD] hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400 font-bold rounded-lg text-lg px-5 py-2.5 text-center me-2 mb-2"
>
Azure
</button>
</div>
