## Tehtävä
Luo Tailwind CSS:llä korttikomponentti seuraavien vaatimusten mukaisesti:
1. Kortissa tulee olla:
   - Enimmäisleveys `md`;
   - Pyöristetyt kulmat;
   - Taustaväri.
2. Kortin sisällön tulee sisältää:
   - Kuva, joka vie koko kortin leveyden;
   - Otsikko lihavoidulla tekstillä ja suurella fonttikoolla;
   - Kappale normaalilla fonttikoolla ja kursivoidulla tyylillä.
3. Lisää korttiin tunnisteet, joissa on:
   - Pyöristetyt kulmat ja pieni fonttikoko.


PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBDYXJkcyAtIFRhc2s8L3RpdGxlPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0ibWF4LXctX19fX18gX19fX18gb3ZlcmZsb3ctaGlkZGVuIHNoYWRvdy1sZyBfX19fXy1wdXJwbGUtMTAwIj4KICAgICAgPGltZwogICAgICAgIGNsYXNzPSJfX19fXy1fX19fXyIKICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvNjE1NTY3ZGEtYjA1My00Njc0LWI4OWMtMDUzMDU3ZDJiY2E3L3NlY3Rpb24tMy9mYW4ucG5nIgogICAgICAgIGFsdD0iU2FtcGxlIEltYWdlIgogICAgICAvPgogICAgICA8ZGl2IGNsYXNzPSJweC02IHB5LTQiPgogICAgICAgIDxoMiBjbGFzcz0iZm9udC1fX19fXyB0ZXh0LV9fX19fIHRleHQtcHVycGxlLTkwMCBtYi0yIj5DYXJkIFRpdGxlPC9oMj4KICAgICAgICA8cCBjbGFzcz0idGV4dC1wdXJwbGUtNzAwIHRleHQtX19fX18gX19fX18iPgogICAgICAgICAgVGhpcyBpcyBhIHNpbXBsZSBjYXJkIGNvbXBvbmVudCBjcmVhdGVkIHVzaW5nIFRhaWx3aW5kIENTUy4gSXQKICAgICAgICAgIGluY2x1ZGVzIGFuIGltYWdlLCBhIHRpdGxlLCBzb21lIHRleHQsIGFuZCBhY3Rpb25zLgogICAgICAgIDwvcD4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InB4LTYgcHQtNCBwYi0yIj4KICAgICAgICA8c3BhbgogICAgICAgICAgY2xhc3M9ImlubGluZS1ibG9jayBiZy15ZWxsb3ctMjAwIF9fX19fLWZ1bGwgcHgtMyBweS0xIHRleHQtX19fX18gZm9udC1zZW1pYm9sZCB0ZXh0LXllbGxvdy03MDAgbXItMiBtYi0yIgogICAgICAgICAgPiN0YWcxPC9zcGFuCiAgICAgICAgPgogICAgICAgIDxzcGFuCiAgICAgICAgICBjbGFzcz0iaW5saW5lLWJsb2NrIGJnLXBpbmstMjAwIF9fX19fLWZ1bGwgcHgtMyBweS0xIHRleHQtX19fX18gZm9udC1zZW1pYm9sZCB0ZXh0LXBpbmstNzAwIG1yLTIgbWItMiIKICAgICAgICAgID4jdGFnMjwvc3BhbgogICAgICAgID4KICAgICAgICA8c3BhbgogICAgICAgICAgY2xhc3M9ImlubGluZS1ibG9jayBiZy1ncmVlbi0yMDAgX19fX18tZnVsbCBweC0zIHB5LTEgdGV4dC1fX19fXyBmb250LXNlbWlib2xkIHRleHQtZ3JlZW4tNzAwIG1yLTIgbWItMiIKICAgICAgICAgID4jdGFnMzwvc3BhbgogICAgICAgID4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InB4LTYgcHQtNCBwYi0yIj4KICAgICAgICA8YnV0dG9uCiAgICAgICAgICBjbGFzcz0iYmctYmx1ZS01MDAgaG92ZXI6YmctYmx1ZS03MDAgdGV4dC13aGl0ZSBmb250LWJvbGQgcHktMiBweC00IHJvdW5kZWQiCiAgICAgICAgPgogICAgICAgICAgQWN0aW9uIDEKICAgICAgICA8L2J1dHRvbj4KICAgICAgICA8YnV0dG9uCiAgICAgICAgICBjbGFzcz0iYmctcmVkLTUwMCBob3ZlcjpiZy1yZWQtNzAwIHRleHQtd2hpdGUgZm9udC1ib2xkIHB5LTIgcHgtNCByb3VuZGVkIG1sLTIiCiAgICAgICAgPgogICAgICAgICAgQWN0aW9uIDIKICAgICAgICA8L2J1dHRvbj4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

