Footer

Footers 6

About

Here is Footer component

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

Code

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

Usage.tsx

export default function Example() {
    return (
        <footer className="w-full bg-gradient-to-b from-[#F1EAFF] to-[#FFFFFF] text-gray-800">
            <div className="max-w-7xl mx-auto px-6 py-16 flex flex-col items-center">
                <div className="flex items-center space-x-3 mb-6">
                    <img alt="" className="h-11"
                        src="https://cdn.21st.dev/assets/mirror/3a/3a264ad143121827cda659b01dad825e44b701bcccbea6b74438788428f92487.svg" />
                </div>
                <p className="text-center max-w-xl text-sm font-normal leading-relaxed">
                    Empowering creators worldwide with the most advanced AI content creation tools. Transform your ideas
                    into reality.
                </p>
            </div>
            <div className="border-t border-slate-200">
                <div className="max-w-7xl mx-auto px-6 py-6 text-center text-sm font-normal">
                    <a href="https://prebuiltui.com">prebuiltui</a> ©2025. All rights reserved.
                </div>
            </div>
        </footer>
    );
};