Tarea

Utilizando Tailwind CSS, crear un botón que cumpla con los siguientes requisitos:

1. El botón debe tener un fondo azul (por ejemplo, bg-blue-500);
2. Al pasar el cursor sobre el botón, el color de fondo debe cambiar a un tono más oscuro de azul (por ejemplo, bg-blue-700);
3. Al recibir el foco, el botón debe tener un color de fondo amarillo (por ejemplo, bg-yellow-500);
4. Al estar activo (presionado), el color de fondo debe cambiar a un tono aún más oscuro de azul (por ejemplo, bg-blue-900);
5. Cuando esté deshabilitado, el botón debe mostrarse con un 50% de opacidad y un cursor que indique que no es clickeable.

• Utilizar hover:bg-blue-700 para el estado hover;
• Utilizar focus:bg-yellow-500 para el estado focus;
• Utilizar active:bg-blue-900 para el estado active;
• Utilizar opacity-50 cursor-not-allowed para el estado disabled.