Aufgabe

Mit Tailwind CSS eine Schaltfläche erstellen, die folgende Anforderungen erfüllt:

1. Die Schaltfläche soll einen blauen Hintergrund haben (z. B. bg-blue-500);
2. Beim Überfahren mit der Maus soll sich die Hintergrundfarbe in einen dunkleren Blauton ändern (z. B. bg-blue-700);
3. Beim Fokus soll die Schaltfläche eine gelbe Hintergrundfarbe erhalten (z. B. bg-yellow-500);
4. Beim Aktivieren (gedrückt) soll sich die Hintergrundfarbe in einen noch dunkleren Blauton ändern (z. B. bg-blue-900);
5. Im deaktivierten Zustand soll die Schaltfläche mit 50% Deckkraft und einem Cursor angezeigt werden, der signalisiert, dass sie nicht anklickbar ist.

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