Cuplikan Kode
Temukan komponen sempurna untuk proyek Anda berikutnya.
Akordeon Murni CSS (FAQ)
Komponen akordeon (FAQ) ramah aksesibilitas, diimplementasikan memanfaatkan elemen details/summary HTML dan CSS tanpa menggunakan JavaScript.
Akordeon FAQ
Diimplementasikan hanya dengan elemen detail/ringkasan HTML5 dan CSS, tidak diperlukan JavaScript. Akordeon yang dapat diakses untuk FAQ dengan animasi pembukaan dan penutupan yang halus.
Akordeon Gambar
Akordeon yang tidak hanya menampilkan teks tetapi juga gambar latar belakang yang indah saat Anda membuka panel.
grup avatar yang tumpang tindih
UI Avatar dengan beberapa ikon pengguna yang bertumpuk dan lencana yang menunjukkan berapa banyak orang yang tersisa.
Latar Belakang Gradasi Animasi
Latar belakang gradasi menawan dengan transisi warna yang halus, diimplementasikan murni dengan CSS.
Mesh Gradient Animasi
Ini adalah komponen latar belakang gradasi mesh dinamis di mana warna berubah dan bercampur dengan mulus, diimplementasikan hanya dengan menggunakan CSS.
Background Aurora
Efek latar belakang fantastis yang mengalir seperti aurora borealis dengan beberapa gumpalan oval animasi dan filter. Diimplementasikan dengan CSS murni.
Background Partikel
Efek latar belakang yang menghasilkan partikel mengambang menggunakan animasi CSS
Background Polkadot Animasi
Ini adalah komponen latar belakang yang menggunakan gradien radial CSS untuk menggambar pola polkadot bersih dengan animasi.
Pulsing Status Badge
Lencana dengan animasi bergelombang (Pulsa) yang menekankan bahwa Anda sedang online atau streaming langsung.
Tombol Cyberpunk
Komponen tombol futuristik dengan efek neon dan animasi glitch yang tampak bagus pada tema gelap.
Tombol Border Gradient
Komponen tombol ini memiliki batas gradien berputar yang indah dengan menggabungkan CSS `-webkit-mask-composite` dan gradien animasi.
Tombol Liquid Fill
Tombol yang berisi cairan berbentuk gelombang dari bawah saat diarahkan
Tombol Magnetik
Komponen tombol magnetis interaktif yang mengikuti kursor mouse dengan mulus seolah-olah tertarik secara magnetis.
Tombol Neumorphism
UI tombol bergaya Neumorphism dengan tekstur tiga dimensi yang lembut, diimplementasikan murni dengan CSS.
Tombol Shimmer
Komponen tombol cantik yang memancarkan pita cahaya (efek kilau) saat diarahkan dan berkala.
Kartu Flip 3D
Komponen kartu interaktif yang membalik dalam ruang 3D saat diarahkan
Kartu Profil Glass
Kartu profil pengguna yang elegan dan tembus cahaya yang memanfaatkan efek kaca buram (glassmorphism).
Kartu Glassmorphism
Komponen UI kartu desain glassmorphism yang modern dan elegan, menggunakan efek transparansi dan blur seperti kaca buram.
Kartu Glow Neon
Ini adalah komponen UI kartu interaktif yang tepi kartunya menyala seperti lampu neon saat diarahkan, dan sorotan bergerak bergantung pada posisi mouse.
Kartu Harga Animasi
Komponen kartu harga modern yang disorot saat diarahkan dan memiliki bagian harga animasi.
Kartu Counter Statistik
Ini adalah komponen kartu statistik yang ideal untuk dasbor dan halaman arahan, karena angka-angkanya bernyawa dan dihitung dari nol saat halaman bergulir.
korsel tenda tak terbatas
Komponen yang memungkinkan logo dan kartu bergulir secara horizontal tanpa gangguan.
tata letak mega footer
Footer besar dengan tautan multi-kolom, pendaftaran buletin, dan ikon media sosial.
Search Bar Animasi
Bilah pencarian minimalis yang meluas dengan mulus saat Anda mengeklik ikonnya.
Sakelar Toggle Kustom
Contoh implementasi sakelar toggle (toggle switch) kustom dengan animasi yang estetis sebagai pengganti kotak centang standar browser.
Dropzone Upload File
Area pengunggahan file modern dengan dukungan drag and drop.
Input Floating Label
Bidang masukan modern dengan placeholder yang muncul dengan mulus sebagai label saat difokuskan.
Form Multi-Langkah
UI yang beralih di antara beberapa langkah (dengan indikator kemajuan), sering digunakan pada layar pendaftaran, dll.
Input OTP
Komponen input OTP 6 digit intuitif yang fokus otomatis saat Anda memasukkan satu karakter dan kembali ke kotak sebelumnya dengan spasi mundur. Juga mendukung tempel.
Pengukur Kekuatan Password
UI yang secara visual menampilkan kekuatan kata sandi yang dimasukkan.
Layout Bento Grid
Tata letak kotak bento modern asimetris yang populer untuk pengenalan fitur dan dasbor.
Layout Masonry
Tata letak kisi tidak beraturan bergaya Pinterest yang indah menggunakan Kolom CSS
Galeri Grid CSS Responsif
Cara mengimplementasikan galeri gambar responsif menggunakan properti auto-fit dan minmax tanpa bergantung pada media query.
Sidebar dengan Header
Tata letak dasar aplikasi web modern dengan sidebar tetap di kiri dan header di atas. Ideal untuk layar manajemen dan produk SaaS.
Spinner Loading CSS Murni
Spinner loading modern dan elegan yang dibuat murni menggunakan conic-gradient dan mask CSS, tanpa gambar maupun JavaScript.
Loader Dots Wave
Komponen pemuat animasi CSS murni yang tidak memerlukan JavaScript apa pun, dengan 5 titik bergelombang.
Loader Teks Glitch
Layar pemuatan teks dengan efek kesalahan gaya cyberpunk.
Loader Progress Bar
Ini adalah komponen pemuat yang merealisasikan tiga jenis animasi bilah kemajuan: gradasi, garis, dan pulsa menggunakan CSS murni.
Loader Pulse Ring
Loading spinner dengan gradasi dan animasi dering yang menyebar seperti riak.
Loader Skeleton Screen
Skeleton UI dengan animasi berkilauan yang kaya ditampilkan saat konten dimuat
Modal Glassmorphism
Dialog modal indah seperti kaca dengan latar belakang buram.
Navigasi Breadcrumb
Navigasi remah roti berbentuk panah yang modern dan indah
Navigasi Floating Dock
Navigasi dok mengambang seperti macOS di mana ikon meluas saat diarahkan.
Animasi Menu Hamburger
Implementasi animasi menu hamburger yang estetis dan interaktif, bertransisi mulus menjadi ikon 'X' saat diklik.
Menu Sidebar Collapsible
Ini adalah navigasi sidebar yang dapat digunakan di dasbor, dll., dan dapat diciutkan ke status hanya ikon.
Sticky Navbar
Komponen bilah navigasi lengket yang membeku dengan efek morfisme kaca dan berubah menjadi gaya ringkas saat Anda menggulir.
Section Kartu Fitur
Bagian kartu pengenalan fitur untuk SaaS/halaman arahan. Komponen UI kartu dengan batas gradasi yang bersinar lembut saat diarahkan.
Background Video Hero
Ini adalah bagian pahlawan yang menempatkan video berulang di latar belakang untuk memberikan dampak visual.
Split Hero Section
Tipografi dan visual yang tebal dibagi menjadi bagian kiri dan kanan, dengan bagian pahlawan yang dapat digeser saat dimuat.
Tabel Harga Responsif Menggunakan Tailwind CSS
Komponen antarmuka (UI) Tabel Harga yang modern dan responsif—ideal untuk platform SaaS—diimplementasikan sepenuhnya menggunakan Tailwind CSS.
Slider Testimonial
Bagian penggeser untuk menampilkan carousel ulasan pengguna
Section Timeline Vertikal
Garis waktu vertikal yang mewakili fase dan sejarah suatu proyek.
Tab Underline Animasi
Navigasi tab dengan indikator garis bawah yang mengikuti tab aktif dengan lancar.
Notifikasi Toast Sukses
Pemberitahuan pop-up yang memberi tahu pengguna tentang operasi yang berhasil.
Tooltip Magnetik Animasi
Tooltip animasi fade-in canggih yang mengikuti pergerakan kursor di atas elemen dengan lancar.
Context Menu
Menu konteks klik kanan khusus dengan desain yang kaya
Tooltip CSS Murni
Tooltip yang ringan dan mulus saat diarahkan (hover), diimplementasikan murni dengan CSS tanpa memerlukan JavaScript.
Menu Popover
Menu popover yang terbuka saat diklik (atau fokus) dan menampilkan daftar tindakan, bukan saat diarahkan.