Code Comparison
A before/after diff view with red and green line highlights, line numbers, and filename tab headers over realistic React code.
card.tsx, before
1·function Card({ title }) {
2· return (
3− <div className="card">
4· <h3>{title}</h3>
5− </div>
6· );
7·}
card.tsx, after
1·function Card({ title }) {
2· return (
3+ <div className="rounded-2xl border
4+ border-line bg-panel p-6 shadow-lg">
5· <h3>{title}</h3>
6− </div>
7· );
8·}
Usage: paste this file into your project (e.g.
components/code-comparison.tsx), make sure framer-motion, clsx and tailwind-merge are installed, and add the cn() helper from the docs.