---
title: "Diff"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Diff for side-by-side content comparisons. Resizable, color-coded layouts for code reviews, document diffs, and before/after change tracking."
url: https://frutjam.com/id/components/diff
---
# Diff Component
Komponen diff menampilkan perbedaan antara dua versi konten, ideal untuk menampilkan perubahan kode, revisi dokumen, atau tampilan perbandingan. Dibangun dengan HTML semantik dan gaya kode warna, diffs membantu pengguna memahami apa yang berubah. Sistem diff Frutjam mendukung berbagai jenis dan gaya—sempurna untuk antarmuka kontrol versi, riwayat revisi, dan pelacakan perubahan.
Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
| Kelas | Jenis | Keterangan |
| ------------ | -------- | ------------------------------------------------------------------ |
| diff | Basis | Wadah perbandingan berdampingan dengan pembatas yang dapat diseret |
| diff-item-1 | Pengubah | Panel kiri (sebelum) perbandingan |
| diff-item-2 | Pengubah | Panel kanan (setelah) perbandingan |
| diff-resizer | Pengubah | Pegangan yang dapat diseret untuk mengubah ukuran kedua panel |
## Penggunaan Dasar
Buat perbedaan sederhana berdampingan dengan status sebelum dan sesudah.
## Perbandingan Teks Berbeda
Tampilkan perubahan kode atau teks secara berdampingan untuk perbandingan mendetail.
```html
const greeting = "Hello";
console.log(greeting);
let count = 0;
const greeting = "Hello World";
console.log(greeting);
let count = 1;
```
## Beda dengan Kode Warna
Gunakan warna semantik untuk menyorot konten yang dihapus, ditambahkan, atau diubah.
```html
- const old = "value";
+ const updated = "value";
```
## Perbandingan Gambar
Bandingkan perubahan visual antara gambar sebelum dan sesudah dengan pengubah ukuran yang dapat diseret.
```html
```
## Ukuran Berbeda
Kontrol ukuran perbedaan menggunakan utilitas lebar dan tinggi pada wadah.
```html
