Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Utmaning: Bygg Kortkomponent | Bygga Grundläggande Komponenter
Tailwind CSS för webbutveckling

bookUtmaning: Bygg Kortkomponent

Uppgift

Använd Tailwind CSS för att skapa en kortkomponent med följande krav:

  1. Kortet ska ha:
    • En maximal bredd av md;
    • Rundade hörn;
    • En bakgrundsfärg.
  2. Kortet ska innehålla:
    • En bild som upptar hela kortets bredd;
    • En titel med fet stil och stor teckenstorlek;
    • Ett stycke med normal teckenstorlek och kursiv stil.
  3. Lägg till märken på kortet med:
    • Rundade hörn och liten teckenstorlek.
index.html

index.html

copy
  • Använd max-w-md för att ange kortets maximala bredd;
  • Använd rounded för att lägga till rundade hörn på kortet;
  • Använd bg-purple-100 för att ange kortets bakgrundsfärg;
  • Använd w-full för att göra bilden lika bred som kortet;
  • Använd font-bold för att göra texten fet;
  • Använd text-xl för att ange en större teckenstorlek för titeln;
  • Använd text-base för att ange normal teckenstorlek för stycket;
  • Använd italic för att göra texten kursiv;
  • Använd rounded-full för att lägga till rundade hörn på märkena;
  • Använd text-sm för att ange liten teckenstorlek för märkena.
index.html

index.html

copy
Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 4

Fråga AI

expand

Fråga AI

ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Suggested prompts:

Can you show me an example of the card component using these Tailwind classes?

What should the content (image, title, paragraph, badges) of the card be?

Can you explain how to add multiple badges to the card?

Awesome!

Completion rate improved to 3.57

bookUtmaning: Bygg Kortkomponent

Svep för att visa menyn

Uppgift

Använd Tailwind CSS för att skapa en kortkomponent med följande krav:

  1. Kortet ska ha:
    • En maximal bredd av md;
    • Rundade hörn;
    • En bakgrundsfärg.
  2. Kortet ska innehålla:
    • En bild som upptar hela kortets bredd;
    • En titel med fet stil och stor teckenstorlek;
    • Ett stycke med normal teckenstorlek och kursiv stil.
  3. Lägg till märken på kortet med:
    • Rundade hörn och liten teckenstorlek.
index.html

index.html

copy
  • Använd max-w-md för att ange kortets maximala bredd;
  • Använd rounded för att lägga till rundade hörn på kortet;
  • Använd bg-purple-100 för att ange kortets bakgrundsfärg;
  • Använd w-full för att göra bilden lika bred som kortet;
  • Använd font-bold för att göra texten fet;
  • Använd text-xl för att ange en större teckenstorlek för titeln;
  • Använd text-base för att ange normal teckenstorlek för stycket;
  • Använd italic för att göra texten kursiv;
  • Använd rounded-full för att lägga till rundade hörn på märkena;
  • Använd text-sm för att ange liten teckenstorlek för märkena.
index.html

index.html

copy
Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 3. Kapitel 4
some-alt