Aufgabe

Mit den Tailwind CSS-Utilities für Farben, Rahmen und Schatten eine gestaltete Kartenkomponente mit folgenden Vorgaben erstellen:

1. Der äußere Container soll haben:
   • Einen weißen Hintergrund;
   • Einen mittleren Schatten.
2. Die Karte soll enthalten:
   • Eine Überschrift (h2) mit einer Textgröße von 2xl und einer Textfarbe von gray-900;
   • Einen Absatz (p) mit einer Textfarbe von gray-700.
3. Innerhalb der Karte eine umrandete Box erstellen mit:
   • Einem hellblauen Hintergrund (z. B. blue-50);
   • Blauer Rahmenfarbe;
   • Mittel abgerundeten Ecken;
   • Textfarbe blue-700.
4. Eine weitere Box hinzufügen mit:
   • Einem hellgrünen Hintergrund (z. B. green-100);
   • Grüner Rahmenfarbe;
   • Abgerundeten Ecken;
   • Kleinem Schatten;
   • Textfarbe green-700.

1. Hintergrundfarben: Verwendung von bg-white, bg-blue-50, bg-green-100 für Hintergrundfarben;
2. Textfarben: Verwendung von text-gray-900, text-gray-700, text-blue-700, text-green-700 für Textfarben;
3. Rahmenfarben: Verwendung von border-blue-500, border-green-500 für Rahmenfarben;
4. Abgerundete Ecken: Verwendung von rounded-md, rounded für abgerundete Ecken;
5. Schatten: Verwendung von shadow-md, shadow-sm für Schatten;
6. Textgröße: Verwendung von text-2xl für die Überschriftengröße.