Feature Sections

Features 160

About

Here is Feature Sections component

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

Code

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

Usage.tsx

export default function Example() {
    return (
        <>
            <style>{`
                @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
            
                * {
                    font-family: 'Poppins', sans-serif;
                }
            `}</style>
            
            <div className="max-md:px-4">
                <p className="bg-gradient-to-r from-slate-800 to-[#4D6EA3] text-transparent bg-clip-text text-3xl text-left max-w-2xl">Trusted by world’s leading companies.</p>
                <div className="flex flex-col-reverse md:flex-row items-center justify-center max-h-[450px] gap-6 mt-6">
                    <img src="https://cdn.21st.dev/assets/mirror/72/72c41af599b8c4d6531a571363d02a50a745a11b66256a79a5c36ea5a631e2b7.svg" alt="features showcase" className="hover:-translate-y-1 transition-all duration-300 " />
                    <img src="https://cdn.21st.dev/assets/mirror/da/dad999799c5960fc4ed8b44658f63869d93ac85cac80ec30884fbe95864b7e27.svg" alt="features showcase" className="hover:-translate-y-1 transition-all duration-300 max-md:w-full" />
                </div>
            </div>
        </>
    );
};