## Oppgave
Bruk Tailwind CSS for å fullføre styling av et skjema med input-felt, tekstområder, radioknapper og en bryter.

Fyll inn de tomme feltene med riktige Tailwind CSS-klasser for å oppnå ønsket utseende.
- **Input-felt og tekstområder**:
   - Lys grå kant (`border-gray-300`);
   - Medium avrundede hjørner (`rounded-md`);
   - Fokus-tilstand med blå ring (`focus:ring-2` og `focus:ring-blue-500`).
- **Send-knapp**:
   - Primær blå bakgrunn (`bg-blue-500`);
   - Mørkere blå ved hover (`hover:bg-blue-700`);
   - Avrundede hjørner (`rounded`);
   - Fokus-tilstand med ring (`focus:outline-none`, `focus:ring-2` og `focus:ring-blue-500`).

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBGb3JtcyAtIFRhc2s8L3RpdGxlPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5IGNsYXNzPSJiZy1ncmF5LTEwMCBwLTgiPgogICAgPGRpdiBjbGFzcz0ibWF4LXctbWQgbXgtYXV0byBtdC0xMCBwLTYgYmctd2hpdGUgc2hhZG93LW1kIHJvdW5kZWQtbGciPgogICAgICA8Zm9ybT4KICAgICAgICA8IS0tIFRleHQgSW5wdXQgLS0+CiAgICAgICAgPGRpdiBjbGFzcz0ibWItNCI+CiAgICAgICAgICA8bGFiZWwKICAgICAgICAgICAgY2xhc3M9ImJsb2NrIHRleHQtZ3JheS03MDAgdGV4dC1zbSBmb250LWJvbGQgbWItMiIKICAgICAgICAgICAgZm9yPSJ1c2VybmFtZSIKICAgICAgICAgID4KICAgICAgICAgICAgVXNlcm5hbWUKICAgICAgICAgIDwvbGFiZWw+CiAgICAgICAgICA8aW5wdXQKICAgICAgICAgICAgY2xhc3M9InNoYWRvdyBhcHBlYXJhbmNlLW5vbmUgYm9yZGVyIF9fX19fIF9fX19fIHAtMiB3LWZ1bGwgZm9jdXM6X19fX18gZm9jdXM6X19fX18iCiAgICAgICAgICAgIGlkPSJ1c2VybmFtZSIKICAgICAgICAgICAgdHlwZT0idGV4dCIKICAgICAgICAgICAgcGxhY2Vob2xkZXI9IkVudGVyIHlvdXIgdXNlcm5hbWUiCiAgICAgICAgICAvPgogICAgICAgIDwvZGl2PgogICAgICAgIDwhLS0gVGV4dGFyZWEgLS0+CiAgICAgICAgPGRpdiBjbGFzcz0ibWItNCI+CiAgICAgICAgICA8bGFiZWwKICAgICAgICAgICAgY2xhc3M9ImJsb2NrIHRleHQtZ3JheS03MDAgdGV4dC1zbSBmb250LWJvbGQgbWItMiIKICAgICAgICAgICAgZm9yPSJtZXNzYWdlIgogICAgICAgICAgPgogICAgICAgICAgICBNZXNzYWdlCiAgICAgICAgICA8L2xhYmVsPgogICAgICAgICAgPHRleHRhcmVhCiAgICAgICAgICAgIGNsYXNzPSJzaGFkb3cgYXBwZWFyYW5jZS1ub25lIGJvcmRlciBfX19fXyBfX19fXyBwLTIgdy1mdWxsIGZvY3VzOl9fX19fIGZvY3VzOl9fX19fIgogICAgICAgICAgICBpZD0ibWVzc2FnZSIKICAgICAgICAgICAgcm93cz0iNCIKICAgICAgICAgICAgcGxhY2Vob2xkZXI9IkVudGVyIHlvdXIgbWVzc2FnZSIKICAgICAgICAgID48L3RleHRhcmVhPgogICAgICAgIDwvZGl2PgogICAgICAgIDwhLS0gUmFkaW8gQnV0dG9ucyAtLT4KICAgICAgICA8ZGl2IGNsYXNzPSJtYi00Ij4KICAgICAgICAgIDxzcGFuIGNsYXNzPSJ0ZXh0LWdyYXktNzAwIj5HZW5kZXI8L3NwYW4+CiAgICAgICAgICA8ZGl2IGNsYXNzPSJtdC0yIj4KICAgICAgICAgICAgPGxhYmVsIGNsYXNzPSJpbmxpbmUtZmxleCBpdGVtcy1jZW50ZXIiPgogICAgICAgICAgICAgIDxpbnB1dAogICAgICAgICAgICAgICAgdHlwZT0icmFkaW8iCiAgICAgICAgICAgICAgICBjbGFzcz0iZm9ybS1yYWRpbyB0ZXh0LWJsdWUtNTAwIgogICAgICAgICAgICAgICAgbmFtZT0iZ2VuZGVyIgogICAgICAgICAgICAgICAgdmFsdWU9Im1hbGUiCiAgICAgICAgICAgICAgLz4KICAgICAgICAgICAgICA8c3BhbiBjbGFzcz0ibWwtMiI+TWFsZTwvc3Bhbj4KICAgICAgICAgICAgPC9sYWJlbD4KICAgICAgICAgICAgPGxhYmVsIGNsYXNzPSJpbmxpbmUtZmxleCBpdGVtcy1jZW50ZXIgbWwtNiI+CiAgICAgICAgICAgICAgPGlucHV0CiAgICAgICAgICAgICAgICB0eXBlPSJyYWRpbyIKICAgICAgICAgICAgICAgIGNsYXNzPSJmb3JtLXJhZGlvIHRleHQtYmx1ZS01MDAiCiAgICAgICAgICAgICAgICBuYW1lPSJnZW5kZXIiCiAgICAgICAgICAgICAgICB2YWx1ZT0iZmVtYWxlIgogICAgICAgICAgICAgIC8+CiAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9Im1sLTIiPkZlbWFsZTwvc3Bhbj4KICAgICAgICAgICAgPC9sYWJlbD4KICAgICAgICAgIDwvZGl2PgogICAgICAgIDwvZGl2PgogICAgICAgIDwhLS0gU3dpdGNoIC0tPgogICAgICAgIDxkaXYgY2xhc3M9Im1iLTQiPgogICAgICAgICAgPGxhYmVsIGNsYXNzPSJmbGV4IGl0ZW1zLWNlbnRlciI+CiAgICAgICAgICAgIDxzcGFuIGNsYXNzPSJtci0yIHRleHQtZ3JheS03MDAiPkVuYWJsZSBub3RpZmljYXRpb25zPC9zcGFuPgogICAgICAgICAgICA8aW5wdXQKICAgICAgICAgICAgICB0eXBlPSJjaGVja2JveCIKICAgICAgICAgICAgICBjbGFzcz0iZm9ybS1jaGVja2JveCBoLTYgdy02IHRleHQtZ3JlZW4tNTAwIgogICAgICAgICAgICAvPgogICAgICAgICAgPC9sYWJlbD4KICAgICAgICA8L2Rpdj4KICAgICAgICA8IS0tIFN1Ym1pdCBCdXR0b24gLS0+CiAgICAgICAgPGRpdiBjbGFzcz0ibWItNCI+CiAgICAgICAgICA8YnV0dG9uCiAgICAgICAgICAgIGNsYXNzPSJfX19fXyBob3ZlcjpfX19fXyB0ZXh0LXdoaXRlIGZvbnQtYm9sZCBweS0yIHB4LTQgX19fX18gZm9jdXM6X19fX18gZm9jdXM6X19fX18gZm9jdXM6X19fX18iCiAgICAgICAgICA+CiAgICAgICAgICAgIFN1Ym1pdAogICAgICAgICAgPC9idXR0b24+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvZm9ybT4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

