## Oppgave
Bruk Tailwind CSS til å lage en kortkomponent med følgende krav:
1. Kortet skal ha:
   - Maksimal bredde `md`;
   - Avrundede hjørner;
   - Bakgrunnsfarge.
2. Kortet skal inneholde:
   - Et bilde som dekker hele bredden av kortet;
   - En tittel med fet skrift og stor skriftstørrelse;
   - Et avsnitt med grunnleggende skriftstørrelse og kursiv stil.
3. Legg til merker på kortet med:
   - Avrundede hjørner og liten skriftstørrelse.


PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBDYXJkcyAtIFRhc2s8L3RpdGxlPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0ibWF4LXctX19fX18gX19fX18gb3ZlcmZsb3ctaGlkZGVuIHNoYWRvdy1sZyBfX19fXy1wdXJwbGUtMTAwIj4KICAgICAgPGltZwogICAgICAgIGNsYXNzPSJfX19fXy1fX19fXyIKICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvNjE1NTY3ZGEtYjA1My00Njc0LWI4OWMtMDUzMDU3ZDJiY2E3L3NlY3Rpb24tMy9mYW4ucG5nIgogICAgICAgIGFsdD0iU2FtcGxlIEltYWdlIgogICAgICAvPgogICAgICA8ZGl2IGNsYXNzPSJweC02IHB5LTQiPgogICAgICAgIDxoMiBjbGFzcz0iZm9udC1fX19fXyB0ZXh0LV9fX19fIHRleHQtcHVycGxlLTkwMCBtYi0yIj5DYXJkIFRpdGxlPC9oMj4KICAgICAgICA8cCBjbGFzcz0idGV4dC1wdXJwbGUtNzAwIHRleHQtX19fX18gX19fX18iPgogICAgICAgICAgVGhpcyBpcyBhIHNpbXBsZSBjYXJkIGNvbXBvbmVudCBjcmVhdGVkIHVzaW5nIFRhaWx3aW5kIENTUy4gSXQKICAgICAgICAgIGluY2x1ZGVzIGFuIGltYWdlLCBhIHRpdGxlLCBzb21lIHRleHQsIGFuZCBhY3Rpb25zLgogICAgICAgIDwvcD4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InB4LTYgcHQtNCBwYi0yIj4KICAgICAgICA8c3BhbgogICAgICAgICAgY2xhc3M9ImlubGluZS1ibG9jayBiZy15ZWxsb3ctMjAwIF9fX19fLWZ1bGwgcHgtMyBweS0xIHRleHQtX19fX18gZm9udC1zZW1pYm9sZCB0ZXh0LXllbGxvdy03MDAgbXItMiBtYi0yIgogICAgICAgICAgPiN0YWcxPC9zcGFuCiAgICAgICAgPgogICAgICAgIDxzcGFuCiAgICAgICAgICBjbGFzcz0iaW5saW5lLWJsb2NrIGJnLXBpbmstMjAwIF9fX19fLWZ1bGwgcHgtMyBweS0xIHRleHQtX19fX18gZm9udC1zZW1pYm9sZCB0ZXh0LXBpbmstNzAwIG1yLTIgbWItMiIKICAgICAgICAgID4jdGFnMjwvc3BhbgogICAgICAgID4KICAgICAgICA8c3BhbgogICAgICAgICAgY2xhc3M9ImlubGluZS1ibG9jayBiZy1ncmVlbi0yMDAgX19fX18tZnVsbCBweC0zIHB5LTEgdGV4dC1fX19fXyBmb250LXNlbWlib2xkIHRleHQtZ3JlZW4tNzAwIG1yLTIgbWItMiIKICAgICAgICAgID4jdGFnMzwvc3BhbgogICAgICAgID4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InB4LTYgcHQtNCBwYi0yIj4KICAgICAgICA8YnV0dG9uCiAgICAgICAgICBjbGFzcz0iYmctYmx1ZS01MDAgaG92ZXI6YmctYmx1ZS03MDAgdGV4dC13aGl0ZSBmb250LWJvbGQgcHktMiBweC00IHJvdW5kZWQiCiAgICAgICAgPgogICAgICAgICAgQWN0aW9uIDEKICAgICAgICA8L2J1dHRvbj4KICAgICAgICA8YnV0dG9uCiAgICAgICAgICBjbGFzcz0iYmctcmVkLTUwMCBob3ZlcjpiZy1yZWQtNzAwIHRleHQtd2hpdGUgZm9udC1ib2xkIHB5LTIgcHgtNCByb3VuZGVkIG1sLTIiCiAgICAgICAgPgogICAgICAgICAgQWN0aW9uIDIKICAgICAgICA8L2J1dHRvbj4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

