Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Udfordring: Opbyg Kortkomponent | Opbygning af Grundlæggende Komponenter
Tailwind CSS til Webudvikling

bookUdfordring: Opbyg Kortkomponent

Opgave

Ved brug af Tailwind CSS, opret et kort-komponent med følgende krav:

  1. Kortet skal have:
    • En maksimal bredde på md;
    • Afrundede hjørner;
    • En baggrundsfarve.
  2. Kortet skal indeholde:
    • Et billede, der fylder hele kortets bredde;
    • En titel med fed tekst og stor skrifttype;
    • Et afsnit med standardskrifttype og kursiv stil.
  3. Tilføj badges til kortet med:
    • Afrundede hjørner og lille skrifttype.
index.html

index.html

copy
  • Brug max-w-md for at sætte kortets maksimale bredde;
  • Brug rounded for at tilføje afrundede hjørner til kortet;
  • Brug bg-purple-100 for at sætte kortets baggrundsfarve;
  • Brug w-full for at billedet fylder hele kortets bredde;
  • Brug font-bold for at anvende fed skrift på teksten;
  • Brug text-xl for at sætte en større skrifttype til titlen;
  • Brug text-base for at sætte standardskrifttype til afsnitsteksten;
  • Brug italic for at anvende kursiv stil på teksten;
  • Brug rounded-full for at tilføje afrundede hjørner til badges;
  • Brug text-sm for at sætte lille skrifttype til badges.
index.html

index.html

copy
Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 3. Kapitel 4

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Awesome!

Completion rate improved to 3.57

bookUdfordring: Opbyg Kortkomponent

Stryg for at vise menuen

Opgave

Ved brug af Tailwind CSS, opret et kort-komponent med følgende krav:

  1. Kortet skal have:
    • En maksimal bredde på md;
    • Afrundede hjørner;
    • En baggrundsfarve.
  2. Kortet skal indeholde:
    • Et billede, der fylder hele kortets bredde;
    • En titel med fed tekst og stor skrifttype;
    • Et afsnit med standardskrifttype og kursiv stil.
  3. Tilføj badges til kortet med:
    • Afrundede hjørner og lille skrifttype.
index.html

index.html

copy
  • Brug max-w-md for at sætte kortets maksimale bredde;
  • Brug rounded for at tilføje afrundede hjørner til kortet;
  • Brug bg-purple-100 for at sætte kortets baggrundsfarve;
  • Brug w-full for at billedet fylder hele kortets bredde;
  • Brug font-bold for at anvende fed skrift på teksten;
  • Brug text-xl for at sætte en større skrifttype til titlen;
  • Brug text-base for at sætte standardskrifttype til afsnitsteksten;
  • Brug italic for at anvende kursiv stil på teksten;
  • Brug rounded-full for at tilføje afrundede hjørner til badges;
  • Brug text-sm for at sætte lille skrifttype til badges.
index.html

index.html

copy
Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 3. Kapitel 4
some-alt