## Oppgave
Ved bruk av Tailwind CSS, lag en knapp som oppfyller følgende krav:
1. Knappen skal ha blå bakgrunn (f.eks. `bg-blue-500`);
2. Når du holder musepekeren over knappen, skal bakgrunnsfargen endres til en mørkere blåfarge (f.eks. `bg-blue-700`);
3. Når knappen er i fokus, skal den ha gul bakgrunnsfarge (f.eks. `bg-yellow-500`);
4. Når knappen er aktiv (trykket ned), skal bakgrunnsfargen endres til en enda mørkere blåfarge (f.eks. `bg-blue-900`);
5. Når knappen er deaktivert, skal den vises med 50% opasitet <u>og</u> en markør som indikerer at den ikke kan klikkes.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBCdXR0b25zIC0gVGFzazwvdGl0bGU+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4udGFpbHdpbmRjc3MuY29tIj48L3NjcmlwdD4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8YnV0dG9uCiAgICAgIGNsYXNzPSJiZy1fX19fXyB0ZXh0LXdoaXRlIGZvbnQtYm9sZCBweS0yIHB4LTQgcm91bmRlZCBfX19fXyBfX19fXyBfX19fXyBfX19fXyBfX19fXyIKICAgICAgZGlzYWJsZWQKICAgID4KICAgICAgQ2xpY2sgQnV0dG9uCiAgICA8L2J1dHRvbj4KICA8L2JvZHk+CjwvaHRtbD4=

- Bruk `hover:bg-blue-700` for hover-tilstand;
- Bruk `focus:bg-yellow-500` for fokus-tilstand;
- Bruk `active:bg-blue-900` for aktiv tilstand;
- Bruk `opacity-50 cursor-not-allowed` for deaktivert tilstand.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBCdXR0b25zIC0gU29sdXRpb248L3RpdGxlPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGJ1dHRvbgogICAgICBjbGFzcz0iYmctYmx1ZS01MDAgdGV4dC13aGl0ZSBmb250LWJvbGQgcHktMiBweC00IHJvdW5kZWQgaG92ZXI6YmctYmx1ZS03MDAgZm9jdXM6YmcteWVsbG93LTUwMCBhY3RpdmU6YmctYmx1ZS05MDAgb3BhY2l0eS01MCBjdXJzb3Itbm90LWFsbG93ZWQiCiAgICAgIGRpc2FibGVkCiAgICA+CiAgICAgIENsaWNrIEJ1dHRvbgogICAgPC9idXR0b24+CiAgPC9ib2R5Pgo8L2h0bWw+

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: Style Knapper

Oppgave

Awesome!

Utfordring: Style Knapper

Oppgave