---
title: "Diff"
type: component
version: "2.2.1"
doc_version: "2.4.3"
status: stable
date: 2026-04-22
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/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.
| Class | Type | Description |
| ------------ | -------- | ---------------------------------------------------------- |
| diff | Base | Side-by-side comparison container with a draggable divider |
| diff-item-1 | Modifier | Left (before) pane of the comparison |
| diff-item-2 | Modifier | Right (after) pane of the comparison |
| diff-resizer | Modifier | Draggable handle to resize the two panes |
## Basic Usage
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
