Marketing Team Sections Base with description Dark

<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
      <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
        <div>
          <img
            src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
            alt=""
            class="aspect-video rounded-lg object-cover"
          />

          <div class="mt-4">
            <div class="flex items-center justify-between gap-4">
              <div>
                <h3 class="text-lg/tight font-semibold text-gray-900 dark:text-white">
                  Eric Johnson
                </h3>

                <p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">Product Designer</p>
              </div>

              <a
                href="#"
                target="_blank"
                rel="noreferrer"
                class="text-[#0072b1] transition-opacity hover:opacity-90 dark:text-white"
              >
                <svg viewBox="0 0 20 20" fill="currentColor" class="size-7">
                  <path
                    d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
                    clip-rule="evenodd"
                    fill-rule="evenodd"
                  ></path>
                </svg>
              </a>
            </div>

            <p class="mt-2 text-pretty text-gray-700 dark:text-gray-200">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, placeat facere? Iste
              nostrum odio magnam?
            </p>
          </div>
        </div>

        <div>
          <img
            src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
            alt=""
            class="aspect-video rounded-lg object-cover"
          />

          <div class="mt-4">
            <div class="flex items-center justify-between gap-4">
              <div>
                <h3 class="text-lg/tight font-semibold text-gray-900 dark:text-white">
                  Eric Johnson
                </h3>

                <p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">Product Designer</p>
              </div>

              <a
                href="#"
                target="_blank"
                rel="noreferrer"
                class="text-[#0072b1] transition-opacity hover:opacity-90 dark:text-white"
              >
                <svg viewBox="0 0 20 20" fill="currentColor" class="size-7">
                  <path
                    d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
                    clip-rule="evenodd"
                    fill-rule="evenodd"
                  ></path>
                </svg>
              </a>
            </div>

            <p class="mt-2 text-pretty text-gray-700 dark:text-gray-200">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, placeat facere? Iste
              nostrum odio magnam?
            </p>
          </div>
        </div>

        <div>
          <img
            src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
            alt=""
            class="aspect-video rounded-lg object-cover"
          />

          <div class="mt-4">
            <div class="flex items-center justify-between gap-4">
              <div>
                <h3 class="text-lg/tight font-semibold text-gray-900 dark:text-white">
                  Eric Johnson
                </h3>

                <p class="mt-0.5 text-sm text-gray-700 dark:text-gray-200">Product Designer</p>
              </div>

              <a
                href="#"
                target="_blank"
                rel="noreferrer"
                class="text-[#0072b1] transition-opacity hover:opacity-90 dark:text-white"
              >
                <svg viewBox="0 0 20 20" fill="currentColor" class="size-7">
                  <path
                    d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
                    clip-rule="evenodd"
                    fill-rule="evenodd"
                  ></path>
                </svg>
              </a>
            </div>

            <p class="mt-2 text-pretty text-gray-700 dark:text-gray-200">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit, placeat facere? Iste
              nostrum odio magnam?
            </p>
          </div>
        </div>
      </div>
    </div>