Utmaning: Bygg Kortkomponent
Uppgift
Använd Tailwind CSS för att skapa en kortkomponent med följande krav:
- Kortet ska ha:
- En maximal bredd av
md
; - Rundade hörn;
- En bakgrundsfärg.
- En maximal bredd av
- 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.
- Lägg till märken på kortet med:
- Rundade hörn och liten teckenstorlek.
index.html
- 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
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 3. Kapitel 4
Fråga AI
Fråga AI
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
Utmaning: Bygg Kortkomponent
Svep för att visa menyn
Uppgift
Använd Tailwind CSS för att skapa en kortkomponent med följande krav:
- Kortet ska ha:
- En maximal bredd av
md
; - Rundade hörn;
- En bakgrundsfärg.
- En maximal bredd av
- 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.
- Lägg till märken på kortet med:
- Rundade hörn och liten teckenstorlek.
index.html
- 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
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 3. Kapitel 4