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.