- Bruk `max-w-md` for å sette maksimal bredde på kortet;
- Bruk `rounded` for å legge til avrundede hjørner på kortet;
- Bruk `bg-purple-100` for å sette bakgrunnsfarge på kortet;
- Bruk `w-full` for å la bildet dekke hele bredden av kortet;
- Bruk `font-bold` for å gjøre teksten fet;
- Bruk `text-xl` for å sette større skriftstørrelse på tittelen;
- Bruk `text-base` for å sette grunnleggende skriftstørrelse på avsnittsteksten;
- Bruk `italic` for å gjøre teksten kursiv;
- Bruk `rounded-full` for å legge til avrundede hjørner på merkene;
- Bruk `text-sm` for å sette liten skriftstørrelse på merkene.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBDYXJkcyAtIFNvbHV0aW9uPC90aXRsZT4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi50YWlsd2luZGNzcy5jb20iPjwvc2NyaXB0PgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9Im1heC13LW1kIHJvdW5kZWQgb3ZlcmZsb3ctaGlkZGVuIHNoYWRvdy1sZyBiZy1wdXJwbGUtMTAwIj4KICAgICAgPGltZwogICAgICAgIGNsYXNzPSJ3LWZ1bGwiCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzLzYxNTU2N2RhLWIwNTMtNDY3NC1iODljLTA1MzA1N2QyYmNhNy9zZWN0aW9uLTMvZmFuLnBuZyIKICAgICAgICBhbHQ9IlNhbXBsZSBJbWFnZSIKICAgICAgLz4KICAgICAgPGRpdiBjbGFzcz0icHgtNiBweS00Ij4KICAgICAgICA8aDIgY2xhc3M9ImZvbnQtYm9sZCB0ZXh0LXhsIHRleHQtcHVycGxlLTkwMCBtYi0yIj5DYXJkIFRpdGxlPC9oMj4KICAgICAgICA8cCBjbGFzcz0idGV4dC1wdXJwbGUtNzAwIHRleHQtYmFzZSBpdGFsaWMiPgogICAgICAgICAgVGhpcyBpcyBhIHNpbXBsZSBjYXJkIGNvbXBvbmVudCBjcmVhdGVkIHVzaW5nIFRhaWx3aW5kIENTUy4gSXQKICAgICAgICAgIGluY2x1ZGVzIGFuIGltYWdlLCBhIHRpdGxlLCBzb21lIHRleHQsIGFuZCBhY3Rpb25zLgogICAgICAgIDwvcD4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InB4LTYgcHQtNCBwYi0yIj4KICAgICAgICA8c3BhbgogICAgICAgICAgY2xhc3M9ImlubGluZS1ibG9jayBiZy15ZWxsb3ctMjAwIHJvdW5kZWQtZnVsbCBweC0zIHB5LTEgdGV4dC1zbSBmb250LXNlbWlib2xkIHRleHQteWVsbG93LTcwMCBtci0yIG1iLTIiCiAgICAgICAgICA+I3RhZzE8L3NwYW4KICAgICAgICA+CiAgICAgICAgPHNwYW4KICAgICAgICAgIGNsYXNzPSJpbmxpbmUtYmxvY2sgYmctcGluay0yMDAgcm91bmRlZC1mdWxsIHB4LTMgcHktMSB0ZXh0LXNtIGZvbnQtc2VtaWJvbGQgdGV4dC1waW5rLTcwMCBtci0yIG1iLTIiCiAgICAgICAgICA+I3RhZzI8L3NwYW4KICAgICAgICA+CiAgICAgICAgPHNwYW4KICAgICAgICAgIGNsYXNzPSJpbmxpbmUtYmxvY2sgYmctZ3JlZW4tMjAwIHJvdW5kZWQtZnVsbCBweC0zIHB5LTEgdGV4dC1zbSBmb250LXNlbWlib2xkIHRleHQtZ3JlZW4tNzAwIG1yLTIgbWItMiIKICAgICAgICAgID4jdGFnMzwvc3BhbgogICAgICAgID4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InB4LTYgcHQtNCBwYi0yIj4KICAgICAgICA8YnV0dG9uCiAgICAgICAgICBjbGFzcz0iYmctYmx1ZS01MDAgaG92ZXI6YmctYmx1ZS03MDAgdGV4dC13aGl0ZSBmb250LWJvbGQgcHktMiBweC00IHJvdW5kZWQiCiAgICAgICAgPgogICAgICAgICAgQWN0aW9uIDEKICAgICAgICA8L2J1dHRvbj4KICAgICAgICA8YnV0dG9uCiAgICAgICAgICBjbGFzcz0iYmctcmVkLTUwMCBob3ZlcjpiZy1yZWQtNzAwIHRleHQtd2hpdGUgZm9udC1ib2xkIHB5LTIgcHgtNCByb3VuZGVkIG1sLTIiCiAgICAgICAgPgogICAgICAgICAgQWN0aW9uIDIKICAgICAgICA8L2J1dHRvbj4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

