Latihan 1: Flexbox Utilities — Tailwind CSS

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

Ubah <div id="nav"> yang sudah ada jadi navbar: Logo di kiri, Menu di kanan.

Tambahkan class="flex items-center justify-between p-4" di <div id="nav">.
Biarkan dua <span> di dalamnya, Logo dan Menu, seperti di kode awal.

Yang dicek di #nav:

display: flex (dari class flex)
align-items: center (dari class items-center)
justify-content: space-between (dari class justify-between)

p-4 memberi jarak dalam 16px supaya rapi. Bagus dipasang, tapi gak ikut dicek.

Hint

Semua class Flexbox dipasang di induknya, yaitu #nav, bukan di span-nya. Dan class pertama yang wajib ada adalah flex.
flex menyalakan Flexbox, justify-between menempelkan Logo ke kiri dan Menu ke kanan, items-center merata-tengahkan keduanya dari atas ke bawah.
<div id="nav" class="flex items-center justify-between p-4"> <span>Logo</span> <span>Menu</span> </div>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Flexbox Utilities — Tailwind CSS

Hint

Memperbarui Aplikasi