Responsive Feature Grid Section with Icons

<section class="relative z-10 mt-10 mb-20 pt-0 pb-0" data-element-locator="html &gt; body:nth-of-type(1) &gt; section:nth-of-type(3)">
      <div class="max-w-6xl sm:px-6 lg:px-8 mr-auto ml-auto pt-16 pr-4 pb-16 pl-4">
        <h2 class="sm:text-4xl text-3xl font-semibold text-white tracking-tight text-center">Everything you need to ship</h2>

        <div class="ring-1 ring-white/10 bg-[conic-gradient(from_180deg,var(--tw-gradient-stops))] from-blue-500/20 to-purple-500/10 rounded-2xl mt-10 backdrop-blur">
          <div class="grid grid-cols-1 md:grid-cols-3 border-white/10 border-b">
            <div class="hover:bg-white/10 transition-all duration-300 cursor-pointer relative overflow-hidden group text-center pt-8 pr-8 pb-8 pl-8">
              <div class="mx-auto mb-4 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10 text-slate-200 group-hover:bg-white/10 transition-colors duration-300">
                <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" data-lucide="kanban" class="lucide lucide-kanban h-5 w-5"><path d="M5 3v14" class=""></path><path d="M12 3v8" class=""></path><path d="M19 3v18" class=""></path></svg>
              </div>
              <h3 class="text-lg text-white">Kanban boards</h3>
              <p class="mt-1 text-sm text-zinc-400">with custom workflows</p>
            </div>
            <div class="p-8 text-center md:border-l md:border-white/10 hover:bg-white/10 transition-all duration-300 cursor-pointer relative overflow-hidden group">
              <div class="mx-auto mb-4 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10 text-slate-200 group-hover:bg-white/10 transition-colors duration-300">
                <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" data-lucide="git-branch" class="lucide lucide-git-branch h-5 w-5"><line x1="6" x2="6" y1="3" y2="15" class=""></line><circle cx="18" cy="6" r="3" class=""></circle><circle cx="6" cy="18" r="3" class=""></circle><path d="M18 9a9 9 0 0 1-9 9" class=""></path></svg>
              </div>
              <h3 class="text-lg font-semibold tracking-tight text-white">Git integration</h3>
              <p class="mt-1 text-sm text-zinc-400">link PRs to features</p>
            </div>
            <div class="p-8 text-center md:border-l md:border-white/10 hover:bg-white/10 transition-all duration-300 cursor-pointer relative overflow-hidden group">
              <div class="mx-auto mb-4 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10 text-slate-200 group-hover:bg-white/10 transition-colors duration-300">
                <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" data-lucide="bar-chart-3" class="lucide lucide-bar-chart-3 h-5 w-5"><path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path><path d="M18 17V9" class=""></path><path d="M13 17V5" class=""></path><path d="M8 17v-3" class=""></path></svg>
              </div>
              <h3 class="text-lg font-semibold tracking-tight text-white">Progress analytics</h3>
              <p class="mt-1 text-sm text-zinc-400">velocity and burndown charts</p>
            </div>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2">
            <div class="md:border-r md:border-white/10 hover:bg-white/10 transition-all duration-300 cursor-pointer relative overflow-hidden group text-center pt-8 pr-8 pb-8 pl-8">
              <div class="mx-auto mb-4 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10 text-slate-200 group-hover:bg-white/10 transition-colors duration-300">
                <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" data-lucide="message-square" class="lucide lucide-message-square h-5 w-5"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z" class=""></path></svg>
              </div>
              <h3 class="text-lg font-semibold tracking-tight text-white">Async updates</h3>
              <p class="text-sm text-zinc-400 mt-1">threaded comments and mentions</p>
            </div>
            <div class="p-8 text-center hover:bg-white/10 transition-all duration-300 cursor-pointer relative overflow-hidden group">
              <div class="mx-auto mb-4 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 ring-1 ring-white/10 text-slate-200 group-hover:bg-white/10 transition-colors duration-300">
                <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" data-lucide="webhook" class="lucide lucide-webhook h-5 w-5"><path d="M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2" class=""></path><path d="m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06" class=""></path><path d="m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8" class=""></path></svg>
              </div>
              <h3 class="text-lg font-semibold tracking-tight text-white">Powerful API</h3>
              <p class="mt-1 text-sm text-zinc-400">automate your workflow</p>
            </div>
          </div>
        </div>
      </div>
    </section>