Tarefa

Utilizando Tailwind CSS, crie um botão que atenda aos seguintes requisitos:

1. O botão deve ter um fundo azul (por exemplo, bg-blue-500);
2. Ao passar o mouse sobre o botão, a cor de fundo deve mudar para um tom mais escuro de azul (por exemplo, bg-blue-700);
3. Quando estiver em foco, o botão deve ter a cor de fundo amarela (por exemplo, bg-yellow-500);
4. Quando estiver ativo (pressionado), a cor de fundo deve mudar para um tom ainda mais escuro de azul (por exemplo, bg-blue-900);
5. Quando desabilitado, o botão deve aparecer com 50% de opacidade e um cursor que indique que não é clicável.

• Utilizar hover:bg-blue-700 para o estado de foco do mouse;
• Utilizar focus:bg-yellow-500 para o estado de foco por teclado;
• Utilizar active:bg-blue-900 para o estado ativo;
• Utilizar opacity-50 cursor-not-allowed para o estado desabilitado.