Auto-Scrolling Partner Logos Marquee

<div
  class="shadow-black/30 bg-white/5 border-white/10 border rounded-3xl pt-12 pr-4 pb-12 pl-4 shadow-2xl backdrop-blur-sm">
  <div class="flex gap-4 gap-x-4 gap-y-4 items-stretch">
    <div class="hidden md:flex rounded-xl pt-6 pr-6 pb-6 pl-6 items-center justify-center">
      <p class="sm:text-xl leading-snug text-lg font-medium text-white/90 tracking-tight">Trusted by 4500+ <br>
companies worldwide</p>
    </div>
    <div
      class="flex-1 overflow-hidden shadow-black/30 bg-[#0d0f16]/70 border-white/10 border rounded-2xl pt-8 pr-4 pb-8 pl-4 shadow-lg"
      style="mask-image: linear-gradient(90deg, transparent, black 20%, black 70%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 20%, black 70%, transparent);">
      <style>
        @keyframes scrollLogos {
          0% {
            transform: translateX(0);
          }

          100% {
            transform: translateX(-50%);
          }
        }

        .logo-scroll-container {
          display: flex;
          animation: scrollLogos 20s linear infinite;
          will-change: transform;
        }

        .logo-scroll-container:hover {
          animation-play-state: paused;
        }
      </style>
      <div class="logo-scroll-container">
        <div class="flex gap-4 shrink-0">
          <div class="rounded-2xl border border-white/10 bg-[#0d0f16]/70 p-5 shadow-lg shadow-black/30 w-64">
            <div class="flex items-center gap-3">
              <div class="rounded-xl border border-white/10 bg-white/5 p-2">
                <svg 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"
                  class="h-5 w-5 text-white/90">
                  <path
                    d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
                    class=""></path>
                  <polyline points="3.29 7 12 12 20.71 7" class=""></polyline>
                  <line x1="12" x2="12" y1="22" y2="12" class=""></line>
                </svg>
              </div>
              <span class="text-base font-semibold tracking-tight text-white">TechCube</span>
            </div>
          </div>
          <div class="rounded-2xl border border-white/10 bg-[#0d0f16]/70 p-5 shadow-lg shadow-black/30 w-64">
            <div class="flex items-center gap-3">
              <div class="rounded-xl border border-white/10 bg-white/5 p-2">
                <svg 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"
                  class="h-5 w-5 text-white/90">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <line x1="2" x2="22" y1="12" y2="12" class=""></line>
                  <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
                    class=""></path>
                </svg>
              </div>
              <span class="text-base font-semibold tracking-tight text-white">GlobalNet</span>
            </div>
          </div>
          <div class="rounded-2xl border border-white/10 bg-[#0d0f16]/70 p-5 shadow-lg shadow-black/30 w-64">
            <div class="flex items-center gap-3">
              <div class="rounded-xl border border-white/10 bg-white/5 p-2">
                <svg 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"
                  class="h-5 w-5 text-white/90">
                  <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" class=""></path>
                </svg>
              </div>
              <span class="text-base font-semibold tracking-tight text-white">PayFlow</span>
            </div>
          </div>
          <div class="rounded-2xl border border-white/10 bg-[#0d0f16]/70 p-5 shadow-lg shadow-black/30 w-64">
            <div class="flex items-center gap-3">
              <div class="rounded-xl border border-white/10 bg-white/5 p-2">
                <svg 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"
                  class="h-5 w-5 text-white/90">
                  <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" class=""></polygon>
                </svg>
              </div>
              <span class="text-base font-semibold tracking-tight text-white">BoltCloud</span>
            </div>
          </div>
        </div>
        <div class="flex gap-4 shrink-0">
          <div class="rounded-2xl border border-white/10 bg-[#0d0f16]/70 p-5 shadow-lg shadow-black/30 w-64">
            <div class="flex items-center gap-3">
              <div class="rounded-xl border border-white/10 bg-white/5 p-2">
                <svg 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"
                  class="h-5 w-5 text-white/90">
                  <path
                    d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
                    class=""></path>
                  <polyline points="3.29 7 12 12 20.71 7" class=""></polyline>
                  <line x1="12" x2="12" y1="22" y2="12" class=""></line>
                </svg>
              </div>
              <span class="text-base font-semibold tracking-tight text-white">TechCube</span>
            </div>
          </div>
          <div class="rounded-2xl border border-white/10 bg-[#0d0f16]/70 p-5 shadow-lg shadow-black/30 w-64">
            <div class="flex items-center gap-3">
              <div class="rounded-xl border border-white/10 bg-white/5 p-2">
                <svg 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"
                  class="h-5 w-5 text-white/90">
                  <circle cx="12" cy="12" r="10" class=""></circle>
                  <line x1="2" x2="22" y1="12" y2="12" class=""></line>
                  <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
                    class=""></path>
                </svg>
              </div>
              <span class="text-base font-semibold tracking-tight text-white">GlobalNet</span>
            </div>
          </div>
          <div class="rounded-2xl border border-white/10 bg-[#0d0f16]/70 p-5 shadow-lg shadow-black/30 w-64">
            <div class="flex items-center gap-3">
              <div class="rounded-xl border border-white/10 bg-white/5 p-2">
                <svg 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"
                  class="h-5 w-5 text-white/90">
                  <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" class=""></path>
                </svg>
              </div>
              <span class="text-base font-semibold tracking-tight text-white">PayFlow</span>
            </div>
          </div>
          <div class="rounded-2xl border border-white/10 bg-[#0d0f16]/70 p-5 shadow-lg shadow-black/30 w-64">
            <div class="flex items-center gap-3">
              <div class="rounded-xl border border-white/10 bg-white/5 p-2">
                <svg 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"
                  class="h-5 w-5 text-white/90">
                  <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" class=""></polygon>
                </svg>
              </div>
              <span class="text-base font-semibold tracking-tight text-white">BoltCloud</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>