Kumpulan komponen UI siap pakai untuk PortalKebumen.com — dibangun dengan Tailwind CSS v3.4 (compiled, tanpa CDN) dan konsisten dengan style guide brand (warna navy/oranye, font Fraunces + Public Sans). Setiap komponen dilengkapi contoh markup agar tim developer tinggal salin-tempel ke Blade/Livewire.
Token warna dan font dari tailwind.config.js.
Class: .btn-primary, .btn-secondary, .btn-outline, .btn-danger, .btn-ghost
<button class="btn-primary">Simpan Artikel</button>
<button class="btn-secondary">Batal</button>
<button class="btn-outline btn-sm">Pratinjau</button>
<button class="btn-danger" disabled>Hapus</button>Dipakai untuk status artikel, label rubrik, dan penanda kecil lainnya.
<span class="badge-success"><span class="badge-dot"></span>Published</span>
<span class="rubric-tag is-accent">Breaking News</span>Class: .form-input, .form-select, .form-textarea, .form-checkbox, .form-radio
<label class="form-label">Judul Artikel</label>
<input type="text" class="form-input" placeholder="...">
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="toggle-input sr-only peer">
<span class="toggle-track"></span>
</label>Class dasar: .card, .card-header, .card-body, .card-footer
Bagus Prakoso · 2 Jul 2026
42 artikel diterbitkan bulan ini · rata-rata 1.150 views/artikel.
Tabel data ringkas dengan status pill dan aksi baris. Bungkus dengan overflow-x-auto agar responsif di layar kecil.
| Nama | Role | Status | Aksi |
|---|---|---|---|
| Rian Dwi P. | Editor | Aktif | |
| Bagus Prakoso | Reporter | Nonaktif |
Class: .alert-info · .alert-success · .alert-warning · .alert-danger
Fungsional — klik tombol untuk membuka. Ditutup dengan tombol X, klik area gelap, atau tombol Esc.
<button data-modal-open="modal-hapus">Buka</button>
<div id="modal-hapus" class="modal-overlay hidden fixed inset-0 ...">
<div class="bg-white rounded-card ...">
...
<button data-modal-close>Batal</button>
</div>
</div>Fungsional — klik label tab untuk berpindah panel.
<div data-tabs="editor-tabs">
<button class="tab-btn is-active" data-tab-btn="konten">Konten</button>
<button class="tab-btn" data-tab-btn="seo">SEO</button>
</div>
<div data-tab-panel="konten">...</div>
<div data-tab-panel="seo" class="hidden">...</div>Menggunakan elemen native <details> — fungsional tanpa JavaScript.
Fungsional — klik tombol untuk membuka, klik di luar untuk menutup.
Pure CSS (hover/focus) — class .tooltip-wrap + .tooltip-box.
Placeholder animasi saat data sedang dimuat — pakai utility animate-pulse bawaan Tailwind.
Artikel yang kamu buat akan muncul di sini. Mulai dengan menulis artikel pertamamu.
Menggunakan TinyMCE 8 (Community, self-hosted) — pustaka editor teks kaya paling lengkap yang tersedia gratis, dibundel langsung ke dalam berkas ini tanpa panggilan ke CDN eksternal saat dibuka, dan diterjemahkan penuh ke Bahasa Indonesia. Toolbar mencakup heading, font, ukuran, warna teks/latar, super/subscript, list, indent, arah teks, rata teks, kutipan, tabel, sisipan gambar & media, kode sumber, karakter khusus, emoji, pencarian & ganti, layar penuh, dan pratinjau.
Implementasi: initRichEditor('#demo-editor-komponen') — pembungkus tipis di atas tinymce.init({...}) dengan konfigurasi baku (lisensi GPL gratis, bahasa Indonesia, integrasi Media Picker). Untuk dipakai di form Tambah/Edit Artikel, ambil isi editor dengan tinymce.get(id).getContent() lalu kirim sebagai field content ke server — lihat implementasinya langsung di halaman Artikel.