Latihan 1 dari materi Group, Peer & Modifier Lanjutan di Tailwind CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal sudah punya card <div id="card" class="group"> berisi <h3 id="heading"> dan <p id="info">. Biarkan id, teks dan class group-nya, lalu tambahkan class:
#card: p-4 rounded-lg border cursor-pointer.#heading: font-semibold group-hover:text-blue-600.#info: text-sm text-gray-400 group-hover:text-gray-600.Yang dicek, lewat gaya yang dihitung browser:
#card: padding 16px (p-4), border-radius 8px (rounded-lg), cursor pointer (cursor-pointer).#heading: font-weight 600 (font-semibold).Class group-hover: dicek dari tulisannya, karena penilainya gak bisa meng-hover: #card tetap punya group, #heading punya group-hover:text-blue-600, dan #info punya group-hover:text-gray-600. Coba sendiri di preview: arahkan kursor ke card, judulnya harus jadi biru.
