Đoạn Mã
Tìm thành phần hoàn hảo cho dự án tiếp theo của bạn.
Accordion (FAQ) Pure CSS
Component Accordion (dành cho mục FAQ) tối ưu trợ năng, được xây dựng hoàn toàn bằng cặp thẻ HTML details/summary kết hợp CSS, không sử dụng JavaScript.
FAQ Accordion
Được triển khai chỉ với chi tiết/phần tử tóm tắt HTML5 và CSS, không cần JavaScript. Một đàn accordion dễ tiếp cận dành cho các Câu hỏi thường gặp với hình ảnh động mở và đóng mượt mà.
Accordion Hình Ảnh
Một chiếc đàn accordion không chỉ hiển thị văn bản mà còn có hình nền đẹp khi bạn mở bảng điều khiển.
nhóm avatar chồng chéo
Giao diện người dùng hình đại diện với nhiều biểu tượng người dùng xếp chồng lên nhau và huy hiệu cho biết số người còn lại.
Background Gradient Animation
Hiệu ứng background gradient chuyển màu mượt mà, được xây dựng hoàn toàn bằng CSS thuần.
Mesh Gradient Động
Đây là thành phần nền phân cấp dạng lưới động, trong đó màu sắc thay đổi và hòa quyện một cách mượt mà, chỉ được triển khai bằng CSS.
Background Aurora
Hiệu ứng nền tuyệt vời giống như cực quang với nhiều đốm màu hình bầu dục và bộ lọc hoạt hình. Được triển khai bằng CSS thuần túy.
Background Particle Field
Hiệu ứng nền tạo ra các hạt nổi bằng hoạt ảnh CSS
Background Chấm Bi Động
Đây là thành phần nền sử dụng CSS radial-gradient để vẽ họa tiết chấm bi rõ ràng kèm theo hoạt ảnh.
Pulsing Status Badge
Huy hiệu có hoạt ảnh lượn sóng (Pulse) nhấn mạnh rằng bạn đang trực tuyến hoặc phát trực tiếp.
Button Cyberpunk
Thành phần nút tương lai với các hiệu ứng neon và hoạt ảnh trục trặc trông rất đẹp mắt trên chủ đề tối.
Button Viền Gradient
Thành phần nút này có đường viền chuyển màu xoay đẹp mắt bằng cách kết hợp CSS `-webkit-mask-composite` và chuyển màu động.
Button Hiệu Ứng Chất Lỏng
Nút chứa đầy chất lỏng theo từng đợt từ dưới lên khi di chuột
Button Magnetic
Thành phần nút từ tính tương tác di chuyển êm ái theo con trỏ chuột như thể nó bị hút từ tính.
Button Neumorphism
UI Button phong cách Neumorphism mang lại cảm giác mềm mại với hiệu ứng 3D tinh tế, được implement bằng CSS thuần.
Button Shimmer
Một thành phần nút đẹp mắt phát ra dải ánh sáng (hiệu ứng lung linh) khi di chuột và định kỳ.
Card Lật 3D
Thành phần thẻ tương tác lật trong không gian 3D khi di chuột
Card Profile Glass
Một thẻ hồ sơ người dùng trong mờ, trang nhã sử dụng hiệu ứng kính mờ (hình thái thủy tinh).
Card Glassmorphism
UI Component Card mang phong cách Glassmorphism hiện đại, sử dụng hiệu ứng kính mờ (frosted glass) để tạo chiều sâu và sự tinh tế.
Card Neon Glow
Đây là thành phần giao diện người dùng thẻ tương tác trong đó cạnh của thẻ sáng lên như đèn neon khi được di chuột và đèn chiếu sẽ di chuyển tùy theo vị trí của chuột.
Card Bảng Giá Động
Thành phần thẻ định giá hiện đại được làm nổi bật khi di chuột và có phần định giá động.
Card Thống Kê
Đây là thành phần thẻ thống kê lý tưởng cho trang tổng quan và trang đích, vì các con số hoạt hình và đếm từ 0 khi cuộn trang.
băng chuyền marquee vô hạn
Một thành phần cho phép logo và thẻ cuộn theo chiều ngang mà không bị gián đoạn.
Layout Mega Footer
Chân trang lớn với các liên kết nhiều cột, đăng ký bản tin và các biểu tượng mạng xã hội.
Search Bar Động
Thanh tìm kiếm tối giản mở rộng mượt mà khi bạn nhấp vào biểu tượng.
Custom Toggle Switch
Cách xây dựng custom toggle switch hiện đại với hiệu ứng animation mượt mà, thay thế hoàn toàn cho checkbox mặc định.
Dropzone Upload File
Khu vực tải lên tập tin hiện đại với hỗ trợ kéo và thả.
Input Floating Label
Trường nhập liệu hiện đại có phần giữ chỗ bật lên mượt mà dưới dạng nhãn khi được lấy tiêu điểm.
Form Nhiều Bước
Giao diện người dùng chuyển đổi giữa nhiều bước (có chỉ báo tiến trình), thường được sử dụng trên màn hình đăng ký, v.v.
Input OTP
Thành phần đầu vào OTP gồm 6 chữ số trực quan sẽ tự động lấy nét khi bạn nhập một ký tự đơn và quay lại hộp trước đó bằng phím lùi. Cũng hỗ trợ dán.
Thanh Đo Độ Mạnh Mật Khẩu
Giao diện người dùng hiển thị trực quan độ mạnh của mật khẩu đã nhập.
Layout Bento Grid
Bố cục lưới hộp bento hiện đại, không đối xứng, phổ biến cho phần giới thiệu tính năng và bảng điều khiển.
Layout Masonry
Bố cục lưới không đều đẹp mắt theo phong cách Pinterest sử dụng Cột CSS
CSS Grid Gallery Responsive
Cách xây dựng image gallery responsive sử dụng auto-fit và minmax mà không cần đến media queries.
Sidebar Kèm Header
Bố cục cơ bản của một ứng dụng web hiện đại với thanh bên cố định ở bên trái và tiêu đề ở trên cùng. Lý tưởng cho màn hình quản lý và các sản phẩm SaaS.
Loading Spinner Pure CSS
Một loading spinner mang phong cách hiện đại và tinh tế, tận dụng sức mạnh của conic-gradient và mask trong CSS để loại bỏ hoàn toàn việc sử dụng hình ảnh hay JavaScript.
Loader Dots Wave
Thành phần trình tải hoạt ảnh CSS thuần túy không yêu cầu bất kỳ JavaScript nào, có 5 dấu chấm lượn sóng.
Loader Text Glitch
Màn hình tải văn bản với hiệu ứng trục trặc kiểu cyberpunk.
Loader Progress Bar
Đây là thành phần trình tải thực hiện ba loại hoạt ảnh trên thanh tiến trình: chuyển màu, sọc và xung bằng CSS thuần túy.
Loader Pulse Ring
Một vòng quay tải với hoạt ảnh chuyển màu và vòng tròn lan truyền như những gợn sóng.
Loader Skeleton
Giao diện người dùng Skeleton với hình ảnh động lung linh phong phú được hiển thị trong khi tải nội dung
Modal Glassmorphism
Một hộp thoại kiểu thủy tinh đẹp mắt với nền mờ.
Điều Hướng Breadcrumb
Điều hướng đường dẫn hình mũi tên hiện đại và đẹp mắt
Thanh Điều Hướng Floating Dock
Điều hướng dock nổi giống như macOS nơi các biểu tượng mở rộng khi được di chuột.
Hamburger Menu Animation
Hamburger menu với micro-interaction hiện đại, chuyển đổi mượt mà thành biểu tượng 'X' khi click.
Sidebar Menu Thu Gọn
Đây là điều hướng thanh bên có thể được sử dụng trên trang tổng quan, v.v. và có thể thu gọn về trạng thái chỉ có biểu tượng.
Sticky Navbar
Thành phần thanh điều hướng cố định cố định với hiệu ứng hình thái thủy tinh và chuyển sang kiểu thu gọn khi bạn cuộn.
Section Card Tính Năng
Phần thẻ giới thiệu tính năng cho SaaS/trang đích. Thành phần giao diện người dùng thẻ có đường viền chuyển màu phát sáng dịu nhẹ khi di chuột.
Background Video Hero
Đây là phần chính đặt video lặp lại ở chế độ nền để tạo tác động trực quan cho video.
Section Hero Chia Đôi
Kiểu chữ và hình ảnh đậm nét được chia thành các phần bên trái và bên phải, với phần chính sẽ trượt vào khi tải.
Pricing Table Responsive (Tailwind CSS)
Component Bảng giá (Pricing Table) hiện đại và responsive tuyệt đối, thiết kế chuẩn mực dành cho các sản phẩm SaaS. Được build hoàn toàn bằng Tailwind CSS.
Slider Testimonial
Phần thanh trượt để hiển thị băng chuyền đánh giá của người dùng
Section Timeline Dọc
Dòng thời gian theo chiều dọc thể hiện các giai đoạn và lịch sử của một dự án.
Tab Underline Động
Điều hướng tab với các chỉ báo gạch chân giúp theo dõi các tab đang hoạt động một cách mượt mà.
Toast Thông Báo Thành Công
Một thông báo nâng cốc chúc mừng bật lên thông báo cho người dùng về một thao tác thành công.
Tooltip Magnetic Động
Chú giải công cụ hoạt hình mờ dần tinh vi theo dõi chuyển động của con trỏ trên phần tử một cách mượt mà.
Context Menu
Menu ngữ cảnh chuột phải tùy chỉnh với thiết kế phong phú
Tooltip Pure CSS
Thành phần tooltip nhẹ và có hiệu ứng hover mượt mà, được phát triển hoàn toàn bằng CSS thuần, không dùng JavaScript.
Popover Menu
Menu bật lên mở ra khi nhấp chuột (hoặc tiêu điểm) và hiển thị danh sách hành động, thay vì khi di chuột.