## Opdracht
Gebruik de Tailwind CSS utilities voor kleuren, randen en schaduwen om een gestileerde kaartcomponent te maken met de volgende specificaties:
1. De buitenste container heeft:
   - Een witte achtergrondkleur;
   - Een middelgrote schaduw.
2. De kaart bevat:
   - Een koptekst (`h2`) met tekstgrootte 2xl en tekstkleur grijs-900;
   - Een paragraaf (`p`) met tekstkleur grijs-700.
3. Binnen de kaart maak je een omkaderde box met:
   - Een lichtblauwe achtergrondkleur (bijv. blue-50);
   - Blauwe randkleur;
   - Middelmatig afgeronde hoeken;
   - Tekstkleur blauw-700.
4. Voeg een andere box toe met:
   - Een lichtgroene achtergrondkleur (bijv. green-100);
   - Groene randkleur;
   - Afgeronde hoeken;
   - Kleine schaduw;
   - Tekstkleur groen-700.

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

1. **Achtergrondkleuren:** Gebruik `bg-white`, `bg-blue-50`, `bg-green-100` voor achtergrondkleuren;
2. **Tekstkleuren:** Gebruik `text-gray-900`, `text-gray-700`, `text-blue-700`, `text-green-700` voor tekstkleuren;
3. **Randkleuren:** Gebruik `border-blue-500`, `border-green-500` voor randkleuren;
4. **Randradius:** Gebruik `rounded-md`, `rounded` voor afgeronde hoeken;
5. **Schaduwen:** Gebruik `shadow-md`, `shadow-sm` voor schaduwen;
6. **Tekstgrootte:** Gebruik `text-2xl` voor de kopgrootte.

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

Leer hoe je websites efficiënt kunt stylen met Tailwind CSS, een utility-first framework voor snelle UI-ontwikkeling. Ontdek hoe je Tailwind installeert en utility classes toepast voor kleuren, typografie, randen en schaduwen. Bouw en style essentiële componenten zoals knoppen, kaarten en formulieren. Beheers lay-outtechnieken met behulp van spacing-, flexbox- en grid-utilities. Maak responsieve ontwerpen en pas Tailwind aan op de behoeften van je project.

Maak kennis met Tailwind CSS, een utility-first framework dat bekend staat om zijn flexibiliteit en efficiëntie in webstyling. Ontdek de belangrijkste voordelen en de utility-first filosofie. Verken daarnaast de eenvoudige installatiemethoden via CDN of npm/yarn.

Ontdek de fundamentele elementen van Tailwind CSS, waaronder het begrip utility classes en hun toepassing op HTML-elementen. Verken essentiële opmaaktechnieken zoals het instellen van kleuren, randen, schaduwen en typografiehulpmiddelen.

Verdiep u in praktische toepassingen met de nadruk op het creëren en stylen van knoppen, formulieren en kaarten. Door middel van praktijkgerichte uitdagingen beheerst u het bouwen van deze essentiële UI-componenten en verbetert u uw vaardigheden met voorbeelden uit de praktijk.

Ontdek de essentiële spacing utilities van Tailwind CSS, met uitleg over het toepassen van marge en opvulling op elementen. U leert ook flexbox utilities gebruiken om de lay-out te beheersen met display-instellingen, flexrichting en zowel horizontale als verticale uitlijning. Daarnaast verdiept u zich in grid utilities om eenvoudige maar krachtige grid lay-outs te creëren, waarbij u het opzetten van gridcontainers en items beheerst.

Ontdek hoe u Tailwind CSS kunt aanpassen aan de ontwerpeisen van uw project en flexibele lay-outs kunt creëren voor verschillende apparaten.

Uitdaging: Basisopmaak Toepassen

Opdracht

Awesome!

Uitdaging: Basisopmaak Toepassen

Opdracht