Lær å style nettsteder effektivt med Tailwind CSS, et utility-first rammeverk for rask UI-utvikling. Oppdag hvordan du setter opp Tailwind og bruker utility-klasser for farger, typografi, kanter og skygger. Bygg og style essensielle komponenter som knapper, kort og skjemaer. Behersk layoutteknikker ved hjelp av avstand, flexbox og grid-verktøy. Lag responsive design og tilpass Tailwind etter prosjektets behov.

Bli kjent med Tailwind CSS, et verktøybasert rammeverk kjent for sin fleksibilitet og effektivitet innen webdesign. Oppdag de viktigste fordelene og den verktøybaserte filosofien. Utforsk også enkle installasjonsmetoder ved bruk av CDN eller npm/yarn.

Utforsk de grunnleggende elementene i Tailwind CSS, inkludert forståelse av verktøyklasser og deres bruk på HTML-elementer. Gå i dybden på essensielle stylingteknikker som fargeinnstillinger, kanter, skygger og typografi-verktøy.

Fordypning i praktiske anvendelser med fokus på å lage og style knapper, skjemaer og kort. Gjennom praktiske utfordringer vil du mestre å bygge disse essensielle UI-komponentene og styrke ferdighetene dine med eksempler fra virkeligheten.

Utforsk Tailwind CSS sine grunnleggende verktøy for avstand, inkludert bruk av margin og padding på elementer. Lær å bruke flexbox-verktøy for å kontrollere layout med display-innstillinger, flex-retning samt horisontal og vertikal justering. I tillegg får du innsikt i grid-verktøy for å lage enkle, men kraftige grid-layouts, med fokus på oppsett av grid-containere og elementer.

Lær hvordan du kan tilpasse Tailwind CSS for å oppfylle prosjektets designkrav og lage fleksible oppsett for ulike enheter.

Utfordring: Bygg Kortkomponent

Oppgave

Awesome!

Utfordring: Bygg Kortkomponent

Oppgave