---
sidebar_position: 2
---

# Center Aligned With Video Play Button On Image

![Cards](/img/center-aligned-with-video-play-button-on-image.png)

```jsx title="Frontend/sections/HeroSections/CenterAlignedWithVideoPlayButtonOnImage.tsx"
<>
      {/* <!-- Hero --> */}
      <div className="relative overflow-hidden">
        <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-10">
          <div className="max-w-2xl text-center mx-auto">
            <h1 className="block text-3xl font-bold text-base-content sm:text-4xl md:text-5xl">
              Designed for you to get more{" "}
              <span className="text-primary">simple</span>
            </h1>
            <p className="mt-3 text-lg text-secondary-content">
              Build your business here. Take it anywhere.
            </p>
          </div>

          <div className="mt-10 relative max-w-5xl mx-auto">
            <div className="w-full object-cover h-96 sm:h-[480px] bg-[url('https://images.unsplash.com/photo-1606868306217-dbf5046868d2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1981&q=80')] bg-no-repeat bg-center bg-cover rounded-xl"></div>

            <div className="absolute inset-0 size-full">
              <div className="flex flex-col justify-center items-center size-full">
                <a
                  className="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-full border border-base-200 bg-base-100 text-base-content shadow-sm hover:bg-base-300 disabled:opacity-50 disabled:pointer-events-non dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-base-100"
                  href="#"
                >
                  <svg
                    className="flex-shrink-0 size-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"
                  >
                    <polygon points="5 3 19 12 5 21 5 3" />
                  </svg>
                  Play the overview
                </a>
              </div>
            </div>

            <div className="absolute bottom-12 -start-20 -z-[1] size-48 bg-gradient-to-b from-orange-500 to-white p-px rounded-lg dark:to-slate-900">
              <div className="bg-white size-48 rounded-lg dark:bg-slate-900"></div>
            </div>

            <div className="absolute -top-12 -end-20 -z-[1] size-48 bg-gradient-to-t from-blue-600 to-cyan-400 p-px rounded-full">
              <div className="bg-white size-48 rounded-full dark:bg-slate-900"></div>
            </div>
          </div>
        </div>
      </div>
      {/* <!-- End Hero --> */}
    </>
```