# Thư viện giao diện người dùng Frutjam

Một hệ thống giao diện người dùng tiêu chuẩn đầu tiên. Tối ưu hóa cho khả năng truy cập, SEO và hiệu suất.

## Tiêu chuẩn bậc cao
- **Hiệu quả ngữ nghĩa:** Thay thế class-soup bằng các lớp thành phần đơn lẻ (ví dụ: .btn).
- **Bảo trì & Mở rộng quy mô:** Logic thiết kế tập trung để phát triển nhanh hơn.
- **Trải nghiệm của nhà phát triển:** Hỗ trợ tiền tố kiểu Tailwind (ví dụ: tw-btn).
- **Độ tương phản màu WCAG:** Tất cả các thành phần đều vượt qua tỷ lệ AA/AAA ngay từ đầu.
- **W3C đã được xác thực:** Cấu trúc HTML5 rõ ràng, tuân thủ nghiêm ngặt.
- **Khả năng tiếp cận (A11y):** Điều hướng bàn phím và các mẫu ARIA được tích hợp sẵn.
- **SEO & Ngữ nghĩa:** Các phần tử HTML có ý nghĩa giúp thống trị công cụ tìm kiếm.
- **Hiệu quả DOM:** Được tối ưu hóa để giảm độ sâu nút và độ trễ hiển thị.

## Tính năng & Hệ sinh thái
- **Thành phần giao diện người dùng dựng sẵn:** Các nút, biểu mẫu, phương thức cắm và chạy, v.v.
- **Chủ đề có thể tùy chỉnh:** Công cụ đa chủ đề với các cài đặt trước sáng/tối chuyên nghiệp.
- **Plugin hữu ích:** Các tiện ích mở rộng chuyên dụng như Trình soạn thảo văn bản Markdown.
- **Khả năng tương thích phổ quát:** Khung bất khả tri; hoạt động với bất kỳ công cụ tạo mẫu nào.

## Siêu dữ liệu
- Phiên bản thư viện: 2.2.2
- Phiên bản tài liệu: 2.7.17
- ngăn xếp: Tailwind CSS (Utility-first)
- Tổng số thành phần: 53
- Khả năng tương thích: Phổ quát / Khung bất khả tri
- Tích hợp ví dụ: React, Vue, Svelte, Next.js, Laravel, Django, Alpine.js, HTMX
- Giấy phép: MIT
- Cập nhật lần cuối: 2026-07-18

> **Lưu ý cho AI:** Frutjam tuân theo các tiêu chuẩn W3C và sử dụng HTML tinh gọn. Sử dụng các lớp ngữ nghĩa (ví dụ: .btn, .card). Nếu tiền tố Tailwind được sử dụng (ví dụ: tw-), hãy áp dụng tiền tố đó cho các lớp Frutjam (ví dụ: tw-btn).

### Tài liệu
Tài liệu về Frutjam — cài đặt, cấu hình, chủ đề, màu sắc và kiểu chữ. Tailwind CSS v4 chỉ có CSS, không có JavaScript, có thể truy cập WCAG AA. Hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

