Dual-Row Opposite Marquee

<!--
  Two rows, one keyframe. The bottom track adds [animation-direction:reverse]
  so it slides the other way - and because -50% and 0 both show identical
  content, reverse is seamless without a second keyframe.
-->
<style>
  @keyframes marquee-dual-scroll {
    to { transform: translateX(-50%); }
  }
</style>

<section class="flex w-full flex-col gap-4" aria-label="Technologies we use">
  <div class="w-full overflow-hidden">
    <div class="flex w-max animate-[marquee-dual-scroll_30s_linear_infinite] motion-reduce:w-full motion-reduce:animate-none">
      <ul class="flex shrink-0 items-center gap-3 pr-3 motion-reduce:w-full motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-y-3 motion-reduce:pr-0">
        <li class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-3.5 py-1.5 text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">TypeScript</li>
        <li class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-3.5 py-1.5 text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">React</li>
        <li class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-3.5 py-1.5 text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">Next.js</li>
        <li class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-3.5 py-1.5 text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">Tailwind</li>
      </ul>
      <ul class="flex shrink-0 items-center gap-3 pr-3 motion-reduce:hidden" aria-hidden="true">
        <li class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-3.5 py-1.5 text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">TypeScript</li>
        <li class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-3.5 py-1.5 text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">React</li>
        <li class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-3.5 py-1.5 text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">Next.js</li>
        <li class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-3.5 py-1.5 text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">Tailwind</li>
      </ul>
    </div>
  </div>
  <div class="w-full overflow-hidden">
    <div class="flex w-max animate-[marquee-dual-scroll_30s_linear_infinite] [animation-direction:reverse] motion-reduce:w-full motion-reduce:animate-none">
      <ul class="flex shrink-0 items-center gap-3 pr-3 motion-reduce:w-full motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-y-3 motion-reduce:pr-0">
        <li class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-3.5 py-1.5 text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">Postgres</li>
        <li class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-3.5 py-1.5 text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">Redis</li>
        <li class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-3.5 py-1.5 text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">Docker</li>
        <li class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-3.5 py-1.5 text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">GraphQL</li>
      </ul>
      <ul class="flex shrink-0 items-center gap-3 pr-3 motion-reduce:hidden" aria-hidden="true">
        <li class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-3.5 py-1.5 text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">Postgres</li>
        <li class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-3.5 py-1.5 text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">Redis</li>
        <li class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-3.5 py-1.5 text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">Docker</li>
        <li class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-3.5 py-1.5 text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">GraphQL</li>
      </ul>
    </div>
  </div>
</section>