Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Herausforderung: Karten | Grundlegende Komponenten Erstellen
Tailwind CSS für Webentwicklung

bookHerausforderung: Karten

Aufgabe

Verwenden Sie Tailwind CSS, um eine Kartenkomponente mit den folgenden Anforderungen zu erstellen:

  1. Die Karte sollte haben:
    • Eine maximale Breite von md;
    • Abgerundete Ecken;
    • Eine Hintergrundfarbe.
  2. Die Karte sollte enthalten:
    • Ein Bild, das die volle Breite der Karte einnimmt;
    • Einen Titel mit fettgedrucktem Text und großer Schriftgröße;
    • Einen Absatz mit Standard-Schriftgröße und kursivem Stil.
  3. Fügen Sie der Karte Abzeichen hinzu mit:
    • Abgerundeten Ecken und kleiner Schriftgröße.
index.html

index.html

copy
  • Verwenden Sie max-w-md, um die maximale Breite der Karte festzulegen;
  • Verwenden Sie rounded, um abgerundete Ecken zur Karte hinzuzufügen;
  • Verwenden Sie bg-purple-100, um die Hintergrundfarbe der Karte festzulegen;
  • Verwenden Sie w-full, damit das Bild die volle Breite der Karte einnimmt;
  • Verwenden Sie font-bold, um den Text fett zu formatieren;
  • Verwenden Sie text-xl, um eine größere Schriftgröße für den Titel festzulegen;
  • Verwenden Sie text-base, um die Basis-Schriftgröße für den Absatztext festzulegen;
  • Verwenden Sie italic, um den Text kursiv zu formatieren;
  • Verwenden Sie rounded-full, um den Abzeichen abgerundete Ecken hinzuzufügen;
  • Verwenden Sie text-sm, um die kleine Schriftgröße für die Abzeichen festzulegen.
index.html

index.html

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 4

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 3.57

bookHerausforderung: Karten

Swipe um das Menü anzuzeigen

Aufgabe

Verwenden Sie Tailwind CSS, um eine Kartenkomponente mit den folgenden Anforderungen zu erstellen:

  1. Die Karte sollte haben:
    • Eine maximale Breite von md;
    • Abgerundete Ecken;
    • Eine Hintergrundfarbe.
  2. Die Karte sollte enthalten:
    • Ein Bild, das die volle Breite der Karte einnimmt;
    • Einen Titel mit fettgedrucktem Text und großer Schriftgröße;
    • Einen Absatz mit Standard-Schriftgröße und kursivem Stil.
  3. Fügen Sie der Karte Abzeichen hinzu mit:
    • Abgerundeten Ecken und kleiner Schriftgröße.
index.html

index.html

copy
  • Verwenden Sie max-w-md, um die maximale Breite der Karte festzulegen;
  • Verwenden Sie rounded, um abgerundete Ecken zur Karte hinzuzufügen;
  • Verwenden Sie bg-purple-100, um die Hintergrundfarbe der Karte festzulegen;
  • Verwenden Sie w-full, damit das Bild die volle Breite der Karte einnimmt;
  • Verwenden Sie font-bold, um den Text fett zu formatieren;
  • Verwenden Sie text-xl, um eine größere Schriftgröße für den Titel festzulegen;
  • Verwenden Sie text-base, um die Basis-Schriftgröße für den Absatztext festzulegen;
  • Verwenden Sie italic, um den Text kursiv zu formatieren;
  • Verwenden Sie rounded-full, um den Abzeichen abgerundete Ecken hinzuzufügen;
  • Verwenden Sie text-sm, um die kleine Schriftgröße für die Abzeichen festzulegen.
index.html

index.html

copy

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 4
some-alt