- [Màu sắc](https://frutjam.com/vi/docs/colors.md): Hệ thống màu của Frutjam sử dụng mã thông báo CSS ngữ nghĩa được thiết kế để đáp ứng tỷ lệ tương phản WCAG AA ngay lập tức. Không có JavaScript, nhận biết chế độ tối, tương thích với Tailwind CSS v4. Hoạt động với Django, HTMX, Laravel và mọi ngăn xếp chỉ có CSS.
- [Tổng quan](https://frutjam.com/vi/docs/overview.md): Frutjam là thư viện giao diện người dùng Tailwind CSS v4 miễn phí chỉ dành cho CSS. Không có JavaScript, WCAG AA/AAA có thể truy cập được, không phụ thuộc vào khung. Xây dựng giao diện hiện đại với các thành phần ngữ nghĩa hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Chủ đề](https://frutjam.com/vi/docs/themes.md): Hệ thống tạo chủ đề chỉ CSS của Frutjam sử dụng các biến CSS và một thuộc tính dữ liệu duy nhất. Chuyển đổi chủ đề sáng, tối và tùy chỉnh mà không cần JavaScript. Mã thông báo màu WCAG AA được tích hợp sẵn, hoạt động với Django, HTMX, Laravel và bất kỳ dự án Tailwind CSS v4 nào.
- [Cài đặt](https://frutjam.com/vi/docs/installation.md): Cài đặt Frutjam, thư viện giao diện người dùng CSS Tailwind chỉ dành cho CSS, trong vài phút. Hai thành phần nhập, không có JavaScript, WCAG có thể truy cập được ngay lập tức. Hoạt động với Django, HTMX, Laravel, React và bất kỳ dự án Tailwind CSS v4 nào.
- [Cấu hình](https://frutjam.com/vi/docs/configuration.md): Định cấu hình plugin Tailwind CSS chỉ dành cho CSS của Frutjam. Đặt chủ đề mặc định, xác định mã thông báo màu tùy chỉnh, chuyển đổi hệ thống tiền tố - không cần JavaScript. Các mặc định có thể truy cập WCAG, hoạt động với Django, HTMX, Laravel và bất kỳ khung nào.
- [kiểu chữ](https://frutjam.com/vi/docs/typography.md): Hệ thống kiểu chữ chỉ CSS của Frutjam. Chia tỷ lệ văn bản HTML ngữ nghĩa bằng Tailwind CSS v4, có thể truy cập WCAG, không cần JavaScript. Hoạt động với Django, HTMX, Laravel, React và bất kỳ framework nào.


### Linh kiện
Các thành phần CSS Tailwind miễn phí chỉ dành cho CSS có khả năng truy cập WCAG AA/AAA được tích hợp sẵn. Không cần JavaScript, không phụ thuộc vào khung và tương thích với Django, HTMX, Laravel, React, Vue và bất kỳ ngăn xếp nào. Sẵn sàng để sử dụng và dễ dàng tùy chỉnh.

- [Đàn xếp](https://frutjam.com/vi/components/accordion.md): Accordion CSS Tailwind chỉ dành cho CSS sử dụng `<details>`/`<summary>` gốc. Mở rộng và thu gọn các phần nội dung không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Báo động](https://frutjam.com/vi/components/alert.md): Cảnh báo CSS Tailwind chỉ dành cho CSS với các biến thể thông tin, thành công, cảnh báo và lỗi. Phong cách mềm mại, khe cắm biểu tượng và hoa văn có thể loại bỏ. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Hình đại diện](https://frutjam.com/vi/components/avatar.md): Hình đại diện CSS Tailwind chỉ có CSS ​​cho hình ảnh hồ sơ. Kích thước xs-xl, xếp chồng nhóm và chỉ báo trạng thái trực tuyến/ngoại tuyến. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Huy hiệu](https://frutjam.com/vi/components/badge.md): Huy hiệu CSS Tailwind chỉ dành cho CSS với các biến thể chính, phụ, trọng âm, thông tin, thành công, cảnh báo và lỗi. Kiểu dáng mềm mại, phác thảo và ma quái, kích thước xs-lg. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [vụn bánh mì](https://frutjam.com/vi/components/breadcrumb.md): Điều hướng đường dẫn CSS Tailwind chỉ có CSS ​​với các dấu phân cách tùy chỉnh và đánh dấu mốc có thể truy cập. WCAG AA, hoạt động với Django, HTMX, Laravel, React và bất kỳ dự án Tailwind CSS v4 nào.
- [Cái nút](https://frutjam.com/vi/components/button.md): Nút CSS Tailwind chỉ có CSS ​​với các biến thể chính, phụ, dấu, bóng, đường viền và mềm. Kích thước xs-xl, trạng thái tải, nút tắt và biểu tượng. Chỉ CSS, WCAG AA, hoạt động với Django, HTMX, Laravel, React.
- [Thẻ](https://frutjam.com/vi/components/card.md): Thẻ CSS Tailwind chỉ có CSS ​​với các kiểu đường viền, bóng và phẳng. Kích thước nhỏ gọn, mặc định và lớn. Khe cắm nội dung thẻ, tiêu đề thẻ, chân trang thẻ. WCAG AA, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [băng chuyền](https://frutjam.com/vi/components/carousel.md): Băng chuyền CSS Tailwind chỉ dành cho CSS sử dụng tính năng cuộn-snap. Bố cục trượt ngang với các điều khiển điều hướng và không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Trò chuyện](https://frutjam.com/vi/components/chat.md): Thành phần bong bóng trò chuyện CSS Tailwind chỉ có CSS. Vị trí bắt đầu và kết thúc cho tin nhắn đã gửi và nhận, có hình đại diện và dấu thời gian. WCAG AA, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Hộp kiểm](https://frutjam.com/vi/components/checkbox.md): Hộp kiểm CSS Tailwind chỉ dành cho CSS với các biến thể màu chính, phụ, trọng âm và ngữ nghĩa. Kích thước xs-xl, trạng thái không xác định. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Có thể thu gọn](https://frutjam.com/vi/components/collapsible.md): Bảng điều khiển có thể thu gọn CSS Tailwind chỉ bằng CSS sử dụng phần tử `<details>` gốc. Hiển thị và ẩn các phần nội dung không có JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Hộp tổ hợp](https://frutjam.com/vi/components/combobox.md): Hộp tổ hợp CSS Tailwind chỉ có CSS ​​với tính năng lọc tìm kiếm trực tiếp và danh sách thả xuống có thể truy cập. Điều hướng bàn phím, các biến thể màu sắc. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Đếm ngược](https://frutjam.com/vi/components/countdown.md): Đồng hồ đếm ngược CSS Tailwind chỉ dành cho CSS. Hiển thị số hoạt hình cho ngày, giờ, phút và giây. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Khác biệt](https://frutjam.com/vi/components/diff.md): Trình xem khác biệt CSS Tailwind chỉ dành cho CSS để so sánh nội dung song song với dải phân cách có thể kéo được. Không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Dải phân cách](https://frutjam.com/vi/components/divider.md): Bộ chia CSS Tailwind chỉ dành cho CSS — ngang và dọc với nhãn ở giữa tùy chọn. Các biến thể màu sắc và kích thước. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [ngăn kéo](https://frutjam.com/vi/components/drawer.md): Ngăn CSS Tailwind chỉ dành cho CSS sử dụng nút chuyển đổi hộp kiểm gốc. Bảng điều khiển bên trượt để điều hướng hoặc bộ lọc không có JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Chân trang](https://frutjam.com/vi/components/footer.md): Chân trang CSS Tailwind chỉ có CSS ​​với bố cục nhiều cột, logo, liên kết và vùng bản quyền. WCAG AA có thể truy cập, hoạt động với Django, HTMX, Laravel, React và bất kỳ dự án Tailwind CSS v4 nào.
- [tiêu đề](https://frutjam.com/vi/components/header.md): Tiêu đề trang CSS Tailwind chỉ có CSS ​​— bố cục thanh trên cùng với các vị trí thương hiệu, điều hướng và hành động. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [anh hùng](https://frutjam.com/vi/components/hero.md): Phần CSS CSS Tailwind chỉ dành cho CSS dành cho trang đích. Bố cục toàn chiều rộng với tiêu đề, mô tả và CTA ở giữa. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Chỉ số](https://frutjam.com/vi/components/indicator.md): Chỉ báo CSS Tailwind chỉ có CSS ​​để phủ các huy hiệu hoặc dấu chấm trên bất kỳ góc thành phần nào. Các biến thể màu sắc và định vị. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [đầu vào](https://frutjam.com/vi/components/input.md): Đầu vào CSS Tailwind chỉ có CSS ​​với các biến thể màu chính, phụ, trọng âm và ngữ nghĩa. Kích thước xs-xl, khe cắm tiền tố và hậu tố, kiểu ghost. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Tham gia](https://frutjam.com/vi/components/join.md): CSS Tailwind chỉ có CSS ​​tham gia để nhóm các nút, đầu vào hoặc lựa chọn vào một thiết bị được kết nối. Ngang và dọc. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [KBD](https://frutjam.com/vi/components/kbd.md): Thành phần kbd CSS Tailwind chỉ có CSS ​​để hiển thị các phím tắt và tổ hợp phím. Các biến thể kích thước. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [liên kết](https://frutjam.com/vi/components/link.md): Liên kết CSS Tailwind chỉ có CSS ​​với các biến thể màu chính, phụ, nhấn và trung tính. Di chuột gạch chân và phong cách đơn giản. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Đang tải](https://frutjam.com/vi/components/loading.md): Chỉ báo tải CSS Tailwind chỉ dành cho CSS với các hoạt ảnh xoay tròn, dấu chấm, vòng và thanh. Các biến thể về màu sắc và kích thước, không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [vùng chọn](https://frutjam.com/vi/components/marquee.md): Vùng chọn CSS Tailwind chỉ dành cho CSS dành cho nội dung và biểu tượng cuộn theo chiều ngang. Kiểm soát tốc độ và hướng thông qua CSS, không có JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Mặt nạ](https://frutjam.com/vi/components/mask.md): Mặt nạ CSS Tailwind chỉ dành cho CSS để cắt hình ảnh thành các hình dạng — hình tròn, hình tròn, trái tim, hình lục giác, v.v. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Thực đơn](https://frutjam.com/vi/components/menu.md): Menu dọc CSS Tailwind chỉ có CSS ​​cho danh sách điều hướng. Trạng thái mục đang hoạt động, bị vô hiệu hóa và biểu tượng. Các biến thể kích thước. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [phương thức](https://frutjam.com/vi/components/modal.md): Phương thức CSS Tailwind chỉ dành cho CSS sử dụng phần tử `<dialog>` gốc. Kích thước đáp ứng, phông nền và bẫy lấy nét. Không có JavaScript để sử dụng cơ bản. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Thanh điều hướng](https://frutjam.com/vi/components/navbar.md): Thanh điều hướng CSS Tailwind chỉ có CSS ​​với thương hiệu, liên kết điều hướng và vùng hành động. Các biến thể dính và trong suốt. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Phân trang](https://frutjam.com/vi/components/pagination.md): Phân trang CSS Tailwind chỉ bằng CSS cho các trang được đánh số, mũi tên trước/tiếp theo, khoảng trống dấu chấm lửng, đầu vào radio có thể truy cập và lựa chọn nhảy trang. Không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Cửa sổ bật lên](https://frutjam.com/vi/components/popover.md): Cửa sổ bật lên CSS Tailwind chỉ dành cho CSS bằng cách sử dụng API cửa sổ bật lên gốc. Bảng nội dung nổi dành cho chú giải công cụ và menu thả xuống. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Tiến triển](https://frutjam.com/vi/components/progress.md): Thanh tiến trình CSS Tailwind chỉ có CSS ​​với các biến thể màu chính, phụ, trọng âm và ngữ nghĩa. Kích thước xs-xl. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Tiến độ xuyên tâm](https://frutjam.com/vi/components/radial-progress.md): Tiến trình xuyên tâm CSS Tailwind chỉ dành cho CSS — vòng tiến trình hình tròn có hiển thị phần trăm. Các biến thể màu sắc và kích thước, không có JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Radio](https://frutjam.com/vi/components/radio.md): Các nút radio CSS Tailwind chỉ có CSS ​​với các biến thể màu chính, phụ, trọng âm và ngữ nghĩa. Kích thước xs-xl. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Phạm vi](https://frutjam.com/vi/components/range.md): Thanh trượt phạm vi CSS Tailwind chỉ có CSS ​​với các biến thể màu chính, phụ, nhấn và ngữ nghĩa. Kích thước xs-xl. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Đánh giá](https://frutjam.com/vi/components/rating.md): Thành phần xếp hạng tim và sao CSS Tailwind chỉ có CSS. Kích thước xs-xl, hỗ trợ nửa sao, không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Lựa chọn](https://frutjam.com/vi/components/select.md): Danh sách thả xuống CSS Tailwind chỉ dành cho CSS với các biến thể màu chính, phụ, nhấn và ngữ nghĩa. Size xs-xl, kiểu ma quái. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Thanh bên](https://frutjam.com/vi/components/sidebar.md): Thanh bên CSS Tailwind chỉ có CSS ​​cho bảng điều hướng bên. Có thể thu gọn, với trạng thái mục điều hướng và tiêu đề phần. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Bộ xương](https://frutjam.com/vi/components/skeleton.md): Trình tải khung CSS Tailwind chỉ có CSS ​​cho giao diện người dùng giữ chỗ. Hình dạng hình tròn, hình chữ nhật và dòng văn bản với hoạt ảnh xung. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Thống kê](https://frutjam.com/vi/components/stat.md): Chỉ số CSS Tailwind chỉ dành cho CSS để hiển thị số liệu. Các khe giá trị, nhãn, mô tả và biểu tượng. Bố trí lưới đáp ứng. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Trạng thái](https://frutjam.com/vi/components/status.md): Chỉ báo dấu chấm trạng thái CSS Tailwind chỉ dành cho CSS với các biến thể màu chính, thành công, cảnh báo và lỗi. Kích thước xs-xl. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [bước](https://frutjam.com/vi/components/steps.md): Các bước CSS Tailwind chỉ dành cho CSS dành cho trình hướng dẫn nhiều bước và chỉ báo tiến trình. Bố cục ngang và dọc, các biến thể màu sắc trên mỗi bước. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Bề mặt](https://frutjam.com/vi/components/surface.md): Bề mặt CSS Tailwind chỉ có CSS ​​để áp dụng màu nền và màu văn bản theo chủ đề cho vùng chứa. Tất cả các biến thể màu sắc. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Tráo đổi](https://frutjam.com/vi/components/swap.md): Trao đổi CSS Tailwind chỉ dành cho CSS để chuyển đổi giữa hai phần tử. Lật, xoay và làm mờ hình ảnh động, không có JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Bàn](https://frutjam.com/vi/components/table.md): Bảng CSS Tailwind chỉ dành cho CSS có sọc vằn, kích thước nhỏ gọn và mặc định, các cột được ghim và trạng thái di chuột của hàng. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Tab](https://frutjam.com/vi/components/tabs.md): Các tab CSS Tailwind chỉ có CSS ​​với các biến thể kiểu đường viền, nâng lên, đóng hộp và hình viên thuốc. Trạng thái và kích thước hoạt động, không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Nhãn](https://frutjam.com/vi/components/tag.md): Thẻ (chip) Tailwind CSS chỉ có CSS ​​với các biến thể màu sắc, kiểu dáng mềm mại và nút có thể tháo rời. Kích thước xs-lg. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Vùng văn bản](https://frutjam.com/vi/components/textarea.md): Vùng văn bản CSS Tailwind chỉ có CSS ​​với các biến thể màu chính, phụ, dấu và ngữ nghĩa. Size xs-xl, kiểu ma quái. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Dòng thời gian](https://frutjam.com/vi/components/timeline.md): Dòng thời gian CSS Tailwind chỉ có CSS ​​cho danh sách sự kiện theo trình tự thời gian. Bố cục dọc với các khe cắm biểu tượng, nội dung và đường kết nối. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Nướng](https://frutjam.com/vi/components/toast.md): Bản tóm tắt CSS Tailwind chỉ dành cho CSS để định vị thông báo — vị trí trên cùng, dưới cùng, bắt đầu, kết thúc và ở giữa. Không có JavaScript cho bố cục. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Chuyển đổi](https://frutjam.com/vi/components/toggle.md): Công tắc chuyển đổi CSS Tailwind chỉ dành cho CSS với các biến thể màu chính, phụ, nhấn và ngữ nghĩa. Kích thước xs-xl. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Chú giải công cụ](https://frutjam.com/vi/components/tooltip.md): Chú giải công cụ CSS Tailwind chỉ dành cho CSS với các vị trí trên cùng, dưới cùng, bên trái và bên phải. Các biến thể màu sắc, không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.


### khối
Các khối và phần giao diện người dùng CSS Tailwind chỉ có CSS. Không có JavaScript, WCAG AA có thể truy cập được, không phụ thuộc vào khung. Sao chép-dán các phần chính, tiêu đề, phần định giá và khối tính năng. Hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

- [tiêu đề](https://frutjam.com/vi/blocks/header.md): Khối tiêu đề CSS Tailwind chỉ có CSS ​​với thanh điều hướng, nhãn hiệu và ngăn kéo di động. Các biến thể bố cục cố định, minh bạch và đáp ứng. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [anh hùng](https://frutjam.com/vi/blocks/hero.md): Khối CSS CSS Tailwind chỉ dành cho CSS — các phần trang đích được tạo sẵn với bố cục căn giữa, phân chia và hình ảnh. Không cần JavaScript, WCAG AA có thể truy cập được. Hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
- [Định giá](https://frutjam.com/vi/blocks/pricing.md): Các khối định giá CSS Tailwind chỉ dành cho CSS được xây dựng bằng các thành phần thẻ và nút. Sao chép và dán bảng giá với các bậc, danh sách tính năng và CTA. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.


### Plugin
Mở rộng Frutjam bằng các plugin CSS Tailwind chỉ dành cho CSS. Không có JavaScript, có thể truy cập WCAG, không phụ thuộc vào khung. Hoạt động với Django, HTMX, Laravel và bất kỳ khung nào.

- [Trình chỉnh sửa đánh dấu](https://frutjam.com/vi/plugins/markdown-editor.md): Plugin soạn thảo văn bản Markdown biến vùng văn bản gốc thành bộ chỉnh sửa đầy đủ - không cần đồng bộ hóa. WYSIWYG và các chế độ Markdown đơn giản, xem trước trực tiếp, tìm và thay thế, hỗ trợ RTL, chế độ tối. Hoạt động với Django, Laravel, Rails, Node.js, PHP và bất kỳ ngăn xếp nào.