Latihan 1 dari materi Display & Visibility di Tailwind CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal sudah punya dua div. Atur cara keduanya tampil, cuma pakai class:
Tambahkan class="inline-block" di <div id="visible">. Teksnya tetap Terlihat.
Tambahkan class="invisible" di <div id="ghost">. Teksnya tetap Hantu.
Yang dicek:
#visible punya display: inline-block (dari class inline-block).
#ghost punya visibility: hidden (dari class invisible, bukan hidden).
Hasilnya, Hantu gak kelihatan, tapi tempatnya tetap ada.
Hint
Tiap nilai display dan visibility punya class sendiri di Tailwind. Satu class untuk Terlihat, satu class untuk Hantu.
inline-block membuat elemen sebaris tapi tetap bisa diberi ukuran. invisible menyembunyikan elemen tanpa menghapus tempatnya, beda dengan hidden.