Realtime Messaging Feature Highlight Card

<div class="ring-1 ring-white/10 flex flex-col bg-neutral-900/30 rounded-3xl backdrop-blur">
            <div class="sm:p-8 pt-6 pr-6 pb-6 pl-6 space-y-3">
              <div class="flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4.5 w-4.5 text-emerald-300"><path d="M2 12h20" class=""></path><path d="M2 6h20" class=""></path><path d="M2 18h20" class=""></path></svg>
                <span class="text-sm text-neutral-300 font-sans" style="">Realtime</span>
              </div>
              <h2 class="text-2xl tracking-tight text-white font-bricolage font-light" style="">Channels &amp; threads</h2>
              <p class="text-sm leading-relaxed text-neutral-300 font-sans" style="">
                Keep conversations organized with threads, mentions, and file attachments. Everything syncs instantly across devices.
              </p>
              <div class="mt-3 flex items-center gap-3">
                <span class="inline-flex items-center gap-1.5 rounded-md bg-emerald-400/10 px-2 py-1 text-xs text-emerald-300 ring-1 ring-emerald-400/20 font-sans" style="">
                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="workflow" class="lucide lucide-workflow w-[14px] h-[14px]" data-icon-replaced="true" style="width: 14px; height: 14px; color: rgb(110, 231, 183);"><rect width="8" height="8" x="3" y="3" rx="2" class=""></rect><path d="M7 11v4a2 2 0 0 0 2 2h4" class=""></path><rect width="8" height="8" x="13" y="13" rx="2" class=""></rect></svg>
                  Low latency
                </span>
                <span class="inline-flex items-center gap-1.5 rounded-md bg-indigo-400/10 px-2 py-1 text-xs text-indigo-300 ring-1 ring-indigo-400/20 font-sans" style="">
                  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5"><circle cx="12" cy="12" r="10" class=""></circle><path d="M2 12h20" class=""></path><path d="M12 2a15.3 15.3 0 0 1 0 20" class=""></path></svg>
                  Global
                </span>
              </div>
            </div>
          </div>