## Opdracht
Gebruik de Tailwind CSS-hulpmiddelen voor typografie om een tekstcomponent te maken met de volgende specificaties:
1. Een koptekst (`h1`) met:
   - Lettergrootte van 4xl;
   - Vet lettertype;
   - Normale regelhoogte.
2. Een subkop (`h2`) met:
   - Lettergrootte van 2xl;
   - Halfvet lettertype;
   - Strakke regelhoogte.
3. Een paragraaf (`p`) met:
   - Lettergrootte van base;
   - Normaal lettertype;
   - Ruime regelhoogte.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBBcHBseWluZyBUeXBvZ3JhcGh5IFV0aWxpdGllcyAtIFRhc2s8L3RpdGxlPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgxIGNsYXNzPSJ0ZXh0LV9fX19fIGZvbnQtX19fX18gbGVhZGluZy1fX19fXyI+TWFpbiBIZWFkaW5nPC9oMT4KICAgIDxoMiBjbGFzcz0iX19fX18tX19fX18gX19fX18tX19fX18gX19fX18tX19fX18iPlN1YmhlYWRpbmc8L2gyPgogICAgPHAgY2xhc3M9Il9fX19fIF9fX19fIF9fX19fIj4KICAgICAgVGhpcyBpcyBhIHBhcmFncmFwaCBkZW1vbnN0cmF0aW5nIGRpZmZlcmVudCBmb250IHNpemVzLCBmb250IHdlaWdodHMsIGFuZAogICAgICBsaW5lIGhlaWdodHMgdXNpbmcgVGFpbHdpbmQgQ1NTIHV0aWxpdGllcy4KICAgIDwvcD4KICA8L2JvZHk+CjwvaHRtbD4=

1. **Lettergrootte:** Gebruik `text-4xl`, `text-2xl`, `text-base` voor lettergroottes;
2. **Lettergewicht:** Gebruik `font-bold`, `font-semibold`, `font-normal` voor lettergewichten;
3. **Regelhoogte:** Gebruik `leading-normal`, `leading-tight`, `leading-relaxed` voor regelhoogtes.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBBcHBseWluZyBUeXBvZ3JhcGh5IFV0aWxpdGllcyAtIFNvbHV0aW9uPC90aXRsZT4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi50YWlsd2luZGNzcy5jb20iPjwvc2NyaXB0PgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxoMSBjbGFzcz0idGV4dC00eGwgZm9udC1ib2xkIGxlYWRpbmctbm9ybWFsIj5NYWluIEhlYWRpbmc8L2gxPgogICAgPGgyIGNsYXNzPSJ0ZXh0LTJ4bCBmb250LXNlbWlib2xkIGxlYWRpbmctdGlnaHQiPlN1YmhlYWRpbmc8L2gyPgogICAgPHAgY2xhc3M9InRleHQtYmFzZSBmb250LW5vcm1hbCBsZWFkaW5nLXJlbGF4ZWQiPgogICAgICBUaGlzIGlzIGEgcGFyYWdyYXBoIGRlbW9uc3RyYXRpbmcgZGlmZmVyZW50IGZvbnQgc2l6ZXMsIGZvbnQgd2VpZ2h0cywgYW5kCiAgICAgIGxpbmUgaGVpZ2h0cyB1c2luZyBUYWlsd2luZCBDU1MgdXRpbGl0aWVzLgogICAgPC9wPgogIDwvYm9keT4KPC9odG1sPg==

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: Typografie in de Praktijk

Opdracht

Awesome!

Uitdaging: Typografie in de Praktijk

Opdracht