---
sidebar_position: 2
---

# Solid Backgrond Icon Feature

![Cards](/img/solid-backgrond-icon-feature.png)

```jsx title="Frontend/sections/Features/SolidBackgrondIconFeature.tsx"
<>
      {/* Icon Blocks */}
      <div className="max-w-5xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 items-center gap-2">
          {/* Icon Block */}
          <a
            className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
            href="#"
          >
            <div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
              <Image
                src={"/images/stripe-icon.png"}
                alt={""}
                width={32}
                height={32}
              />
            </div>
            <div className="mt-5">
              <h3 className="group-hover:text-base-content text-lg font-semibold text-base-content  ">
                Stripe Payments
              </h3>
              <p className="mt-1 text-base-content ">
                We have built stripe payments for 1 off and reoccuring payments
              </p>
            </div>
          </a>
          {/* End Icon Block */}
          {/* Icon Block */}
          <a
            className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
            href="#"
          >
            <div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
              <Image
                src={"/images/daisyui-icon.png"}
                alt={""}
                width={32}
                height={32}
              />
            </div>
            <div className="mt-5">
              <h3 className="group-hover:text-base-content text-lg font-semibold text-base-content  ">
                Theming
              </h3>
              <p className="mt-1 text-base-content ">
                All our components include intuative theming with a js utility
                class that uses your themes colors programmatically
              </p>
            </div>
          </a>
          {/* End Icon Block */}
          {/* Icon Block */}
          <a
            className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
            href="#"
          >
            <div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
              <Icon name="Library32Filled" style={{ height: 32, width: 32 }} />
            </div>
            <div className="mt-5">
              <h3 className="group-hover:text-base-content text-lg font-semibold text-base-content  ">
                Documentation
              </h3>
              <p className="mt-1 text-base-content ">
                Every component and plugin is well documented
              </p>
            </div>
          </a>
          {/* End Icon Block */}
          {/* Icon Block */}
          <a
            className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
            href="#"
          >
            <div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
              <Image
                src={"/images/pocketbase-icon.png"}
                alt={""}
                width={32}
                height={32}
              />
            </div>
            <div className="mt-5">
              <h3 className="group-hover:text-base-content text-lg font-semibold text-base-content  ">
                Deployment Templates
              </h3>
              <p className="mt-1 text-base-content ">
                For fly.io, raleway, and more so you can get running with
                PocketBase as quickly as possible
              </p>
            </div>
          </a>
          {/* End Icon Block */}
          {/* Icon Block */}
          <a
            className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
            href="#"
          >
            <div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
              <Image
                src={"/images/daisyui-icon.png"}
                alt={""}
                width={32}
                height={32}
              />
            </div>
            <div className="mt-5">
              <h3 className="group-hover:text-base-content text-lg font-semibold text-base-content  ">
                Component Library
              </h3>
              <p className="mt-1 text-base-content ">
                We provide fully customisable sections and components that you
                can drop in
              </p>
            </div>
          </a>
          {/* End Icon Block */}
          {/* Icon Block */}
          <a
            className="group flex flex-col justify-center bg-base-200 shadow-lg rounded-xl p-4 md:p-7 border-primary/40 border "
            href="#"
          >
            <div className="flex justify-center items-center size-12 bg-primary rounded-xl py-2">
              <Image
                src={"/images/nextjs-icon.png"}
                alt={""}
                width={32}
                height={32}
              />
            </div>
            <div className="mt-5">
              <h3 className="group-hover:text-base-content text-lg font-semibold text-base-content  ">
                Resources
              </h3>
              <p className="mt-1 text-base-content ">
                A growing list of resources to help you build your products
                faster
              </p>
            </div>
          </a>
          {/* End Icon Block */}
        </div>
      </div>
      {/* End Icon Blocks */}
    </>
```