Challenge: Styling Buttons

Task

Using Tailwind CSS, create a button that meets the following requirements:

1. The button should have a blue background (e.g. bg-blue-500);
2. When hovered over, the background color should change to a darker shade of blue (e.g. bg-blue-700);
3. When focused, the button should have a yellow background color (e.g., bg-yellow-500);
4. When active (pressed), the background color should change to an even darker shade of blue (e.g. bg-blue-900);
5. When disabled, the button should appear with 50% opacity and a cursor that indicates it is not clickable.

• Use hover:bg-blue-700 for hover state;
• Use focus:bg-yellow-500 for focus state;
• Use active:bg-blue-900 for active state;
• Use opacity-50 cursor-not-allowed for disabled state.