Latihan 1 dari materi Component Patterns di Tailwind CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal sudah punya kartu profil tanpa class: <div id="profile-card"> berisi <img id="avatar"> dan <h3 id="name">Budi</h3>. Biarkan id, src, alt, dan teksnya. Tambahkan class:
<div id="profile-card">: rounded-xl border p-6 shadow-sm.<img id="avatar">: h-16 w-16 rounded-full.<h3 id="name">: text-lg font-semibold.Yang dicek:
#profile-card ada.#avatar punya height 64px dan width 64px (dari h-16 w-16). Foto aslinya 96 x 72, jadi ukurannya harus datang dari class.#avatar memakai class rounded-full, supaya fotonya bulat.font-weight #name persis 600 (dari font-semibold).Class kartu (rounded-xl border p-6 shadow-sm) dan text-lg bikin kartunya rapi, tapi gak ikut dicek.
