Latihan 1: Border & Rounded — Tailwind CSS

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

Starter-nya punya <div id="card">. Biarkan id dan teksnya, lalu beri class="border border-gray-300 rounded-xl p-4":

border: garis tepi 1px.
border-gray-300: warna garisnya abu-abu muda.
rounded-xl: sudutnya membulat 12px.
p-4: padding 16px.

Yang dicek di #card:

#card masih ada.
border-radius = 12px (rounded-xl).
padding = 16px di semua sisi (p-4).

Garis dan warnanya juga dicek: class border dan border-gray-300 harus ada di #card.

Hint

Garis tepi dan sudut bulat itu dua class terpisah: border memasang garis, rounded- membulatkan sudut, p- memberi padding.
Skala rounded: lg 8px, xl 12px, 2xl 16px. Padding 16px = p-4. Semuanya di atribut class div id card.
<div id="card" class="border border-gray-300 rounded-xl p-4">Kartu dengan border</div>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Border & Rounded — Tailwind CSS

Hint

Memperbarui Aplikasi