Aufgabe

Verwenden Sie die Tailwind CSS-Dienstprogramme für Farben, Ränder und Schatten, um eine gestylte Kartenkomponente mit den folgenden Spezifikationen zu erstellen:

1. Der äußere Container sollte haben:

   • Eine weiße Hintergrundfarbe;

   • Einen mittleren Schatten.

2. Die Karte sollte enthalten:

   • Eine Überschrift (h2) mit einer Textgröße von 2xl und einer Textfarbe von grau-900;

   • Einen Absatz (p) mit einer Textfarbe von grau-700.

3. Erstellen Sie innerhalb der Karte ein umrandetes Feld mit:

   • Einer hellblauen Hintergrundfarbe (z.B. blau-50);

   • Blauer Randfarbe;

   • Mittel abgerundeten Ecken;

   • Textfarbe von blau-700.

4. Fügen Sie ein weiteres Feld hinzu mit:

   • Einer hellgrünen Hintergrundfarbe (z.B. grün-100);

   • Grüner Randfarbe;

   • Abgerundeten Ecken;

   • Kleinem Schatten;

   • Textfarbe von grün-700.

1. Hintergrundfarben: Verwenden Sie bg-white, bg-blue-50, bg-green-100 für Hintergrundfarben;

2. Textfarben: Verwenden Sie text-gray-900, text-gray-700, text-blue-700, text-green-700 für Textfarben;

3. Randfarben: Verwenden Sie border-blue-500, border-green-500 für Randfarben;

4. Randradius: Verwenden Sie rounded-md, rounded für abgerundete Ecken;

5. Schatten: Verwenden Sie shadow-md, shadow-sm für Schatten;

6. Textgröße: Verwenden Sie text-2xl für die Überschriftengröße.