Herausforderung: Grundlegendes Styling

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.