Cookies

Buttons 38

About

Here is Cookie Consent Popup component

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

Code

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

Usage.tsx

import React from "react";
export default function Example() {
    return (
        <div className="flex flex-col items-center w-96 bg-white text-gray-500 text-center p-6 rounded-lg border border-gray-500/30 text-sm">
            <img className="w-14 h-14" src="https://cdn.21st.dev/assets/mirror/b6/b6dc3f6751122be7bebc00268851128ef7b3342996ab89e79a8dd9cedc9a20fb.svg" alt="cookieImage1" />
            <h2 className="text-gray-800 text-xl font-medium pb-3 mt-2">We care about your privacy</h2>
            <p className="w-11/12">This website uses cookies for functionality, analytics, and marketing. By accepting, you agree to our <a href="#" className="font-medium underline">Cookie Policy</a>.</p>
            <div className="flex items-center justify-center mt-6 gap-4 w-full">
                <button type="button" className="font-medium px-8 border border-gray-500/30 py-2 rounded hover:bg-blue-500/10 active:scale-95 transition">Decline</button>
                <button type="button" className="bg-indigo-600 px-8 py-2 rounded text-white font-medium active:scale-95 transition">Accept</button>
            </div>
        </div>
    );
};