1. **Kantfarge**: Bruk `border-gray-300` for en lys grå kant;
2. **Avrundede hjørner**: Bruk `rounded-md` for middels avrundede hjørner;
3. **Fokusring**: Bruk `focus:ring-2` for å legge til en ring ved fokus og `focus:ring-blue-500` for blå farge.
4. **Hover-effekt på send-knapp**: Bruk `hover:bg-blue-700` for en mørkere blåfarge ved hover;
5. **Fokusring på send-knapp**: Bruk `focus:outline-none` for å fjerne standard fokusramme, `focus:ring-2` for å legge til en ring ved fokus, og `focus:ring-blue-500` for å sette ringfargen.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBGb3JtcyAtIFNvbHV0aW9uPC90aXRsZT4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi50YWlsd2luZGNzcy5jb20iPjwvc2NyaXB0PgogIDwvaGVhZD4KICA8Ym9keSBjbGFzcz0iYmctZ3JheS0xMDAgcC04Ij4KICAgIDxkaXYgY2xhc3M9Im1heC13LW1kIG14LWF1dG8gbXQtMTAgcC02IGJnLXdoaXRlIHNoYWRvdy1tZCByb3VuZGVkLWxnIj4KICAgICAgPGZvcm0+CiAgICAgICAgPCEtLSBUZXh0IElucHV0IC0tPgogICAgICAgIDxkaXYgY2xhc3M9Im1iLTQiPgogICAgICAgICAgPGxhYmVsCiAgICAgICAgICAgIGNsYXNzPSJibG9jayB0ZXh0LWdyYXktNzAwIHRleHQtc20gZm9udC1ib2xkIG1iLTIiCiAgICAgICAgICAgIGZvcj0idXNlcm5hbWUiCiAgICAgICAgICA+CiAgICAgICAgICAgIFVzZXJuYW1lCiAgICAgICAgICA8L2xhYmVsPgogICAgICAgICAgPGlucHV0CiAgICAgICAgICAgIGNsYXNzPSJzaGFkb3cgYXBwZWFyYW5jZS1ub25lIGJvcmRlciBib3JkZXItZ3JheS0zMDAgcm91bmRlZC1tZCBwLTIgdy1mdWxsIGZvY3VzOnJpbmctMiBmb2N1czpyaW5nLWJsdWUtNTAwIgogICAgICAgICAgICBpZD0idXNlcm5hbWUiCiAgICAgICAgICAgIHR5cGU9InRleHQiCiAgICAgICAgICAgIHBsYWNlaG9sZGVyPSJFbnRlciB5b3VyIHVzZXJuYW1lIgogICAgICAgICAgLz4KICAgICAgICA8L2Rpdj4KICAgICAgICA8IS0tIFRleHRhcmVhIC0tPgogICAgICAgIDxkaXYgY2xhc3M9Im1iLTQiPgogICAgICAgICAgPGxhYmVsCiAgICAgICAgICAgIGNsYXNzPSJibG9jayB0ZXh0LWdyYXktNzAwIHRleHQtc20gZm9udC1ib2xkIG1iLTIiCiAgICAgICAgICAgIGZvcj0ibWVzc2FnZSIKICAgICAgICAgID4KICAgICAgICAgICAgTWVzc2FnZQogICAgICAgICAgPC9sYWJlbD4KICAgICAgICAgIDx0ZXh0YXJlYQogICAgICAgICAgICBjbGFzcz0ic2hhZG93IGFwcGVhcmFuY2Utbm9uZSBib3JkZXIgYm9yZGVyLWdyYXktMzAwIHJvdW5kZWQtbWQgcC0yIHctZnVsbCBmb2N1czpyaW5nLTIgZm9jdXM6cmluZy1ibHVlLTUwMCIKICAgICAgICAgICAgaWQ9Im1lc3NhZ2UiCiAgICAgICAgICAgIHJvd3M9IjQiCiAgICAgICAgICAgIHBsYWNlaG9sZGVyPSJFbnRlciB5b3VyIG1lc3NhZ2UiCiAgICAgICAgICA+PC90ZXh0YXJlYT4KICAgICAgICA8L2Rpdj4KICAgICAgICA8IS0tIFJhZGlvIEJ1dHRvbnMgLS0+CiAgICAgICAgPGRpdiBjbGFzcz0ibWItNCI+CiAgICAgICAgICA8c3BhbiBjbGFzcz0idGV4dC1ncmF5LTcwMCI+R2VuZGVyPC9zcGFuPgogICAgICAgICAgPGRpdiBjbGFzcz0ibXQtMiI+CiAgICAgICAgICAgIDxsYWJlbCBjbGFzcz0iaW5saW5lLWZsZXggaXRlbXMtY2VudGVyIj4KICAgICAgICAgICAgICA8aW5wdXQKICAgICAgICAgICAgICAgIHR5cGU9InJhZGlvIgogICAgICAgICAgICAgICAgY2xhc3M9ImZvcm0tcmFkaW8gdGV4dC1ibHVlLTUwMCIKICAgICAgICAgICAgICAgIG5hbWU9ImdlbmRlciIKICAgICAgICAgICAgICAgIHZhbHVlPSJtYWxlIgogICAgICAgICAgICAgIC8+CiAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9Im1sLTIiPk1hbGU8L3NwYW4+CiAgICAgICAgICAgIDwvbGFiZWw+CiAgICAgICAgICAgIDxsYWJlbCBjbGFzcz0iaW5saW5lLWZsZXggaXRlbXMtY2VudGVyIG1sLTYiPgogICAgICAgICAgICAgIDxpbnB1dAogICAgICAgICAgICAgICAgdHlwZT0icmFkaW8iCiAgICAgICAgICAgICAgICBjbGFzcz0iZm9ybS1yYWRpbyB0ZXh0LWJsdWUtNTAwIgogICAgICAgICAgICAgICAgbmFtZT0iZ2VuZGVyIgogICAgICAgICAgICAgICAgdmFsdWU9ImZlbWFsZSIKICAgICAgICAgICAgICAvPgogICAgICAgICAgICAgIDxzcGFuIGNsYXNzPSJtbC0yIj5GZW1hbGU8L3NwYW4+CiAgICAgICAgICAgIDwvbGFiZWw+CiAgICAgICAgICA8L2Rpdj4KICAgICAgICA8L2Rpdj4KICAgICAgICA8IS0tIFN3aXRjaCAtLT4KICAgICAgICA8ZGl2IGNsYXNzPSJtYi00Ij4KICAgICAgICAgIDxsYWJlbCBjbGFzcz0iZmxleCBpdGVtcy1jZW50ZXIiPgogICAgICAgICAgICA8c3BhbiBjbGFzcz0ibXItMiB0ZXh0LWdyYXktNzAwIj5FbmFibGUgbm90aWZpY2F0aW9uczwvc3Bhbj4KICAgICAgICAgICAgPGlucHV0CiAgICAgICAgICAgICAgdHlwZT0iY2hlY2tib3giCiAgICAgICAgICAgICAgY2xhc3M9ImZvcm0tY2hlY2tib3ggaC02IHctNiB0ZXh0LWdyZWVuLTUwMCIKICAgICAgICAgICAgLz4KICAgICAgICAgIDwvbGFiZWw+CiAgICAgICAgPC9kaXY+CiAgICAgICAgPCEtLSBTdWJtaXQgQnV0dG9uIC0tPgogICAgICAgIDxkaXYgY2xhc3M9Im1iLTQiPgogICAgICAgICAgPGJ1dHRvbgogICAgICAgICAgICBjbGFzcz0iYmctYmx1ZS01MDAgaG92ZXI6YmctYmx1ZS03MDAgdGV4dC13aGl0ZSBmb250LWJvbGQgcHktMiBweC00IHJvdW5kZWQgZm9jdXM6b3V0bGluZS1ub25lIGZvY3VzOnJpbmctMiBmb2N1czpyaW5nLWJsdWUtNTAwIgogICAgICAgICAgPgogICAgICAgICAgICBTdWJtaXQKICAgICAgICAgIDwvYnV0dG9uPgogICAgICAgIDwvZGl2PgogICAgICA8L2Zvcm0+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4K

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: Lage Skjemaer

Oppgave

Awesome!

Utfordring: Lage Skjemaer

Oppgave