Tehtävä

Käyttämällä Tailwind CSS -apuohjelmia väreille, reunoille ja varjoille, luo tyylitelty korttikomponentti seuraavien vaatimusten mukaisesti:

1. Ulomman säiliön tulee sisältää:
   • Valkoinen taustaväri;
   • Keskikokoinen varjo.
2. Kortin tulee sisältää:
   • Otsikko (h2), jonka tekstikoko on 2xl ja tekstiväri gray-900;
   • Kappale (p), jonka tekstiväri on gray-700.
3. Kortin sisälle luo reunustettu laatikko, jossa on:
   • Vaaleansininen taustaväri (esim. blue-50);
   • Sininen reunaväri;
   • Keskikokoiset pyöristetyt kulmat;
   • Tekstiväri blue-700.
4. Lisää toinen laatikko, jossa on:
   • Vaaleanvihreä taustaväri (esim. green-100);
   • Vihreä reunaväri;
   • Pyöristetyt kulmat;
   • Pieni varjo;
   • Tekstiväri green-700.

1. Taustavärit: Käytä bg-white, bg-blue-50, bg-green-100 taustaväreihin;
2. Tekstivärit: Käytä text-gray-900, text-gray-700, text-blue-700, text-green-700 tekstiväreihin;
3. Reunavärit: Käytä border-blue-500, border-green-500 reunaväreihin;
4. Reunapyöristys: Käytä rounded-md, rounded pyöristetyille kulmille;
5. Varjot: Käytä shadow-md, shadow-sm varjoihin;
6. Tekstin koko: Käytä text-2xl otsikon kokoon.