---
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/fr/components/diff
---
# Diff Component
Diff components display differences between two versions of content, ideal for showing code changes, document revisions, or comparison views. Built with semantic HTML and color-coded styling, diffs help users understand what changed. The Frutjam diff system supports multiple types and styles—perfect for version control interfaces, revision history, and change tracking.
CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
| Classe | Taper | Description |
| ------------ | ------------ | ---------------------------------------------------------- |
| diff | Base | Side-by-side comparison container with a draggable divider |
| diff-item-1 | Modificateur | Left (before) pane of the comparison |
| diff-item-2 | Modificateur | Right (after) pane of the comparison |
| diff-resizer | Modificateur | Draggable handle to resize the two panes |
## Utilisation de base
Create a simple side-by-side diff with before and after states.
## Diff Text Comparison
Display code or text changes side-by-side for detailed comparison.
```html
const greeting = "Hello";
console.log(greeting);
let count = 0;
const greeting = "Hello World";
console.log(greeting);
let count = 1;
```
## Diff with Color Coding
Use semantic colors to highlight removed, added, or changed content.
```html
- const old = "value";
+ const updated = "value";
```
## Image Comparison
Compare visual changes between before and after images with draggable resizer.
```html
```
## Diff Sizes
Control the diff size using width and height utilities on the container.
```html
