Feature Sections

Features 185

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="px-4 md:px-8">
        <p className="bg-gradient-to-r from-slate-800 to-[#4D6EA3] text-transparent bg-clip-text text-2xl md:text-3xl text-left font-medium max-w-2xl">
          Why do 500+ companies choose to integrate our features?
        </p>

        <div className="flex flex-col-reverse md:flex-row items-center justify-center gap-6 mt-6">
          <img
            src="https://cdn.21st.dev/assets/mirror/f3/f3b76ce2a8adea1e3f8b340b99a1e5ad65cfa9bc05940c3428da03fb7cd33c7a.svg"
            alt="features showcase"
            className="w-full md:w-1/2 h-auto"
          />
          <img
            src="https://cdn.21st.dev/assets/mirror/cd/cd39a1b58c3a95f0a3e1d99e0bf7979820e3e5ad6c89af9b16cb3e465b678ef2.svg"
            alt="features showcase"
            className="w-full md:w-1/2 h-auto"
          />
        </div>
      </div>
    </>
  );
}