---
sidebar_position: 2
---

# Card With Background Gray On Hover

![Cards](/img/card-with-background-gray-on-hover.png)

```jsx title="Frontend/sections/BlogSections/CardWithBackgroundGrayOnHover.tsx"
<>
      {/* <!-- Card Blog --> */}
      <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
        {/* <!-- Title --> */}
        <div className="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
          <h2 className="text-2xl font-bold md:text-4xl md:leading-tight">
            Customer stories
          </h2>
          <p className="mt-1 text-secondary-content">
            See how game-changing companies are making the most of every
            engagement with FastPocket.
          </p>
        </div>
        {/* <!-- End Title --> */}

        {/* <!-- Grid --> */}
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {/* <!-- Card --> */}
          <a
            className="group hover:bg-base-300 rounded-xl p-5 transition-all"
            href="#"
          >
            <div className="aspect-w-16 aspect-h-10">
              <img
                className="w-full h-48 object-cover rounded-xl"
                src="https://images.unsplash.com/photo-1661956602116-aa6865609028?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80"
                alt="Image Description"
              />
            </div>
            <h3 className="mt-5 text-xl text-secondary-content">
              Unity’s inside sales team drives 80% of its revenue with
              FastPocket.
            </h3>
            <p className="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold text-secondary-content">
              Learn more
              <svg
                className="flex-shrink-0 w-4 transition ease-in-out group-hover:translate-x-1"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path d="m9 18 6-6-6-6" />
              </svg>
            </p>
          </a>
          {/* <!-- End Card --> */}

          {/* <!-- Card --> */}
          <a
            className="group hover:bg-base-300 rounded-xl p-5 transition-all"
            href="#"
          >
            <div className="aspect-w-16 aspect-h-10">
              <img
                className="w-full h-48 object-cover rounded-xl"
                src="https://images.unsplash.com/photo-1669739432571-aee1f057c41f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1065&q=80"
                alt="Image Description"
              />
            </div>
            <h3 className="mt-5 text-xl text-secondary-content">
              Living Spaces creates a unified experience across the customer
              journey.
            </h3>
            <p className="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold text-secondary-content">
              Learn more
              <svg
                className="flex-shrink-0 w-4 transition ease-in-out group-hover:translate-x-1"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path d="m9 18 6-6-6-6" />
              </svg>
            </p>
          </a>
          {/* <!-- End Card --> */}

          {/* <!-- Card --> */}
          <a
            className="group hover:bg-base-300 rounded-xl p-5 transition-all"
            href="#"
          >
            <div className="aspect-w-16 aspect-h-10">
              <img
                className="w-full h-48 object-cover rounded-xl"
                src="https://images.unsplash.com/photo-1657299171054-e679f630a776?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
                alt="Image Description"
              />
            </div>
            <h3 className="mt-5 text-xl text-secondary-content">
              Atlassian powers sales and support at scale with FastPocket.
            </h3>
            <p className="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold text-secondary-content">
              Learn more
              <svg
                className="flex-shrink-0 w-4 transition ease-in-out group-hover:translate-x-1"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path d="m9 18 6-6-6-6" />
              </svg>
            </p>
          </a>
          {/* <!-- End Card --> */}
        </div>
        {/* <!-- End Grid --> */}
      </div>
      {/* <!-- End Card Blog --> */}
    </>
```