Animated Tabs Background

Component 42

About

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Tabs Background to your project and fits it to your theme.

Code

How Animated Tabs Background is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { CleanMotionBackground } from "@/components/ui/animated-tabs-background";

export default function DemoMotionBg() {
  return (
    <CleanMotionBackground
      bgClass="bg-gradient-to-r from-indigo-500 to-purple-500 rounded-lg"
      hoverActivate
    >
      <div data-key="one" className="p-4 text-white font-bold text-lg">First Item</div>
      <div data-key="two" className="p-4 text-white font-bold text-lg">Second Item</div>
      <div data-key="three" className="p-4 text-white font-bold text-lg">Third Item</div>
    </CleanMotionBackground>
  );
}