Latihan 1: Transform — Tailwind CSS

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

Bikin kotak miring cuma dengan class Tailwind. Kode awal sudah punya <div id="rotated"> berisi teks Miring!, biarkan id dan teksnya.

Tambahkan atribut class ke <div id="rotated">.
Isi class-nya: rotate-12 bg-blue-500 text-white p-4 w-32.
Jangan tulis atribut style di mana pun.

Yang dicek:

#rotated ada.
Padding #rotated persis 16px, yaitu hasil p-4.
Atribut class-nya berisi class putaran, misalnya rotate-12.
Gak ada atribut style di kodenya.

bg-blue-500, text-white, dan w-32 bikin kotaknya kelihatan rapi, tapi gak ikut dicek.

Hint

Di Tailwind, memutar elemen cukup satu class: rotate- lalu angka derajatnya. Gaya yang lain juga lewat class, bukan atribut style.
Tambahkan class="..." di div id rotated. Isinya lima class: putaran 12 derajat, background blue-500, teks putih, padding 4 (16px), dan lebar 32.
<div id="rotated" class="rotate-12 bg-blue-500 text-white p-4 w-32">Miring!</div>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Transform — Tailwind CSS

Hint

Memperbarui Aplikasi