Diff
Diff component shows a side-by-side comparison of two items.
| Class name | Type | |
|---|---|---|
| diff | Component | Container element |
| diff-item-1 | Part | First item |
| diff-item-2 | Part | Second item |
| diff-resizer | Part | The resizer control |
<div class="$$diff aspect-16/9"> <div class="$$diff-item-1"> <img alt="daisy" src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp" /> </div> <div class="$$diff-item-2"> <img alt="daisy" src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp" /> </div> <div class="$$diff-resizer"></div> </div>
<div class="$$diff aspect-16/9">
<div class="$$diff-item-1">
<img alt="daisy" src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp" />
</div>
<div class="$$diff-item-2">
<img
alt="daisy"
src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp" />
</div>
<div class="$$diff-resizer"></div>
</div>
<div class="$$diff aspect-16/9">
<div class="$$diff-item-1">
<img alt="daisy" src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp" />
</div>
<div class="$$diff-item-2">
<img
alt="daisy"
src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp" />
</div>
<div class="$$diff-resizer"></div>
</div>
<div class="$$diff aspect-16/9">
<div class="$$diff-item-1">
<img alt="daisy" src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp" />
</div>
<div class="$$diff-item-2">
<img
alt="daisy"
src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp" />
</div>
<div class="$$diff-resizer"></div>
</div>DAISY
DAISY
<div class="$$diff aspect-16/9"> <div class="$$diff-item-1"> <div class="bg-primary text-primary-content grid place-content-center text-9xl font-black"> DAISY </div> </div> <div class="$$diff-item-2"> <div class="bg-base-200 grid place-content-center text-9xl font-black">DAISY</div> </div> <div class="$$diff-resizer"></div> </div>
<div class="$$diff aspect-16/9">
<div class="$$diff-item-1">
<div class="bg-primary text-primary-content grid place-content-center text-9xl font-black">
DAISY
</div>
</div>
<div class="$$diff-item-2">
<div class="bg-base-200 grid place-content-center text-9xl font-black">DAISY</div>
</div>
<div class="$$diff-resizer"></div>
</div>
<div class="$$diff aspect-16/9">
<div class="$$diff-item-1">
<div class="bg-primary text-primary-content grid place-content-center text-9xl font-black">
DAISY
</div>
</div>
<div class="$$diff-item-2">
<div class="bg-base-200 grid place-content-center text-9xl font-black">DAISY</div>
</div>
<div class="$$diff-resizer"></div>
</div>
<div class="$$diff aspect-16/9">
<div class="$$diff-item-1">
<div class="bg-primary text-primary-content grid place-content-center text-9xl font-black">
DAISY
</div>
</div>
<div class="$$diff-item-2">
<div class="bg-base-200 grid place-content-center text-9xl font-black">DAISY</div>
</div>
<div class="$$diff-resizer"></div>
</div>Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective
