## Opgave
Ved brug af Tailwind CSS-værktøjer til farver, kanter og skygger, opret en stiliseret kort-komponent med følgende specifikationer:
1. Den ydre container skal have:
   - En hvid baggrundsfarve;
   - En medium skygge.
2. Kortet skal indeholde:
   - En overskrift (`h2`) med tekststørrelse 2xl og tekstfarve gray-900;
   - Et afsnit (`p`) med tekstfarve gray-700.
3. Inde i kortet, opret en boks med kant med:
   - En lys blå baggrundsfarve (f.eks. blue-50);
   - Blå kantfarve;
   - Medium afrundede hjørner;
   - Tekstfarve blue-700.
4. Tilføj en anden boks med:
   - En lys grøn baggrundsfarve (f.eks. green-100);
   - Grøn kantfarve;
   - Afrundede hjørner;
   - Lille skygge;
   - Tekstfarve green-700.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBCYXNpYyBTdHlsaW5nIC0gVGFzazwvdGl0bGU+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4udGFpbHdpbmRjc3MuY29tIj48L3NjcmlwdD4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJiZy1fX19fXyBwLTQgc2hhZG93LV9fX19fIj4KICAgICAgPGgyIGNsYXNzPSJ0ZXh0LV9fX19fIHRleHQtX19fX18tX19fX18iPlN0eWxlZCBDYXJkPC9oMj4KICAgICAgPHAgY2xhc3M9Il9fX19fLV9fX19fLV9fX19fIj4KICAgICAgICBUaGlzIGNhcmQgaXMgc3R5bGVkIHVzaW5nIFRhaWx3aW5kIENTUyB1dGlsaXRpZXMuCiAgICAgIDwvcD4KICAgICAgPGRpdiBjbGFzcz0iYm9yZGVyIGJvcmRlci1fX19fXy01MDAgcm91bmRlZC1fX19fXyBwLTQgYmctX19fX18tX19fX18iPgogICAgICAgIDxwIGNsYXNzPSJfX19fXy1fX19fXy1fX19fXyI+CiAgICAgICAgICBUaGlzIGlzIGEgYm9yZGVyZWQgYm94IHdpdGggYSBiYWNrZ3JvdW5kIGNvbG9yLgogICAgICAgIDwvcD4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYKICAgICAgICBjbGFzcz0ibXQtNCBwLTQgYmctX19fX18tX19fX18gYm9yZGVyIGJvcmRlci1fX19fXy1fX19fXyBfX19fXyBzaGFkb3ctX19fX18iCiAgICAgID4KICAgICAgICA8cCBjbGFzcz0iX19fX18tX19fX18tX19fX18iPkFub3RoZXIgYm94IHdpdGggZGlmZmVyZW50IHN0eWxpbmcuPC9wPgogICAgICA8L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

1. **Baggrundsfarver:** Brug `bg-white`, `bg-blue-50`, `bg-green-100` til baggrundsfarver;
2. **Tekstfarver:** Brug `text-gray-900`, `text-gray-700`, `text-blue-700`, `text-green-700` til tekstfarver;
3. **Kantfarver:** Brug `border-blue-500`, `border-green-500` til kantfarver;
4. **Kantafrunding:** Brug `rounded-md`, `rounded` til afrundede hjørner;
5. **Skygger:** Brug `shadow-md`, `shadow-sm` til skygger;
6. **Tekststørrelse:** Brug `text-2xl` til overskriftsstørrelse.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBCYXNpYyBTdHlsaW5nIC0gU29sdXRpb248L3RpdGxlPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0iYmctd2hpdGUgcC00IHNoYWRvdy1tZCI+CiAgICAgIDxoMiBjbGFzcz0idGV4dC0yeGwgdGV4dC1ncmF5LTkwMCI+U3R5bGVkIENhcmQ8L2gyPgogICAgICA8cCBjbGFzcz0idGV4dC1ncmF5LTcwMCI+CiAgICAgICAgVGhpcyBjYXJkIGlzIHN0eWxlZCB1c2luZyBUYWlsd2luZCBDU1MgdXRpbGl0aWVzLgogICAgICA8L3A+CiAgICAgIDxkaXYgY2xhc3M9ImJvcmRlciBib3JkZXItYmx1ZS01MDAgcm91bmRlZC1tZCBwLTQgYmctYmx1ZS01MCI+CiAgICAgICAgPHAgY2xhc3M9InRleHQtYmx1ZS03MDAiPgogICAgICAgICAgVGhpcyBpcyBhIGJvcmRlcmVkIGJveCB3aXRoIGEgYmFja2dyb3VuZCBjb2xvci4KICAgICAgICA8L3A+CiAgICAgIDwvZGl2PgogICAgICA8ZGl2CiAgICAgICAgY2xhc3M9Im10LTQgcC00IGJnLWdyZWVuLTEwMCBib3JkZXIgYm9yZGVyLWdyZWVuLTUwMCByb3VuZGVkIHNoYWRvdy1zbSIKICAgICAgPgogICAgICAgIDxwIGNsYXNzPSJ0ZXh0LWdyZWVuLTcwMCI+QW5vdGhlciBib3ggd2l0aCBkaWZmZXJlbnQgc3R5bGluZy48L3A+CiAgICAgIDwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

Lær at style websites effektivt ved hjælp af Tailwind CSS, et utility-first framework til hurtig UI-udvikling. Opdag, hvordan du opsætter Tailwind og anvender utility-klasser til farver, typografi, kanter og skygger. Byg og style essentielle komponenter som knapper, kort og formularer. Behersk layoutteknikker ved brug af spacing, flexbox og grid utilities. Skab responsive designs og tilpas Tailwind, så det matcher dine projektbehov.

Mød Tailwind CSS, et utility-first framework kendt for sin fleksibilitet og effektivitet inden for webstyling. Opdag de vigtigste fordele og utility-first filosofien. Udforsk desuden de enkle installationsmetoder ved brug af CDN eller npm/yarn.

Opdag de grundlæggende elementer i Tailwind CSS, herunder forståelse af utility-klasser og deres anvendelse på HTML-elementer. Udforsk essentielle stylingteknikker såsom indstilling af farver, kanter, skygger og typografi-værktøjer.

Dyk ned i praktiske anvendelser med fokus på oprettelse og styling af knapper, formularer og kort. Gennem praktiske udfordringer opnås færdigheder i at opbygge disse essentielle UI-komponenter, hvilket styrker kompetencerne med eksempler fra virkeligheden.

Udforsk Tailwind CSS' grundlæggende spacing-værktøjer, herunder anvendelse af margin og padding på elementer. Lær at bruge flexbox-værktøjer til at styre layout med display-indstillinger, flex-retning samt horisontal og vertikal justering. Dyk desuden ned i grid-værktøjer for at skabe enkle, men effektive grid-layouts, og opnå forståelse for opsætning af grid-containere og -elementer.

Lær at tilpasse Tailwind CSS til dine projektkrav og skabe fleksible layouts til forskellige enheder.

Udfordring: Anvend Grundlæggende Styling

Opgave

Awesome!

Udfordring: Anvend Grundlæggende Styling

Opgave