Herausforderung: Schaltflächen

Aufgabe

Verwenden Sie Tailwind CSS, um eine Schaltfläche zu erstellen, die die folgenden Anforderungen erfüllt:

1. Die Schaltfläche sollte einen blauen Hintergrund haben (z.B. bg-blue-500);
2. Beim Überfahren mit der Maus sollte sich die Hintergrundfarbe in einen dunkleren Blauton ändern (z.B. bg-blue-700);
3. Wenn sie fokussiert ist, sollte die Schaltfläche eine gelbe Hintergrundfarbe haben (z.B. bg-yellow-500);
4. Wenn sie aktiv (gedrückt) ist, sollte sich die Hintergrundfarbe in einen noch dunkleren Blauton ändern (z.B. bg-blue-900);
5. Wenn sie deaktiviert ist, sollte die Schaltfläche mit 50% Deckkraft erscheinen und einen Cursor haben, der anzeigt, dass sie nicht anklickbar ist.

• Verwenden Sie hover:bg-blue-700 für den Hover-Zustand;
• Verwenden Sie focus:bg-yellow-500 für den Fokus-Zustand;
• Verwenden Sie active:bg-blue-900 für den aktiven Zustand;
• Verwenden Sie opacity-50 cursor-not-allowed für den deaktivierten Zustand.