- Käytä `max-w-md` asettaaksesi kortin enimmäisleveyden;
- Käytä `rounded` lisätäksesi pyöristetyt kulmat korttiin;
- Käytä `bg-purple-100` asettaaksesi kortin taustavärin;
- Käytä `w-full` saadaksesi kuvan viemään koko kortin leveyden;
- Käytä `font-bold` lisätäksesi lihavoinnin tekstiin;
- Käytä `text-xl` asettaaksesi otsikolle suuremman fonttikoon;
- Käytä `text-base` asettaaksesi kappaletekstille normaalin fonttikoon;
- Käytä `italic` lisätäksesi kursivoinnin tekstiin;
- Käytä `rounded-full` lisätäksesi pyöristetyt kulmat tunnisteisiin;
- Käytä `text-sm` asettaaksesi tunnisteille pienen fonttikoon.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBDYXJkcyAtIFNvbHV0aW9uPC90aXRsZT4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi50YWlsd2luZGNzcy5jb20iPjwvc2NyaXB0PgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9Im1heC13LW1kIHJvdW5kZWQgb3ZlcmZsb3ctaGlkZGVuIHNoYWRvdy1sZyBiZy1wdXJwbGUtMTAwIj4KICAgICAgPGltZwogICAgICAgIGNsYXNzPSJ3LWZ1bGwiCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzLzYxNTU2N2RhLWIwNTMtNDY3NC1iODljLTA1MzA1N2QyYmNhNy9zZWN0aW9uLTMvZmFuLnBuZyIKICAgICAgICBhbHQ9IlNhbXBsZSBJbWFnZSIKICAgICAgLz4KICAgICAgPGRpdiBjbGFzcz0icHgtNiBweS00Ij4KICAgICAgICA8aDIgY2xhc3M9ImZvbnQtYm9sZCB0ZXh0LXhsIHRleHQtcHVycGxlLTkwMCBtYi0yIj5DYXJkIFRpdGxlPC9oMj4KICAgICAgICA8cCBjbGFzcz0idGV4dC1wdXJwbGUtNzAwIHRleHQtYmFzZSBpdGFsaWMiPgogICAgICAgICAgVGhpcyBpcyBhIHNpbXBsZSBjYXJkIGNvbXBvbmVudCBjcmVhdGVkIHVzaW5nIFRhaWx3aW5kIENTUy4gSXQKICAgICAgICAgIGluY2x1ZGVzIGFuIGltYWdlLCBhIHRpdGxlLCBzb21lIHRleHQsIGFuZCBhY3Rpb25zLgogICAgICAgIDwvcD4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InB4LTYgcHQtNCBwYi0yIj4KICAgICAgICA8c3BhbgogICAgICAgICAgY2xhc3M9ImlubGluZS1ibG9jayBiZy15ZWxsb3ctMjAwIHJvdW5kZWQtZnVsbCBweC0zIHB5LTEgdGV4dC1zbSBmb250LXNlbWlib2xkIHRleHQteWVsbG93LTcwMCBtci0yIG1iLTIiCiAgICAgICAgICA+I3RhZzE8L3NwYW4KICAgICAgICA+CiAgICAgICAgPHNwYW4KICAgICAgICAgIGNsYXNzPSJpbmxpbmUtYmxvY2sgYmctcGluay0yMDAgcm91bmRlZC1mdWxsIHB4LTMgcHktMSB0ZXh0LXNtIGZvbnQtc2VtaWJvbGQgdGV4dC1waW5rLTcwMCBtci0yIG1iLTIiCiAgICAgICAgICA+I3RhZzI8L3NwYW4KICAgICAgICA+CiAgICAgICAgPHNwYW4KICAgICAgICAgIGNsYXNzPSJpbmxpbmUtYmxvY2sgYmctZ3JlZW4tMjAwIHJvdW5kZWQtZnVsbCBweC0zIHB5LTEgdGV4dC1zbSBmb250LXNlbWlib2xkIHRleHQtZ3JlZW4tNzAwIG1yLTIgbWItMiIKICAgICAgICAgID4jdGFnMzwvc3BhbgogICAgICAgID4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InB4LTYgcHQtNCBwYi0yIj4KICAgICAgICA8YnV0dG9uCiAgICAgICAgICBjbGFzcz0iYmctYmx1ZS01MDAgaG92ZXI6YmctYmx1ZS03MDAgdGV4dC13aGl0ZSBmb250LWJvbGQgcHktMiBweC00IHJvdW5kZWQiCiAgICAgICAgPgogICAgICAgICAgQWN0aW9uIDEKICAgICAgICA8L2J1dHRvbj4KICAgICAgICA8YnV0dG9uCiAgICAgICAgICBjbGFzcz0iYmctcmVkLTUwMCBob3ZlcjpiZy1yZWQtNzAwIHRleHQtd2hpdGUgZm9udC1ib2xkIHB5LTIgcHgtNCByb3VuZGVkIG1sLTIiCiAgICAgICAgPgogICAgICAgICAgQWN0aW9uIDIKICAgICAgICA8L2J1dHRvbj4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

