Data Diff Viewer

Live Preview
<div
        class="w-full max-w-4xl mx-auto bg-zinc-950 border border-zinc-900 rounded-xl overflow-hidden font-mono text-xs">
        <div class="px-4 py-3 bg-zinc-900 flex items-center justify-between border-b border-zinc-800">
            <div class="flex gap-6">
                <span class="text-zinc-500">v1.2.4</span>
                <span class="text-zinc-500">→</span>
                <span class="text-white font-bold">v1.2.5 (Staging)</span>
            </div>
            <div class="flex gap-2">
                <span class="text-emerald-500">+12 additions</span>
                <span class="text-rose-500">-4 deletions</span>
            </div>
        </div>
        <div class="divide-y divide-zinc-900">
            <div class="flex hover:bg-zinc-900/40 transition-colors">
                <div class="w-12 text-zinc-700 bg-zinc-900/50 flex justify-center py-1">21</div>
                <div class="flex-1 py-1 px-4 text-zinc-400">"model_version": "gpt-3.5-turbo",</div>
            </div>
            <div class="flex bg-rose-500/10">
                <div class="w-12 text-rose-500/50 bg-rose-500/10 flex justify-center py-1">- 22</div>
                <div class="flex-1 py-1 px-4 text-rose-400">"temperature": 0.7,</div>
            </div>
            <div class="flex bg-emerald-500/10">
                <div class="w-12 text-emerald-500/50 bg-emerald-500/10 flex justify-center py-1">+ 22</div>
                <div class="flex-1 py-1 px-4 text-emerald-400">"temperature": 0.2,</div>
            </div>
            <div class="flex bg-emerald-500/10">
                <div class="w-12 text-emerald-500/50 bg-emerald-500/10 flex justify-center py-1">+ 23</div>
                <div class="flex-1 py-1 px-4 text-emerald-400">"frequency_penalty": 0.1,</div>
            </div>
            <div class="flex hover:bg-zinc-900/40 transition-colors">
                <div class="w-12 text-zinc-700 bg-zinc-900/50 flex justify-center py-1">24</div>
                <div class="flex-1 py-1 px-4 text-zinc-400">"max_tokens": 4096</div>
            </div>
        </div>
    </div>

Related components

More items from the merged UI library.

View all