Latihan 1: Hover & States — Tailwind CSS

Latihan 1 dari materi Hover & States di Tailwind CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Bikin tombol biru yang bereaksi waktu ditunjuk kursor.

Di <button id="btn"> yang sudah ada, tambahkan atribut class.
Isi class-nya: bg-blue-500 text-white px-4 py-2 rounded.
Tambahkan juga hover:bg-blue-600, supaya tombolnya jadi biru lebih tua waktu di-hover.
id="btn" dan teks Hover Saya sudah ada di kode awal, biarkan.

Yang dicek pemeriksa: #btn ada, border-radius-nya 4px (dari rounded), dan class-nya: bg-blue-500, text-white, px-4, py-2, dan hover:bg-blue-600. Pemeriksa gak bisa menggerakkan mouse, jadi hover: dicek dari tulisannya. Coba hover sendiri di preview.

Hint

Class biasa mengatur tampilan normal tombol. Awalan hover: menimpa salah satunya selama kursor ada di atas tombol.
Semua class ada di satu atribut class di <button id="btn">: warna latar, warna teks, padding kiri-kanan, padding atas-bawah, sudut, lalu versi hover-nya.
<button id="btn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">Hover Saya</button>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Hover & States — Tailwind CSS

Hint

Memperbarui Aplikasi