---
sidebar_position: 2
---

# Full Width Center Aligned Link On Gray Background

![Cards](/img/full-width-center-aligned-link-on-gray-background.png)

```jsx title="Frontend/sections/AnnouncementBanners/FullWidthCenterAlignedLinkOnGrayBackground.tsx"
<>
      {/* <!-- Announcement Banner --> */}
      <a
        className="group block bg-base-100 hover:bg-base-300 p-4 rounded-lg text-center transition-all duration-300"
        href="#"
      >
        <div className="max-w-[85rem] px-4 sm:px-6 lg:px-8 mx-auto">
          <p className="me-2 inline-block text-sm text-secondary-content">
            Shop for everyone on your list with the FastPocket Guide.
          </p>
          <span className="group-hover:underline decoration-2 inline-flex justify-center items-center gap-x-2 font-semibold text-primary text-sm">
            Shop now
            <svg
              className="flex-shrink-0 w-4"
              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>
          </span>
        </div>
      </a>
      {/* <!-- End Announcement Banner --> */}
    </>
```