Opi muotoilemaan verkkosivustoja tehokkaasti Tailwind CSS:n avulla, joka on utility-first-kehys nopeaan käyttöliittymien kehitykseen. Tutustu Tailwindin käyttöönottoon ja utility-luokkien soveltamiseen väreihin, typografiaan, reunoihin ja varjoihin. Rakenna ja muotoile keskeisiä komponentteja, kuten painikkeita, kortteja ja lomakkeita. Hallitse asettelutekniikoita hyödyntämällä välistyksiä, flexboxia ja grid-apuluokkia. Luo responsiivisia suunnitelmia ja mukauta Tailwind vastaamaan projektisi tarpeita.

Tutustu Tailwind CSS:ään, utility-first-kehykseen, joka tunnetaan joustavuudestaan ja tehokkuudestaan verkkotyylittelyssä. Selvitä keskeiset hyödyt ja utility-first-filosofia. Lisäksi perehdy yksinkertaisiin asennustapoihin CDN:n tai npm/yarnin avulla.

Tutustu Tailwind CSS:n perustavanlaatuisiin elementteihin, mukaan lukien utiliteettiluokkien ymmärtäminen ja niiden soveltaminen HTML-elementteihin. Syvenny olennaisiin muotoilutekniikoihin, kuten värien, reunojen, varjojen ja typografian utiliteettien asettamiseen.

Syvenny käytännön sovelluksiin, joissa keskitytään Painikkeiden, Lomakkeiden ja Korttien luomiseen ja tyylittelyyn. Käytännön haasteiden avulla opit hallitsemaan näiden keskeisten käyttöliittymäkomponenttien rakentamisen ja kehität taitojasi todellisten esimerkkien kautta.

Tutustu Tailwind CSS:n keskeisiin väli- ja täyteominaisuuksiin sekä niiden soveltamiseen elementteihin. Sisältää myös flexbox-ominaisuuksien hyödyntämisen asettelun hallintaan näyttöasetusten, flex-suunnan sekä vaaka- ja pystysuuntaisen kohdistuksen avulla. Lisäksi perehdyt ruudukko-ominaisuuksiin yksinkertaisten mutta tehokkaiden ruudukkopohjaisten asettelujen luomiseksi, mukaan lukien ruudukkojen ja niiden osien määrittely.

Opi mukauttamaan Tailwind CSS vastaamaan projektisi suunnitteluvaatimuksia ja luomaan mukautuvia asetteluja eri laitteille.

Haaste: Rakenna Korttikomponentti

Tehtävä

Awesome!

Haaste: Rakenna Korttikomponentti

Tehtävä