Glassmorphic Feature Grid with Hexagon Icons

<div class="bg-white/5 border-white/10 border rounded-3xl pt-6 pr-6 pb-6 pl-6 backdrop-blur-xl space-x-0">
  <div class="grid md:grid-cols-3 gap-8">
    <div class="text-center">
      <div
        class="w-16 h-16 flex bg-white/10 border-white/20 border rounded-none mx-auto mb-4 shadow-lg backdrop-blur-xl items-center justify-center"
        style="clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
          class="w-8 h-8 text-white">
          <path
            d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
            class=""></path>
        </svg>
      </div>
      <h4 class="text-white font-semibold text-lg mb-2">Lightning Setup</h4>
      <p class="text-gray-400 text-sm">Deploy in minutes, not months with pre-built connectors</p>
    </div>
    <div class="text-center">
      <div
        class="w-16 h-16 mx-auto mb-4 shadow-lg flex items-center justify-center bg-white/10 border border-white/20 backdrop-blur-xl"
        style="clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
          class="w-8 h-8 text-white">
          <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.27,6.96 12,12.01 20.73,6.96" class=""></polyline>
          <line x1="12" y1="22.08" x2="12" y2="12" class=""></line>
        </svg>
      </div>
      <h4 class="text-white font-semibold text-lg mb-2">Universal Sync</h4>
      <p class="text-gray-400 text-sm">Real-time data synchronization across all platforms</p>
    </div>
    <div class="text-center">
      <div
        class="w-16 h-16 mx-auto mb-4 shadow-lg flex items-center justify-center bg-white/10 border border-white/20 backdrop-blur-xl"
        style="clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
          class="w-8 h-8 text-white">
          <path d="M9 12l2 2 4-4" class=""></path>
          <path d="M21 12c-1.5 0-3-1-3-3s1.5-3 3-3 3 1 3 3-1.5 3-3 3" class=""></path>
          <path d="M3 12c1.5 0 3-1 3-3s-1.5-3-3-3-3 1-3 3 1.5 3 3 3" class=""></path>
          <path d="M12 3c0 1.5-1 3-3 3s-3-1.5-3-3 1-3 3-3 3 1.5 3 3" class=""></path>
          <path d="M12 21c0-1.5 1-3 3-3s3 1.5 3 3-1 3-3 3-3-1.5-3-3" class=""></path>
        </svg>
      </div>
      <h4 class="text-white font-semibold text-lg mb-2">Smart Scale</h4>
      <p class="text-gray-400 text-sm">Auto-scales with your business growth and demands</p>
    </div>
  </div>
</div>